Visualizzazione: tabella

Se impostato su true, i valori formattati delle celle che includono tag HTML verranno visualizzati come HTML. Se impostato su false, la maggior parte dei formattatori personalizzati non funzionerà correttamente.

Consente di stabilire se assegnare uno stile di colore alternato alle righe pari e dispari.

Un oggetto in cui ogni nome di proprietà descrive un elemento della tabella e il valore della proprietà è una stringa, che definisce una classe da assegnare a quell'elemento della tabella. Utilizza questa proprietà per assegnare CSS personalizzati a elementi specifici della tabella. Per utilizzare questa proprietà, assegna un oggetto, dove il nome della proprietà specifica l'elemento tabella e il valore della proprietà è una stringa, specificando un nome classe da assegnare a tale elemento. Devi quindi definire uno stile CSS per il corso nella tua pagina. Sono supportati i seguenti nomi di proprietà:

• headerRow: assegna un nome alla classe alla riga di intestazione della tabella (elemento <tr>).
• tableRow: assegna un nome di classe alle righe senza intestazioni (elementi <tr>).
• oddTableRow: assegna un nome di classe alle righe della tabella dispari (<tr> elementi). Nota: l'opzione alternatingRowStyle deve essere impostata su true.
• selectedTableRow: assegna un nome alla classe alla riga della tabella selezionata (elemento <tr>).
• hoverTableRow: assegna un nome di classe alla riga della tabella visualizzata al passaggio del mouse (elemento <tr>).
• headerCell: assegna un nome di classe a tutte le celle nella riga di intestazione (elemento <td>).
• tableCell: assegna un nome di classe a tutte le celle della tabella non di intestazione (elemento <td>).
• rowNumberCell: assegna un nome di classe alle celle nella colonna del numero di riga (elemento <td>). Nota: l'opzione showRowNumber deve essere impostata su true.

Esempio: var cssClassNames = {headerRow: 'bigAndBoldClass',
hoverTableRow: 'highlightClass'};

Nota: in CSS, alcuni elementi sostituiscono altri. Ad esempio, se specifichi un colore di sfondo per un elemento <tr> e un elemento <td>, quest'ultimo avrà la precedenza sul primo. Assicurati di specificare tutti gli stili CSS pertinenti in cssClassNames per evitare conflitti.

Il numero della prima riga della tabella data. Utilizzato solo se showRowNumber è true.

Il numero di colonne da sinistra che verranno bloccate. che continueranno a essere visualizzate scorrendo in orizzontale. Se showRowNumber è false, l'impostazione frozenColumns su 0 risulterà uguale a se impostata su null, ma se showRowNumber è impostato su true, la colonna del numero di righe verrà bloccata.

Imposta l'altezza dell'elemento contenitore della visualizzazione. Puoi utilizzare unità HTML standard (ad esempio, "100px", "80em", "60"). Se non vengono specificate unità, si presume che il numero sia di pixel. Se non specificato, il browser regola automaticamente l'altezza per adattarla alla tabella, riducendo il più possibile durante il processo; se inferiore all'altezza richiesta, la tabella aggiunge una barra di scorrimento verticale (anche la riga di intestazione è bloccata). Se è impostata su "100%", la tabella si espanderà il più possibile nell'elemento container.

Se e come attivare l'impaginazione tra i dati. Scegli uno dei seguenti valori di stringa:

• "enable" - La tabella includerà i pulsanti per l'inoltro e il retro della pagina. Se fai clic su questi pulsanti, verrà eseguita l'operazione di paging e la modifica della pagina visualizzata. Ti consigliamo di impostare anche l'opzione pageSize.
• "event": la tabella include i pulsanti avanti e indietro nella pagina, ma facendo clic su di essi viene attivato un evento "page" e la pagina visualizzata non viene modificata. Questa opzione deve essere utilizzata quando il codice implementa la propria logica di svolta delle pagine. Consulta l'esempio di TableQueryWrapper per un esempio di come gestire manualmente gli eventi di paging.
• 'disable' - [Default] Il paging non è supportato.
Tipo: stringa
Predefinito: "disable"

Il numero di righe in ogni pagina, quando viene eseguito il paging con l'opzione della pagina.

Imposta un'opzione specificata per i pulsanti di paging. Le opzioni sono le seguenti:

• "Entrambi": abilita i pulsanti Indietro e Avanti
• "prev": è attivato solo il pulsante Indietro
• "next": è attivo solo il pulsante Avanti
• "automatica": i pulsanti sono abilitati in base alla pagina corrente. Nella prima pagina viene mostrata solo l'opzione successiva. Nell'ultima pagina vengono mostrate soltanto le pagine precedenti. In caso contrario, entrambe le opzioni sono attive.
• number: il numero di pulsanti di paging da mostrare. Questo numero esplicito sostituirà il numero calcolato da pageSize.

Aggiunge il supporto di base per le lingue da destra a sinistra (ad esempio arabo o ebraico) invertendo l'ordine delle colonne della tabella in modo che la colonna zero sia la colonna più a destra e l'ultima colonna a sinistra. Ciò non influisce sull'indice della colonna nei dati sottostanti, ma solo nell'ordine di visualizzazione. La visualizzazione completa della lingua bidirezionale (BiDi) non è supportata dalla visualizzazione della tabella, anche con questa opzione. Questa opzione verrà ignorata se abiliti il paging (utilizzando l'opzione pagina) o se la tabella ha barre di scorrimento perché hai specificato opzioni di altezza e larghezza inferiori alle dimensioni richieste della tabella.

Imposta la posizione di scorrimento orizzontale, in pixel, se la tabella ha barre di scorrimento orizzontali perché hai impostato la proprietà della larghezza. La tabella si aprirà facendo scorrere molti pixel oltre la colonna più a sinistra.

Se impostato su true, mostra il numero di riga come prima colonna della tabella.

Se e come ordinare le colonne quando l'utente fa clic sull'intestazione di una colonna. Se l'ordinamento è abilitato, valuta anche l'impostazione delle proprietà sortAscending e sortColumn. Scegli uno dei seguenti valori di stringa:

• 'enable' - [Predefinito] Gli utenti possono fare clic sulle intestazioni di colonna per ordinare le colonne in base alla colonna selezionata. Se gli utenti fanno clic sull'intestazione della colonna, le righe vengono ordinate automaticamente e viene attivato un evento "ordina".
• "event": quando gli utenti fanno clic sull'intestazione della colonna, viene attivato un evento "ordina", ma le righe non vengono ordinate automaticamente. Questa opzione deve essere utilizzata quando la pagina implementa il proprio ordinamento. Consulta l'esempio di TableQueryWrapper per un esempio di come gestire l'ordinamento manuale degli eventi.
• "disable": fare clic sull'intestazione di una colonna non ha alcun effetto.

L'ordine in cui vengono ordinate le colonne di ordinamento iniziale. Vero per crescente, falso per decrescente. Ignorato se sortColumn non è specificato.

L'indice di una colonna della tabella dati, secondo la quale la tabella viene ordinata inizialmente. La colonna verrà contrassegnata con una piccola freccia che indica l'ordinamento.

La prima pagina della tabella da visualizzare. Utilizzato solo se page è in modalità attivazione/evento.

Imposta la larghezza dell'elemento contenitore della visualizzazione. Puoi utilizzare unità HTML standard (ad esempio, "100px", "80em", "60"). Se non vengono specificate unità, si presume che il numero sia di pixel. Se non specificato, il browser regola automaticamente la larghezza per adattarla alla tabella, riducendo il più possibile la procedura; se è inferiore a quella richiesta, la tabella aggiunge una barra di scorrimento orizzontale. Se impostata su "100%", la tabella si espanderà il più possibile nell'elemento container.

Disegna la tabella.

Implementazione standard di getSelection. Gli elementi di selezione sono tutti elementi di riga. Può restituire più di una riga selezionata. Gli indici di riga nell'oggetto di selezione fanno riferimento alla tabella dati originale indipendentemente da qualsiasi interazione dell'utente (ordine, paging e così via).

Tieni presente che le selezioni vengono attivate: se fai clic su una cella la prima volta, la selezioni; se la fai di nuovo, la cella viene deselezionata, generando un evento di selezione, ma nessun elemento selezionato nell'oggetto di selezione recuperato.

Richiama questo metodo per recuperare le informazioni sull'attuale stato di ordinamento di una tabella ordinata (in genere dall'utente, che ha fatto clic sull'intestazione di una colonna per ordinare le righe in base a una colonna specifica). Se hai disattivato l'ordinamento, questo metodo non funzionerà.

Se non hai ordinato i dati nel codice o l'utente non li ha ordinati selezionando il codice, verranno restituiti i valori di ordinamento predefiniti.

• column: (numero) indice della colonna in base al quale viene ordinata la tabella.
• ascending: (booleano) true se l'ordinamento è crescente, false se decrescente.
• sortedIndexes: (array numerico) array di numeri, dove l'indice nell'array è il numero di riga ordinato (nella tabella visibile) e il valore è l'indice di quella riga nella tabella dati sottostante (non ordinata).

Implementazione standard di setSelection(), ma può selezionare solo intere righe o più righe. Gli indici di riga nell'oggetto di selezione fanno riferimento alla tabella dati originale indipendentemente da qualsiasi interazione dell'utente (ordine, paging e così via).

Cancella il grafico e rilascia tutte le risorse allocate.

Evento di selezione standard, ma è possibile selezionare solo intere righe.

Si attiva quando un utente fa clic su un pulsante di navigazione nelle pagine.

Si attiva quando un utente fa clic sull'intestazione di una colonna e l'opzione di ordinamento non viene disattivata.

• column: (numero) indice della colonna in base al quale viene ordinata la tabella.
• ascending: (booleano) true se l'ordinamento è crescente, false se decrescente.
• sortedIndexes: (array numerico) array di numeri, in cui l'indice nell'array è il numero di riga ordinato (nella tabella visibile) e il valore è l'indice di quella riga nella tabella dati sottostante (non ordinata).

Il grafico è pronto per le chiamate ai metodi esterni. Se vuoi interagire con il grafico e chiamare i metodi dopo averlo disegnato, devi configurare un listener per questo evento prima di chiamare il metodo di disegno e chiamarlo solo dopo che è stato attivato l'evento.