menu ad albero jQuery EasyUI - albero pigro carico nodi della griglia
A volte siamo stati completamente gerarchica griglia di albero di dati (TreeGrid). Vogliamo anche che la griglia di albero (TreeGrid) gerarchica nodo lazy loading. In primo luogo, caricare solo il nodo superiore. Fare clic sull'icona e quindi espandere il nodo di caricare i suoi nodi figlio. Questo tutorial vi mostra come creare un albero con una griglia di carico inerte Caratteristiche (TreeGrid).
Crea griglia di albero (TreeGrid)
<Table id = titolo "test" = "Cartella Browser" class = stile "easyui-treegrid" = "width: 700px; height: 300px" data-options = " URL: 'dati / treegrid_data.json', Metodo: 'ottenere', rownumbers: true, idField: 'id', treeField: 'nome', loadFilter: myLoadFilter "> <Thead> <Tr> <Th campo = "Nome" width = "220"> Nome </ th> <Field Th = "size" width = "100" align = "right"> Size </ th> <Th campo = "data" width = "150"> Data di modifica </ th> </ Tr> </ Thead> </ Table>
Per posizionare i nodi figlio del carico, ogni nodo che dobbiamo rinominare la proprietà 'figli'. Come mostrato nel seguente codice, proprietà Rinomina 'figli' 'bambini1'. Quando si espande un nodo, chiamiamo il metodo 'append' per caricare i suoi dati di nodi figlio.
Codice 'loadFilter'
Funzione myLoadFilter (dati, ParentID) { Funzione setData () { var todo = []; for (var i = 0; i <data.length; i ++) { todo.push (data [i]); } while (todo.length) { var = node todo.shift (); if (node.children) { node.state = 'chiuso'; node.children1 = node.children; node.children = undefined; todo = todo.concat (node.children1); } } } setData (dati); var tg = $ (this); var = opta tg.treegrid ( "Opzioni"); opts.onBeforeExpand = function (riga) { if (row.children1) { tg.treegrid ( 'append', { parent: row [opts.idField], Dati: row.children1 }); row.children1 = undefined; tg.treegrid ( 'espandere', riga [opts.idField]); } ritorno row.children1 == undefined; }; restituire i dati; }