jQuery EasyUI menu drzewa - drzewo lazy loading węzły siatki
Czasami byliśmy pełni hierarchiczne drzewo siatka (TreeGrid) danych. Chcemy również siatkę drzewa (TreeGrid) hierarchiczny węzła załadunku leniwy. Po pierwsze, należy załadować tylko górny węzeł. Kliknij na ikonę, a następnie rozwiń węzeł, aby załadować swoje węzły potomne. Ten poradnik pokazuje, jak stworzyć drzewo z siatki Charakterystyka obojętne obciążenia (TreeGrid).
Tworzenie drzewa siatkę (TreeGrid)
<Table id = "test" title = "Przeglądarka Folder" class = "easyui-TreeGrid" style = "width: 700px; height: 300px" data-options = " url: "dane / treegrid_data.json" Metoda: 'get', rownumbers: prawda, idField: 'id', treeField: "nazwa", loadFilter: myLoadFilter "> <THEAD> <Tr> <Th pole = "name" width = "220"> Nazwa </ th> <Pole Th = "size" width = "100" align = "right"> Rozmiar </ th> <Th pole = "date" width = "150"> Data modyfikacji </ th> </ Tr> </ THEAD> </ Table>
Aby umieścić węzły potomne obciążenia, każdy węzeł, musimy zmienić nazwę właściwość "dzieci". Jak pokazano w poniższym kodzie, zmiana nazwy Nieruchomość 'dzieci' 'dzieci1 ". Po rozwinięciu węzła nazywamy "append" metody, aby załadować swoje dane węzły potomne.
Kod "LoadFilter '
Funkcja myLoadFilter (dane, parentId) { Funkcja SetData () { var todo = []; for (var i = 0; i <data.length; i ++) { todo.push (dane [i]); } while (todo.length) { var node = todo.shift (); if () {node.children node.state = "zamknięty"; node.children1 = node.children; node.children = nieokreślone; todo = todo.concat (node.children1); } } } SetData (dane); var tg = $ (this); var zdecyduje = tg.treegrid ( "Opcje"); opts.onBeforeExpand = function (row) { if (row.children1) { tg.treegrid ( "dołączyć", { parent: row [opts.idField] Dane: row.children1 }); row.children1 = nieokreślone; tg.treegrid ( "rozszerzenie", wiersz [opts.idField]); } Zwrot row.children1 == nieokreślone; }; zwrócić dane; }