Oggetto treeview è il classico controllo per la visualizzazione ad albero, molto utilizzato per la rappresentazione di filesystem ed in generale strutture gerarchiche.
In base al valore assegnato all'attributo refresh l'oggetto tree ha tre modalità di funzionamento:
- tree: al primo caricamento istanzia tutti i nodi
- branche: carica i nodi parzialmente per ramo alla sua prima espanzione
- always: carica i nodi parzialmente per ramo, ogni qualvolta il ramo viene riaperto i nodi vengono rigenerati
<idtag typeobj="tree" dsobj="nomeds" refresh="tiporefresh" ............. />
Per un corretto funzionamento dell'oggetto tree è necessario che le impostazione degli attributi dell'oggetto tree siano attinenti al datasource connesso, per spiegare questo concetto facciamo qualche esempio pratico:
// ESEMPIO VOLUTAMENTE ERRATO
<ds1 typeobj="ds" conn="conn4" scope="tree" dskey="key" base="/jamp/data" />
<tree1 typeobj="tree" dsobj="nomeds" refresh="brance" ............. />';
Tale impostazione è certamente errata in quanto abbiamo impostato l'attributo scope="tree" nel datasource ossia abbiamo chiesto la restituzione di tutti i valori e quindi di conseguenza questo farà popolare l'intero tree in fase di primo caricamento, l'errore sta nel fatto di aver poi assegnato refresh="brance" nell'oggetto tree, questo è un errore perchè non appena cerchermo di espandere il ramo ad i nodi già presenti si verranno ad aggiungere quelli della richiesta che automaticamente l'oggetto effettuerà con il risultato di duplicare tutti i nodi.
Menù Contestuale
E' possibile associare all'oggetto il menù contestuale. La voce del menù viene visualizzata se il valore del campo nodetype del datasource associato soddisfa l'espressione regolare contenuta nel campo menufilter.
- oncontextmenu: Abilità il menu contestuale true/false
- menuname: voce del menù
- menufunction: nome della funzione javascript associata
- menufilter: espressione regolare per la visualizzazione del menu
Sintassi XML:
<treeXML typeobj="tree" dsobj="ds" width="autosize" height="autosize" oncontextmenu="true">
<contextmenu>
<menu menuname="Value1" menufunction="function1" menufilter="^file$"/>
<menu menuname="Value2" menufunction="function2" menufilter="^[a-zA-Z]{0}$"/>
<menu menuname="Value3" menufunction="function3" menufilter="^[a-zA-Z]{0}$"/>
<menu menuname="Value4" menufunction="function4" menufilter="^gridds$"/>
</contextmenu>
</treeXML>
Sintassi JS:
function function1(node)
{
AJAX.request("POST", "page.php", "data=custom_function&key="+node.key, false, true);
}
function function2(node)
{
if (name = prompt("Nome Directory:")) AJAX.request("POST", "page.php", "data=makedir&key="+node.key+"&name="+name, false, true);
}
function function3(node)
{
AJAX.request("POST", "page.php", "data=custom_function&key="+node.key, false, true);
}
function function4(node)
{
AJAX.request("POST", "page.php", "data=custom_function&key="+node.key, false, true);
}
›› REFERENCE XML - TREE
Oggetto: TREE
<nome typeobj="tree" attribute="valore".../>
Attributi:
debug
Attiva il debug dell'oggetto.
Valori consentiti: true,false
Valori di default: false
onclick
Codice associato all'evento onclick.
ondblclick
Codice associato all'evento ondblclick.
onmousedown
Codice associato all'evento onmousedown.
onmouseup
Codice associato all'evento onmouseup.
onmouseover
Codice associato all'evento onmouseover.
onmousemove
Codice associato all'evento onmousemove.
onmouseout
Codice associato all'evento onmouseout.
onkeypress
Codice associato all'evento onkeypress.
onkeydown
Codice associato all'evento onkeydown.
onkeyup
Codice associato all'evento onkeyup.
class
Nome della classe di stile utilizzata dall'oggetto.
style
Proprietà di stile.
lang
Specifica il codice della lingua utilizzata.
dir
Direzione del testo:
- LTR da sinistra a destra(default).
- RTL da destra a sinistra.
template
Nome del template utilizzato dall'oggetto, se non specificato viene utilizzato quello di sistema.
title
Informazioni aggiuntive visualizzate al passaggio del mouse sull'oggetto istanziato.
width
Larghezza dell'oggetto (con unità di misura es: 600px).
height
Altezza dell'oggetto (con unità di misura es: 600px).
target
Destinazione degli URL da aprire.
name
Nome dell'oggetto.
id
Nome univoco dell'oggetto.
Valori di default: tree
value
Vedi TAG VALUE
Valore dell'oggetto.
onchange
Codice associato all'evento onchange.
refresh
Modalità di caricamento dell'albero.
Valori consentiti: tree,branche,always
dragable
Attiva il drag end drop.
Valori consentiti: true,false
checkbox
Attiva la selezione.
- dualstate: visualizza le checkbox con selezione singola.
- tristate: visualizza le checkbox con selezione dei figli.
Valori consentiti: dualstate,tristate,none
oncontextmenu
Visualizza il menù contestuale.
Valori consentiti: true,false
menuname
Voce del menù contestuale
menufunction
Funzione richiamata dal menu contestuale
menufilter
Espressione regolare usata per testare il valore del nodetype selezionato. Consente di visualizzare la voce del munù in base al nodo.
dslink
Nome campo ds contenente il link del nodo da richiamare al al click del testo del nodo.
dsorder
Rappresenta il nome campo contenente l'ordine dei nodi all'interno del ramo
dsicon
Nome del campo contenente lo style dell'icona da associare al nodo.
dsnochild
Nome del campo contenente l'informazione per stabilire se un nodo può avere figli o meno.
dsdragable
Nome del campo contenente l'informazione del singolo nodo per poter essere spostato o meno.
dscheckstate
Nome del campo contenente l'informazione nel quale memorizzare lo stato della checkbox.
java
Nome del/dei file javascript usati dall'oggetto.
Valori di default: tree.js
cssfile
Nome del file css usato dall'oggetto.
dsobj
ID dell'oggetto datasource associato.
dsitem
Nome del campo datasource associato.
›› Elenco dei metodi Javascript intercettabili dall'utente:
Sintassi JS: SYSTEMEVENT.addBeforeCustomFunction("TREE","drawExpand", "User function"); Function parameters: function(parent)
Sintassi JS: SYSTEMEVENT.addBeforeCustomFunction("TREE","drawCheckBox", "User function"); Function parameters: function(divTree,parent)
Sintassi JS: SYSTEMEVENT.addBeforeCustomFunction("TREE","drawIcon", "User function"); Function parameters: function(divTree,parent)
Sintassi JS: SYSTEMEVENT.addBeforeCustomFunction("TREE","drawText", "User function"); Function parameters: function(parent,name)
Sintassi JS: SYSTEMEVENT.addBeforeCustomFunction("TREE","addContainerChild", "User function"); Function parameters: function(parent)
Sintassi JS: SYSTEMEVENT.addBeforeCustomFunction("TREE","addNode", "User function"); Function parameters: function(divTree,data,parent)
Sintassi JS: SYSTEMEVENT.addBeforeCustomFunction("TREE","drawChildNode", "User function"); Function parameters: function(divTree,data)
Sintassi JS: SYSTEMEVENT.addBeforeCustomFunction("TREE","level", "User function"); Function parameters: function(node)
Sintassi JS: SYSTEMEVENT.addBeforeCustomFunction("TREE","foundTree", "User function"); Function parameters: function(node)
Sintassi JS: SYSTEMEVENT.addBeforeCustomFunction("TREE","onTextClick", "User function"); Function parameters: function(e)
Sintassi JS: SYSTEMEVENT.addBeforeCustomFunction("TREE","addMenuText", "User function"); Function parameters: function(text,action,node)
Sintassi JS: SYSTEMEVENT.addBeforeCustomFunction("TREE","onContextMenu", "User function"); Function parameters: function(e)
Sintassi JS: SYSTEMEVENT.addBeforeCustomFunction("TREE","onAddNodeClick", "User function"); Function parameters: function(e)
Sintassi JS: SYSTEMEVENT.addBeforeCustomFunction("TREE","onDelNodeClick", "User function"); Function parameters: function(e)
Sintassi JS: SYSTEMEVENT.addBeforeCustomFunction("TREE","loadChildNode", "User function"); Function parameters: function(divTree,node)
Sintassi JS: SYSTEMEVENT.addBeforeCustomFunction("TREE","ExpandClick", "User function"); Function parameters: function(divTree,node)
Sintassi JS: SYSTEMEVENT.addBeforeCustomFunction("TREE","onExpandClick", "User function"); Function parameters: function(e)
Sintassi JS: SYSTEMEVENT.addBeforeCustomFunction("TREE","savePost", "User function"); Function parameters: function(divTree)
Sintassi JS: SYSTEMEVENT.addBeforeCustomFunction("TREE","appendPost", "User function"); Function parameters: function(divTree,post)
Sintassi JS: SYSTEMEVENT.addBeforeCustomFunction("TREE","changeCheck", "User function"); Function parameters: function(divTree,node,state)
Sintassi JS: SYSTEMEVENT.addBeforeCustomFunction("TREE","checkParentState", "User function"); Function parameters: function(divTree,node)
Sintassi JS: SYSTEMEVENT.addBeforeCustomFunction("TREE","onCheckClick", "User function"); Function parameters: function(e)
Sintassi JS: SYSTEMEVENT.addBeforeCustomFunction("TREE","actionMove", "User function"); Function parameters: function(divTree,nodeS,nodeD)
Sintassi JS: SYSTEMEVENT.addBeforeCustomFunction("TREE","onStartDragNode", "User function"); Function parameters: function(e)
Sintassi JS: SYSTEMEVENT.addBeforeCustomFunction("TREE","onRelaseContainer", "User function"); Function parameters: function(e)
Sintassi JS: SYSTEMEVENT.addBeforeCustomFunction("TREE","onDropNode", "User function"); Function parameters: function(e)
Sintassi JS: SYSTEMEVENT.addBeforeCustomFunction("TREE","onMoveNode", "User function"); Function parameters: function(e)
Sintassi JS: SYSTEMEVENT.addBeforeCustomFunction("TREE","getDsValue", "User function"); Function parameters: function(id)
Sintassi JS: SYSTEMEVENT.addBeforeCustomFunction("TREE","refreshObj", "User function"); Function parameters: function(id)
Sintassi JS: SYSTEMEVENT.addAfterCustomFunction("TREE","drawExpand", "User function"); Function parameters: function(parent)
Sintassi JS: SYSTEMEVENT.addAfterCustomFunction("TREE","drawCheckBox", "User function"); Function parameters: function(divTree,parent)
Sintassi JS: SYSTEMEVENT.addAfterCustomFunction("TREE","drawIcon", "User function"); Function parameters: function(divTree,parent)
Sintassi JS: SYSTEMEVENT.addAfterCustomFunction("TREE","drawText", "User function"); Function parameters: function(parent,name)
Sintassi JS: SYSTEMEVENT.addAfterCustomFunction("TREE","addContainerChild", "User function"); Function parameters: function(parent)
Sintassi JS: SYSTEMEVENT.addAfterCustomFunction("TREE","addNode", "User function"); Function parameters: function(divTree,data,parent)
Sintassi JS: SYSTEMEVENT.addAfterCustomFunction("TREE","drawChildNode", "User function"); Function parameters: function(divTree,data)
Sintassi JS: SYSTEMEVENT.addAfterCustomFunction("TREE","level", "User function"); Function parameters: function(node)
Sintassi JS: SYSTEMEVENT.addAfterCustomFunction("TREE","foundTree", "User function"); Function parameters: function(node)
Sintassi JS: SYSTEMEVENT.addAfterCustomFunction("TREE","onTextClick", "User function"); Function parameters: function(e)
Sintassi JS: SYSTEMEVENT.addAfterCustomFunction("TREE","addMenuText", "User function"); Function parameters: function(text,action,node)
Sintassi JS: SYSTEMEVENT.addAfterCustomFunction("TREE","onContextMenu", "User function"); Function parameters: function(e)
Sintassi JS: SYSTEMEVENT.addAfterCustomFunction("TREE","onAddNodeClick", "User function"); Function parameters: function(e)
Sintassi JS: SYSTEMEVENT.addAfterCustomFunction("TREE","onDelNodeClick", "User function"); Function parameters: function(e)
Sintassi JS: SYSTEMEVENT.addAfterCustomFunction("TREE","loadChildNode", "User function"); Function parameters: function(divTree,node)
Sintassi JS: SYSTEMEVENT.addAfterCustomFunction("TREE","ExpandClick", "User function"); Function parameters: function(divTree,node)
Sintassi JS: SYSTEMEVENT.addAfterCustomFunction("TREE","onExpandClick", "User function"); Function parameters: function(e)
Sintassi JS: SYSTEMEVENT.addAfterCustomFunction("TREE","savePost", "User function"); Function parameters: function(divTree)
Sintassi JS: SYSTEMEVENT.addAfterCustomFunction("TREE","appendPost", "User function"); Function parameters: function(divTree,post)
Sintassi JS: SYSTEMEVENT.addAfterCustomFunction("TREE","changeCheck", "User function"); Function parameters: function(divTree,node,state)
Sintassi JS: SYSTEMEVENT.addAfterCustomFunction("TREE","checkParentState", "User function"); Function parameters: function(divTree,node)
Sintassi JS: SYSTEMEVENT.addAfterCustomFunction("TREE","onCheckClick", "User function"); Function parameters: function(e)
Sintassi JS: SYSTEMEVENT.addAfterCustomFunction("TREE","actionMove", "User function"); Function parameters: function(divTree,nodeS,nodeD)
Sintassi JS: SYSTEMEVENT.addAfterCustomFunction("TREE","onStartDragNode", "User function"); Function parameters: function(e)
Sintassi JS: SYSTEMEVENT.addAfterCustomFunction("TREE","onRelaseContainer", "User function"); Function parameters: function(e)
Sintassi JS: SYSTEMEVENT.addAfterCustomFunction("TREE","onDropNode", "User function"); Function parameters: function(e)
Sintassi JS: SYSTEMEVENT.addAfterCustomFunction("TREE","onMoveNode", "User function"); Function parameters: function(e)
Sintassi JS: SYSTEMEVENT.addAfterCustomFunction("TREE","getDsValue", "User function"); Function parameters: function(id)
Sintassi JS: SYSTEMEVENT.addAfterCustomFunction("TREE","refreshObj", "User function"); Function parameters: function(id)
›› Note fornite dagli utenti
Menù Contestuale
Scritto da: ruben
Dalla RC3 è possibile utilizzare i menù contestuali in questo modo:
<treeXML typeobj="tree" dsobj="dspage" refresh="tree" width="autosize" height="autosize" dragable="true" oncontextmenu="true">
<contextmenu>
<menu menuname="Elimina" menufunction="Delete_Object" menufilter="^[a-zA-Z]{0}$"/>
<menu menuname="Sposta Sopra" menufunction="Move_Object_Up" menufilter="^[a-zA-Z]{0}$"/>
<menu menuname="Sposta Sotto" menufunction="Move_Object_Down" menufilter="^[a-zA-Z]{0}$"/>
<menu menuname="Inserisci Intestazione" menufunction="Insert_Head_Gridds" menufilter="^gridds$"/>
</contextmenu>
</treeXML>