menu da árvore jQuery EasyUI - árvore de nós da rede de carregamento lento
Às vezes temos sido grade de árvore totalmente hierárquica de dados (TreeGrid). Queremos também que a grade da árvore (TreeGrid) hierárquica nó de carregamento lento. Primeiro, carregue apenas o nó superior. Clique no ícone e, em seguida, expanda o nó para carregar seus nós filho. Este tutorial mostra como criar uma árvore com uma grade de carga inerte Características (TreeGrid).
Criar grade de árvore (TreeGrid)
<Table id = "teste" title = "Browser Folder" class = "easyui-TreeGrid" style = "width: 700px; height: 300px" -opções de dados = " url: 'data / treegrid_data.json', método: 'get', rownumbers: verdadeiro, IDField: 'id', treeField: 'nome', loadFilter: myLoadFilter "> <Thead> <Tr> <Th field = "nome" width = "220"> Nome </ th> <Field Th = "tamanho" width = "100" align = "right"> Tamanho </ th> <Th campo = largura "date" = "150"> Data de modificação </ th> </ Tr> </ Thead> </ Table>
Para colocar os nós de carga criança, cada nó é preciso mudar o nome da propriedade 'crianças'. Como mostrado no código a seguir, 'crianças' propriedade Rename 'infantis1'. Quando você expandir um nó, nós chamamos o método 'append' para carregar seus dados de nós filhos.
Code 'LoadFilter'
função myLoadFilter (dados, ParentId) { setData function () { var TODO = []; for (var i = 0; i <data.length; i ++) { todo.push (dados [i]); } while (todo.length) { var nó = todo.shift (); if (node.children) { node.state = "fechado"; node.children1 = node.children; node.children = indefinido; TODO = todo.concat (node.children1); } } } setData (de dados); var tg = $ (this); var opta = tg.treegrid ( "opções"); opts.onBeforeExpand = function (linha) { Se (row.children1) { tg.treegrid ( 'anexar', { parent: row [opts.idField], Dados: row.children1 }); row.children1 = indefinido; tg.treegrid ( 'expandir', linha [opts.idField]); } row.children1 retorno == indefinido; }; retornar dados; }