Esempio di PivotTable
copia linkIntroduzione
Elemento visuale che permette di disegnare tabelle pivot interattive in vari formati, sia tabellari che grafici (esempio relativo al motore grafico RD3).
È basato sul componente web
PivotTable.
In allegato trovate anche il progetto di esempio per il motore grafico FLUID.
Si possono ottenere videate come questa:
Definizione nell'IDE
Per prima cosa, nel progetto, è stata creata una libreria client chiamata Widget Pivot Table e sono state definite le sue proprietà, liste valori, eventi e metodi:
Utilizzando un componente di Instant Developer per contenere il nostro oggetto Pivot Table lo possiamo poi esportare ed utilizzare in altri progetti.
All'interno del componente Pivot Table è presente la videata Test Pivot Table alla quale occorre fare riferimento nella propria applicazione, anche solo creandone un'istanza in una procedura, per far si che Instant Developer crei tutti i file javascript necessari al funzionamento del componente.
Classe wrapper lato client
Nella directory custom del componente Pivot Table sono stati copiati i file necessari al funzionamento del componente. Inoltre è stato creato un file javascript WidgetPivotTable.js contenente il codice della nostra classe wrapper.
Nella funzione WidgetPivotTable.Init vengono caricate le risorse necessarie al funzionamento del componente javascript:
- pivot.css
- pivot.min.css
- export_renderers.min.js
- jquery.min.js
- jquery.ui.touch-punch.min.js
- jquery-ui.min.js
- pivot.min.js
- plotly_renderers.min.js
- plotly-basic-latest-min.js
Nella directory dist troviamo i file di localizzazione in lingua che vengono caricati al momento di selezione della lingua mediante la proprietà local o dalle impostazioni del browser se non indicata.
Nella funzione Realize viene creato il div che deve contenere il componente e gli viene assegnato un id con un nome generato in automatico per poi poterlo ricercare.
Funzionamento del componente
Il componente PivotTable può essere visualizzato direttamente in un frame di una videata oppure all'interno di una label di un pannello.
Per poter attivare le eventuali scrollbar sul frame che contiene il componente è possibile, nel caso di utilizzo all'interno di una label, aggiungere una classe CSS specifica come in questo codice da mettere in custom.css dell'applicazione.
.pvtContainer .frame-content-container {
overflow: auto !important;
}
Quindi occorre impostare la classe CSS pvtContainer alla label che contiene il componete PivotTable.
Le proprietà del componente sono:
- cols
Elenco dei nomi delle colonne della sorgente dati da includere nelle colonne della tabella pivot, separati da virgola. - rows
Elenco dei nomi delle righe della sorgente dati per i quali raggruppare la tabella pivot, separati da virgola. - vals
Elenco dei nomi delle colonne della sorgente dati da sottoporre alle funzioni di aggregazione, separati da virgola. È possibile indicare uno o due colonne a seconda dell'aggregatore scelto. - renderName
Permette di selezionare il tipo di visualizzazione dei dati della tabella pivot. - aggregatorName
Permette di selezionare la funzione di aggregazione dei dati della tabella pivot. - colOrder
Specifica l'ordinamento delle colonne. - rowOrder
Specifica l'ordinamento delle righe. - showUI
Se impostata a false, viene visualizzata solo la tabella pivot, senza la parte interattiva. - unusedAttrsVertical
Se impostato a true, le colonne non utilizzate saranno sempre elencate in verticale. Se vale false, le colonne non utilizzate saranno sempre elencate in orizzontale. Lasciare vuoto per una gestione automatica. - hiddenFromAggregators
Elenco dei nomi delle colonne della sorgente dati che non devono essere elencate come input per la funzione di aggregazione. - hiddenFromDragDrop
Elenco dei nomi delle colonne della sorgente dati che non devono essere disponibili per il drag&drop come colonne o come righe della tabella pivot. - locale
Codice di localizzazione per l'interfaccia ed i formati della tabella (ad esempio it, fr, eccetera). Per default viene utilizzata la lingua del browser.
Gli eventi del componente sono:
- restoreConfig
Evento notificato ogni volta che la tabella pivot cambia configurazione. - onCellClick
Evento notificato quanto l'utente fa click nella tabella dei dati (solo visualizzatore tabellare).
I metodi del componete sono:
- restoreConfig
Permette di ripristinare una configurazione precedentemente letta tramite l'evento onConfigChange - addData
Permette di aggiungere una riga di dati da passare al componete.
Note
L'integrazione di questo componente javascript è stata testata per funzionare con il solo motore grafico RD3.
Non è supportato l'uso del componente nei temi Boostrap e BootstrapZen.
Ultima modifica: 08/02/2023 / Validità: da 22.0.8500