Droptables : Tavolo da lavoro

1. Scheda Formato

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

 

forma di tabella

 

  • Tipo di cella: impostazione predefinita o HTML (con editor). Il tipo predefinito consente di effettuare il calcolo con esso HTML inserendo contenuti HTML come immagini.
  • Lo sfondo della cella si tratta ovviamente di definire il colore di sfondo
  • Opzioni di bordo e carattere può essere applicato su celle singole o multiple
  • La larghezza / altezza di riga e colonna può essere definito in pixel. Seleziona la colonna o la riga in qualsiasi punto della tabella e convalida le dimensioni.

 

riga-colonna-size

 

È inoltre disponibile una descrizione comandi al passaggio del mouse del cellulare (deve essere attivata dalle opzioni dei componenti). Facendo clic sul pulsante della descrizione comandi è possibile modificare il contenuto visibile sul passaggio del mouse della cella sul frontend.

 

table-cell-tooltip

 

2 Temi e opzioni di ordinamento

Sul tavolo scheda, sempre sulla parte destra, hai un selettore di temi in miniatura. Basta fare clic su un tema per applicarlo. Consigliamo vivamente di applicare temi su nuove tabelle, è davvero più facile modificare i dati.

 

theme-selezione

 

Se nella tabella sono già presenti dati e si applica un tema, tutti i dati verranno rimossi. Se si applica un tema su una nuova tabella, verranno aggiunti dati e stile di esempio che possono essere modificati.

 

Sempre nella scheda della colonna di destra della tabella, il parametro 2 frame è qui per definire il colore delle linee alternative (linea1, linea2, linea1, linea2 ...)

 

due fotogrammi

 

Il parametro ordinabile consente di effettuare l'ordinamento dei dati AJAX sul frontend. Se si abilita lo strumento filtro, per impostazione predefinita verrà abilitato uno strumento di ordinamento dei dati.  

 

sortable-filtro-table

 

  • Usa tabella ordinabile: Si No
  • Allinea tabella: Centro / Destra / Sinistra / Nessuno
  • Tipo di risposta: Scorrimento / Nascondere i Col
  • Abilita filtri: Si No
  • Abilita impaginazione: Si No
  • Numero di righe per pagina: 10, 20, ...
  • Ordina un cloumn per impostazione predefinita: seleziona cloumn A, B o C, ...
  • Ordina 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 centrare tutta la tabella. Le opzioni di congelamento di colonne e linee bloccano la selezione e abilitano uno scorrimento sul resto.

 

line-freeze

 

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

Droptables gestisce il design reattivo con uno strumento prioritario, come opzione. Per impostazione predefinita, la funzione di risposta è disabilitata, ci sarà un overflow (la strega funziona benissimo sui dispositivi mobili).

 

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 casella di controllo per forzare la visualizzazione / nascondere delle colonne.  
La dimensione della colonna è stata corretta durante l'edizione della tabella. Se la dimensione di tutte le colonne è troppo grande per il contenitore, avrai un overflow e potrai scorrere facilmente sui dispositivi mobili.

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

 

reattivo-table-scroll

 

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

 

reattivo-table-cololumn Nascondi

 

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

 

table-mettendo in evidenza

 

3 Gestione ACL e Frontend

È possibile gestire i tuoi tavoli dal frontend di Joomla . Dal gestore del menu Joomla ,  aggiungi un nuovo menu elemento e selezionare come tipo Gestisci tabelle e seleziona 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> Droptables .

 

Puoi utilizzare l'ACL del gruppo di utenti Joomla per controllare le azioni di edizione della tabella. Innanzitutto, per impostare chi è autorizzato a visualizzare le tabelle è necessario abilitare la funzione 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 (Altre schede). Scegli un gruppo di utenti Joomla per consentire a un gruppo di visualizzare la tabella sul frontend.

 

user-group-acl

 

4 CSS personalizzato

Facciamo un passo avanti. Se sei un webdesigner con abilità nell'edizione CSS, sarai in grado di aggiungere CSS da  la scheda Altro.

Puoi aggiungere riempimento e raggio del bordo sulla cella.

 

padding-css

 

Le celle, la linea, le colonne hanno coordinate per identificare ognuna e applicare CSS personalizzati su di essa. R è la riga, C è la colonna. Ecco la riga 1 (r1), colonna 4 (c4) = dtr1 dtc4

 

css coordinate

 

Il codice CSS viene colorato utilizzando il mirroring del codice. Il codice CSS può essere meno codice, funziona anche!

 

css-custom-table