1. Home
  2. jQuery EasyUI tree menu - dynamically loaded tree grid

The best jQuery EasyUI tree menu - dynamically loaded tree grid Tutorial In 2024, In this tutorial you can learn Download jQuery EasyUI examples,

jQuery EasyUI tree menu - dynamically loaded tree grid

Dynamically loaded tree grid lines help to load data from the server portion, avoid loading large data long wait. This tutorial will show you how to create a tree with dynamic load characteristic grid (TreeGrid).

Create tree grid (TreeGrid) 

	<Table title = "Products" class = "easyui-treegrid" style = "width: 700px; height: 300px"
			url = "treegrid3_getdata.php"
			rownumbers = "true"
			idField = "id" treeField = "name">
		<Thead>
			<Tr>
				<Th field = "name" width = "250"> Name </ th>
				<Th field = "quantity" width = "100" align = "right"> Quantity </ th>
				<Th field = "price" width = "150" align = "right" formatter = "formatDollar"> Price </ th>
				<Th field = "total" width = "150" align = "right" formatter = "formatDollar"> Total </ th>
			</ Tr>
		</ Thead>
	</ Table>

Server-side code

treegrid3_getdata.php 

$ Id = isset ($ _ POST [ 'id']) intval ($ _ POST [ 'id']): 0;?

include 'conn.php';
$ Result = array ();
$ Rs = mysql_query ( "select * from products where parentId = $ id");
while ($ row = mysql_fetch_array ($ rs)) {
	? $ Row [ 'state'] = has_child ($ row [ 'id']) 'closed': 'open';
	$ Row [ 'total'] = $ row [ 'price'] * $ row [ 'quantity'];
	array_push ($ result, $ row);
}

echo json_encode ($ result);

function has_child ($ id) {
	$ Rs = mysql_query ( "select count (*) from products where parentId = $ id");
	$ Row = mysql_fetch_array ($ rs);
	return $ row [0]> 0 true:? false;
}

Download jQuery EasyUI examples

jeasyui-tree-treegrid3.zip

Hot Tools

Other Tools

Online Tutorial

Website Navigation

jQuery EasyUI tree menu - dynamically loaded tree grid
10/30