The best jQuery EasyUI tree menu - Tree menu add parent / child nodes Tutorial In 2024, In this tutorial you can learn Download jQuery EasyUI examples,
Usually it represents a tree node is in every way a node stores a parentid. This is also called adjacency list model. Direct load the data into the menu tree (Tree) is not allowed. But we can before loading menu tree, put it into a standard standard menu tree (Tree) data format. Tree (Tree) plug-in provides a 'loadFilter' option to function, it can achieve this functionality. It provides an opportunity to change any of the incoming data. This tutorial shows you how to use 'loadFilter' parent function to load / child node to the tree menu (Tree).
[ { "Id": 1, "parendId": 0, "name": "Foods"}, { "Id": 2, "parentId": 1, "name": "Fruits"}, { "Id": 3, "parentId": 1, "name": "Vegetables"}, { "Id": 4, "parentId": 2, "name": "apple"}, { "Id": 5, "parentId": 2, "name": "orange"}, { "Id": 6, "parentId": 3, "name": "tomato"}, { "Id": 7, "parentId": 3, "name": "carrot"}, { "Id": 8, "parentId": 3, "name": "cabbage"}, { "Id": 9, "parentId": 3, "name": "potato"}, { "Id": 10, "parentId": 3, "name": "lettuce"} ]
$ ( '# Tt'). Tree ({ url: 'data / tree6_data.json', loadFilter: function (rows) { return convert (rows); } });
function convert (rows) { function exists (rows, parentId) { for (var i = 0; i <rows.length; i ++) { if (rows [i] .id == parentId) return true; } return false; } var nodes = []; // Get the top level nodes for (var i = 0; i <rows.length; i ++) { var row = rows [i]; if (! exists (rows, row.parentId)) { nodes.push ({ id: row.id, text: row.name }); } } var toDo = []; for (var i = 0; i <nodes.length; i ++) { toDo.push (nodes [i]); } while (toDo.length) { var node = toDo.shift (); // the parent node // Get the children nodes for (var i = 0; i <rows.length; i ++) { var row = rows [i]; if (row.parentId == node.id) { var child = {id: row.id, text: row.name}; if (node.children) { node.children.push (child); } Else { node.children = [child]; } toDo.push (child); } } } return nodes; }