1. Home
  2. jQuery EasyUI tree menu - Tree menu add parent / child nodes

jQuery EasyUI tree menu - Tree menu add parent / child nodes

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).

Parent / child node data 

	[
	{ "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"}
	]

Use 'loadFilter' Create menu tree (Tree) 

	$ ( '# Tt'). Tree ({
		url: 'data / tree6_data.json',
		loadFilter: function (rows) {
			return convert (rows);
		}
	});

Realization of Conversion 

	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;
	}

Download jQuery EasyUI examples

jeasyui-tree-tree6.zip

Hot Tutorials

Contact US