Documentazione Droptables

 

introduzione

Droptables è un'estensione Joomla utilizzata per gestire le tabelle HTML in Joomla con un'interfaccia simile a un foglio di calcolo.

Droptables-table-estensione

Caratteristiche principali:

  • Gestisci tabelle come in un foglio di calcolo
  • 6 temi inclusi
  • Completamente gestito da qualsiasi editor
  • Sincronizzazione di Excel e Fogli Google
  • AJAX risparmio automatico
  • Dati ordinabili sul frontend
  • Editor di stile di cella, linea, colonna
  • Copia cella con drag'n drop
  • Copia la tabella completa in un clic
  • Formato celle HTML
  • Editor di codice CSS avanzato

 

I. INSTALLAZIONE DROPTABLES

1.1 Installazione

Il nostro componente è compatibile con Joomla 3.x. Tutte le funzionalità e le integrazioni di terze parti sono incluse in tutte le iscrizioni.
Per installare il nostro componente devi scaricare l'estensione .zip e usare l'installer standard di Joomla.

joomla-installazione

 

Quindi fare clic su Sfoglia> pulsante Carica e installa, componente, moduli e plug-in verranno installati attivati ​​per impostazione predefinita.

 

1.2 Aggiornamento e aggiornamento automatico

Per aggiornare l'estensione è possibile installare una nuova versione rispetto a quella precedente scaricando il file ZIP da JoomUnited o utilizzare l'aggiornamento automatico (consigliato).

Droptable-update

L'aggiornamento automatico, che invia la notifica di aggiornamento, è incorporato nell'estensione di Joomla che hai installato. Quindi riceverai una notifica come qualsiasi altra estensione nella dashboard o utilizzando il menu: Estensione> Gestisci> menu Aggiorna.

Accedi al tuo account per aggiornare

Devi accedere al tuo account JoomUnited per aggiornare tutte le tue estensioni Joomla JoomUnited. Per accedere accedere alla configurazione principale del componente, quindi fare clic su Scheda di aggiornamento in tempo reale. In fondo, troverai un pulsante di accesso.

live Update

 

Inserisci le tue credenziali JoomUnited, le stesse che usi per accedere qui @ www.joomunited.com

login-joomunited

 

Il pulsante diventerà arancione, congratulazioni! ora puoi aggiornare tutte le estensioni JoomUnited su questo sito! Se la tua iscrizione è scaduta riceverai un link di rinnovo e un testo che lo spiegherà.

conto-linked

Nota: un singolo accesso ti consentirà di aggiornare tutte le estensioni JoomUnited (relative alla tua iscrizione). Il login non scadrà se non lo scolleghi.

II. GESTISCI TAVOLI

2.1 Gestisci tabelle da articolo o componente

Quando Droptables è installato, hai una voce componente, menu Componenti> Droptables e un pulsante di modifica che viene visualizzato sotto il tuo editor. Fare clic su di esso per aprire la vista principale Droptables.

droptables-editore

 

L'interfaccia del gestore tabelle è aperta in una lightbox dall'editor:

droptables-ID-open

 

Quando vuoi inserire una tabella nel tuo editor usa il pulsante in alto a destra Inserisci questa tabella per inserirlo nel tuo articolo. Quindi, la tabella si materializzerà con un'area grigia e un'icona simile a Excel.

tavolo-in-editore

 

Se si fa clic sull'area, sul pulsante Droptables verrà caricata nuovamente la tabella precedentemente aggiunta.

 

2.2 Gestire tabelle e categorie

Le tabelle sono classificate in categorie. Puoi avere tutte le tabelle che vuoi all'interno delle categorie. Per creare una categoria di tabella, fare clic su Nuova categoria di tabella in alto al centro. Per creare una nuova tabella basta fare clic sul Crea tabella.

table-categorie

 

Nota: una categoria e una tabella predefinite sono già state create durante l'installazione del componente. Puoi spostare tabelle e categorie di tabelle usando drag'n drop.

tavolo-move

 

La categoria può essere gestita posizionando il mouse su di essa, sarai in grado di modificare il nome, copiare o eliminare la tabella.

nome-tabella

 

2.3 Edizione da tavolo

Per aggiungere dati nelle tabelle devi comportarti come se fossi in una diffusione. Fare doppio clic su una cella ti darà la possibilità di aggiornare il contenuto, un singolo clic per selezionare una / alcune celle (e per applicare lo stile per esempio).

edit-cell

Per aggiungere una riga o una colonna, fai clic sul + sul bordo della tabella:

add-line-tavolo

 

Oppure usa il tasto destro.

destra-clic-add

 

Per copiare le celle puoi usare CTRL + C / CTRL + V oppure puoi posizionare il mouse nell'angolo in basso a destra della cella e portarlo nella direzione desiderata.

copia-cell

 

Nota: tutte le modifiche vengono salvate istantaneamente automaticamente con un messaggio in alto a destra. Hai un'opzione per disabilitare questa funzione dal Droptables> Opzioni

save-table

 

 

Dal menu del tasto destro puoi annullare le ultime modifiche, tutte le ultime da quando hai ricaricato la pagina. Droptables mantiene un backup della modifica che hai fatto ed è in grado di ripristinarlo.

undo-action

Le celle possono anche essere unite. Selezionare 2 celle o più, quindi fare un clic destro. Un menu ti permetterà di fare la fusione.

 

2.4 Edizione del contenuto avanzata

Di recente abbiamo aggiunto una nuova funzione nell'interfaccia dell'edizione. Ora puoi aggiungere contenuto HTML con un editor WYSIWYG all'interno di ogni cella. Seleziona una cella, sulla parte destra, vai alla scheda Formato> HTML

html-cell

 

Ora quando modifichi la cella, avrai dentro l'editor HTML. Include anche tutto il pulsante del contenuto dell'editor, qui ho usato il pulsante immagine ad esempio. I pulsanti dell'editor disponibili sono configurabili come opzione.

Editor-button

 

 

2.5 Importazione / esportazione di Excel e fogli di calcolo

 

Puoi importare ed esportare fogli di calcolo in Droptables utilizzando il nostro strumento dedicato. Deve essere attivato dalla configurazione: Componenti> Droptables> Opzioni

excel-import

 

Le tabelle possono essere importate da Excel o Open Office. Il formato verrà rilevato automaticamente e importato. Si noti che verrà importata solo la prima pagina di Excel. L'esportazione può essere eseguita in formato Excel 2003 o 2007.

Excel - scheda-import-export

 

Puoi anche importare o esportare solo dati della tabella o dati della tabella + stili. I dati di importazione sono utili solo per preservare il layout durante l'importazione.

 

III. STYLING THE TABLES

3.1 Formato

La scheda formato è disponibile nella parte destra dello schermo per impostazione predefinita. Contiene diversi parametri di stile.

 

forma di tabella

  • Tipo di cella: predefinito o HTML (con editor). Il tipo predefinito consente di calcolare con esso l'HTML inserendo contenuti HTML come le immagini.
  • Lo sfondo della cella riguarda la definizione del colore di sfondo, naturalmente
  • Opzioni di bordo e carattere può essere applicato su celle singole o multiple
  • La larghezza e l'altezza della riga e della colonna può essere definito in pixel. Seleziona una colonna o una riga in qualsiasi punto della tabella e convalida le dimensioni.

riga-colonna-size

È disponibile anche un suggerimento sul passaggio del mouse della cella (deve essere attivato dalle opzioni del componente). Facendo clic sul pulsante Tooltip è possibile modificare il contenuto visibile sul passaggio del mouse della cella sul frontend.

table-cell-tooltip

 

3.2 Temi e opzioni di ordinamento

 

Sulla scheda tabella, sempre sulla parte destra, hai un selettore di temi in miniatura. Basta fare clic su un tema per applicarlo. Raccomandiamo vivamente di applicare temi su tavoli nuovi, è molto più semplice cambiare i dati.

tema a scelta

Se hai già dati nella tua tabella e applichi un tema, tutti i dati verranno rimossi. Se si applica un tema su una nuova tabella, i dati di esempio e lo stile verranno aggiunti e potranno essere modificati.

 

Sempre nella tabella destra della tabella, il parametro 2 frame è qui per definire il colore delle linee alternative (line1, line2, line1, line2 ...)

due fotogrammi

 

Il parametro ordinabile consente di effettuare l'ordinamento dei dati AJAX sul frontend. Nota che se abiliti lo strumento filtro, uno strumento di ordinamento dei dati sarà abilitato per impostazione predefinita.

sortable-filtro-table

 

  • Utilizza la tabella ordinabile: Si No
  • Allinea tabella: Centro / Destra / Sinistra / Nessuno
  • Tipo reattivo: Scorrimento / Nascondere Cols
  • Abilita filtri: Si No
  • Abilita paginazione: Si No
  • Numero di righe per pagina: 10, 20, ...
  • Ordina una colonna per impostazione predefinita: seleziona la colonna A, B o C, ...
  • Ordinare una colonna per impostazione predefinita: ASC / DESC

Filtro dati e ordinamento su frontend

dati filtro

L'allineamento della tabella riguarda l'allineamento del div che contiene l'intera tabella, ad esempio il centro della tabella. Le opzioni di congelamento di colonne e linee congelano la selezione e abilitano una scroll sul resto.

line-freeze

 

Rendi i miei tavoli reattivi o usa lo scroll su piccoli dispositivi?

Droptables gestisce il design reattivo con uno strumento prioritario, come opzione. Per impostazione predefinita, la funzione reattiva è disabilitata, ci sarà un overflow (tuttavia, funziona benissimo su mobile).

reattivo-mode

 

La modalità reattiva è avanzata, puoi definire una priorità per nascondere le colonne su dimensioni mobili. Quando le colonne sono nascoste, verrà visualizzato un menu mobile con la casella di controllo per forzare la visualizzazione / occultamento delle colonne.
La dimensione della colonna è fissa durante l'edizione della tabella. Se la dimensione di tutte le colonne è troppo grande per il contenitore, avrai un overflow e sarai in grado di scorrere facilmente su dispositivi mobili.

Tavolo con una pergamena (meglio per una piccola quantità di colonne)

reattivo-table-scroll

 

Tabella con colonna nascosta (meglio per una grande quantità di colonne)

reattivo-table-cololumn Nascondi

 

Come opzione è disponibile anche una cella hightlight. È possibile abilitare questa funzione in configurazione. È disabilitato per impostazione predefinita. È possibile regolare il colore e l'opacità dell'evidenziazione.

table-mettendo in evidenza

 

3.3 Amministrazione ACL e frontend

È possibile gestire le tabelle dal frontend di Joomla. Dal gestore menu Joomla, aggiungi un nuovo menu elemento e selezionare come tipo Gestisci tabelle e seleziona il frontend Droptables come modello.


menu droptables

 

 

Ecco cosa puoi vedere Droptables Manager dal frontend.

Droptables-frontend

 

Nota: per visualizzare l'interfaccia del gestore tabelle a schermo intero sul frontend, è necessario scegliere Stile modello> Frontend Droptables.

 

È possibile utilizzare l'ACL del gruppo utenti Joomla per controllare le azioni dell'edizione della tabella. Innanzitutto, per impostare chi è autorizzato a visualizzare le tabelle è necessario abilitare la funzionalità Abilita accesso alla tabella (ACL) nella configurazione Droptables.

frontend-table-edition

 

Inoltre, puoi controllare la visibilità del frontend della tabella per ogni tabella dalle impostazioni della tabella (Scheda Altro). Rispondi a un gruppo di utenti Joomla per consentire a un gruppo di visualizzare la tabella sul frontend.

user-group-acl

 

3.4 CSS personalizzati

Andiamo un passo oltre. Se sei un webdesigner con competenze di edizione CSS, sarai in grado di aggiungere css da la scheda Altro di destra.

Puoi aggiungere padding e border border sulla cella.

padding-css

 

Le celle, la linea, le colonne hanno le coordinate per identificarle e applicare css personalizzati su di esse. R è riga, C è colonna. Qui è la riga 1 (r1), la colonna 4 (c4) = dtr1 dtc4

css coordinate

 

Il codice CSS viene colorato usando il codice mirror. Il codice CSS può essere meno codice, funziona anche!

css-custom-table

 

 

IV. CARTA DA TAVOLI

4.1 Creare una tabella con i dati

È possibile generare grafici dai dati della tabella, all'interno del contenuto. Prima crea una tabella con i dati per generare un grafico.

La tabella non deve essere visualizzata con il grafico nel contenuto e puoi generare diversi grafici da una singola tabella.

 

Quindi fai la tua selezione per generare un grafico. Qui, tutta la tabella è selezionata.

chart-table

 

Quindi fare clic su aggiungi un nuovo grafico. Verrà generato un grafico, rispettando l'intervallo di dati che hai selezionato. Sulla parte destra puoi selezionare il tipo di grafico.

generate-chart

 

Il grafico verrà aggiornato dinamicamente per quanto riguarda la modifica dei dati nella tabella, non è necessario rigenerarlo.

 

4.2 Parametri del grafico

Una volta aggiunto il tuo grafico, hai alcune opzioni sulla colonna di destra.

grafico-settings

 

Il Cambia riga / colonna è disponibile solo se hai selezionato solo numeri nel set di dati. Ti sarà permesso di cambiare i dati da colonne a righe.

Il Usa la prima riga / colonna come etichette parametro ti consente di aggiungere un'etichetta al tuo grafico.

grafico-titoli

 

Quindi hai le opzioni per impostare larghezza / altezza, allineare, colore del tuo grafico.

 

V. PARAMETRI E TRUCCHI DI DROPTABLES

5.1 Parametri

Per accedere ai parametri globali Droptables, andare in Componente> Droptables> Opzioni

droptables-paramaters

 

Nelle opzioni, puoi definire:
 

  • La tabella categorie fisarmonica auto-chiusura
  • Abilita l'importazione / esportazione di Excel
  • Scegli il formato di esportazione

droptable-settings2

 

  • Abilita il suggerimento sulle cellule
  • Abilita il salvataggio automatico in AJAX, altrimenti avrai a Pulsante Salva modifiche
  • Abilita accesso alla tabella: Abilita limitazione dell'accesso alla tabella (ACL). Consente di limitare l'autorizzazione di modifica della tabella in base ai gruppi di utenti Joomla
  • Evidenziazione delle celle: Attiva un colore sul mouse della cella per vedere a prima vista il contenuto di una cella (Solo linea / Solo colonna / Entrambi)
  • Evidenziando il colore: La cella che evidenzia il colore del passaggio del mouse
  • Evidenzia il colore del carattere: La cella che evidenzia il colore del carattere hover
  • Evidenziando l'opacità: La cella che evidenzia il livello di opacità
  • Abilita pannello destro nascosto: Si No
  • Periodicità di sincronizzazione delle tabelle: Ritardo di sincronizzazione automatica della tabella per il file Excel o Fogli Google
  • Abilita tabella del database: Si No

 

5.2 Autorizzazione ACL

È disponibile l'integrazione ACL Joomla. Ora puoi limitare l'accesso all'azione o alla tabella per gli editor di tabelle. Queste restrizioni si applicano a tutte le tabelle.

Access-tavoli

 

Ad esempio, se si desidera che un utente amministratore acceda e modifichi solo le proprie tabelle, impostare "modifica" su negato e modificare il proprio su "Consentito". Puoi anche limitare:

  • La configurazione globale
  • L'accesso all'interfaccia
  • La creazione di tabelle
  • La cancellazione delle tabelle
  • Edizione / edizione personale
L'utente super amministratore avrà sempre tutte le autorizzazioni di edizione per tutte le tabelle e le categorie.

 

5.3 Carica tabelle in un modulo personalizzato HTML

Droptables è stato creato per essere utilizzato in ogni campo dell'editor WYSIWYG, è sufficiente avere il plug-in del contenuto per essere chiamato. Il più delle volte è attivato di default.

Se non è il caso, come nel modulo personalizzato HTML di Joomla, è necessario attivarlo come sopra.

tavolo-in-modulo

 

Nella scheda delle opzioni è necessario impostare l'opzione Preparare il contenuto a: Sì

 

5.4 Calcolo

Hai un'implementazione di calcolo di base in Droptables. Gli elementi disponibili sono:

  • SOMMA, CONTA, CONCAT
  • MIN, MAX, AVG
  • DATA, GIORNO, GIORNO, GIORNO360
  • OR, XOR, E

Per fare una somma, digita come in una cella (MAIUSCOLA è obbligatoria): = SUM (A1; B2) o = SUM (A1: B2)

E puoi configurare il simbolo per il calcolo delle celle su numero, denaro o data.

calcola-settings

 

  • Formati di data: Imposta il formato della data per i calcoli della data
  • Posizione del simbolo: Per rendere il calcolo delle celle sul denaro, definire la posizione predefinita del simbolo di valuta
  • Simbolo / i della valuta: Per rendere il calcolo delle celle sul denaro, definire il simbolo di valuta predefinito
  • Simbolo decimale: Per eseguire il calcolo della cella, definire il simbolo decimale predefinito
  • Conteggio decimale: Numero di cifre dopo il simbolo decimale
  • Mille simboli: Per rendere il calcolo delle celle, definire il simbolo mille predefinito

VI. EXCEL E GOOGLE SHEETS SYNC

6.1 Sincronizzazione dei file Excel

È possibile eseguire una sincronizzazione tra una tabella creata e un file Excel sul server (ovunque). Dalla scheda destra denominata "Tabella", in basso è presente un blocco per collegare un file Excel alla tabella.

sync-excel-scelta

Al clic sul Pulsante Sfoglia, sarai in grado di selezionare un Excel ovunque sul tuo server, qui è un file caricato tramite il gestore multimediale (/ cartella immagini).

File-browse-excel

 

Una volta che il file Excel è collegato alla tabella, puoi premere il tasto Scarica il pulsante dati per importare dati dal file Excel.

fetch-excel-dati

 

Nota: solo i dati verranno presi da Excel, non dagli stili, quindi lo stile globale della tabella rimarrà invariato durante l'importazione.

 

Attenzione: a seconda della memoria disponibile sul server, non sarà possibile importare file Excel di grandi dimensioni (ad esempio più di 1000 righe).

 

6.2 Sincronizzazione con Fogli Google

Droptables offre una possibilità di sincronizzazione di Fogli Google. I tuoi fogli Google devono essere " pubblicato sul web"per essere sincronizzati. In primo luogo, apri il tuo foglio da Google Drive e pubblicalo come pagina Web utilizzando il menu File.

publish-to-web

 

Quindi, avrai accesso al link del file Fogli di Google, copia questo link.

pubblicato-link

 

E incollarlo Scheda "Tabella" Droptables. Hai finito! ora puoi recuperare i dati dai tuoi Fogli Google.

google-scheda-dati

 

6.3 Sincronizzazione automatica di Excel e Fogli Google

Sopra il collegamento al file è inoltre possibile attivare una sincronizzazione automatica dei dati. Droptables recupera automaticamente i dati a intervalli regolari.

sync-periodo

Una volta attivato, viene visualizzata una notifica dopo il titolo della tabella.

sincronizzazione automatica notifica

 

Il ritardo di sincronizzazione può essere impostato nella configurazione Droptables.

 

VII. TAVOLE DAL DATABASE

 

Droptables consente di creare tabelle dalle tabelle del database. Dalle impostazioni del componente, dovresti Abilita tabella del database.

Database-config

 

Torna alla dashboard, in primo luogo, si sceglie Tabella dal database categoria e quindi fare clic Crea tabella , quindi tutte le tabelle nel database saranno elencate di seguito. Successivamente, sarai in grado di selezionare tabelle e colonne dal tuo database. Colpendo il controllo è possibile selezionare diverse tabelle, colonne.

Database-selezione


Nella selezione della colonna è possibile definire un titolo personalizzato e un ordine predefinito per i dati nella tabella, quando visualizzati sul lato pubblico.

colonna titleandordering


Poi hai alcune opzioni e filtri da applicare alle tue tabelle:

  • Un livello di impaginazione predefinito (da utilizzare con una grande quantità di dati)
  • Numero di righe per l'impaginazione
  • Applica un filtro ai tuoi dati, ad es. una colonna può essere uguale, diversa ... da un valore definito
  • La possibilità di raggruppare alcuni valori nelle colonne

Database-table-opzione


Infine, puoi visualizzare l'anteprima e generare la tua tabella come qualsiasi altra tabella. Quando viene generata la tabella, si avrà comunque accesso alla sorgente del database della tabella e si può ad esempio aggiungere una colonna nella tabella.

Database-table-generated

Nota: l'unica differenza è che i temi non possono essere applicati sui tavoli ma è possibile personalizzare tutto il display come in qualsiasi altra tabella.