1. Home
  2. jQuery EasyUI menu tree - the tree to add a page grid

The best jQuery EasyUI menu tree - the tree to add a page grid Tutorial In 2024, In this tutorial you can learn Download jQuery EasyUI examples,

jQuery EasyUI menu tree - the tree to add a page grid

This tutorial shows you how to load the dynamic characteristics of the tree with a grid (TreeGrid) added tab.

Create tree grid (TreeGrid)

Enable tree grid (TreeGrid) paging feature, you must add 'pagination: true' attribute will be sent 'page' and 'rows' argument to the server so the page loads. 

	<Table title = "Products" class = "easyui-treegrid" style = "width: 700px; height: 300px"
			data-options = "
				url: 'treegrid4_getdata.php',
				rownumbers: true,
				pagination: true,
				pageSize: 2,
				pageList: [2,10,20],
				idField: 'id',
				treeField: 'name',
				onBeforeLoad: function (row, param) {
					if (! row) {// load top level rows
						param.id = 0; // set id = 0, indicate to load new page rows
					}
				}
			">
		<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

treegrid4_getdata.php 

? $ Page = isset ($ _ POST [ 'page']) intval ($ _ POST [ 'page']): 1;
? $ Rows = isset ($ _ POST [ 'rows']) intval ($ _ POST [ 'rows']): 10;
$ Offset = ($ page-1) * $ rows;

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

include 'conn.php';

$ Result = array ();
if ($ id == 0) {
	$ Rs = mysql_query ( "select count (*) from products where parentId = 0");
	$ Row = mysql_fetch_row ($ rs);
	$ Result [ "total"] = $ row [0];
	
	$ Rs = mysql_query ( "select * from products where parentId = 0 limit $ offset, $ rows");
	$ Items = array ();
	while ($ row = mysql_fetch_array ($ rs)) {
		? $ Row [ 'state'] = has_child ($ row [ 'id']) 'closed': 'open';
		array_push ($ items, $ row);
	}
	$ Result [ "rows"] = $ items;
} Else {
	$ 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;
}

Sent to the server parameters include:

  • page: the current page to load.
  • rows: page size.
  • id: id of the parent row value returned from the server is about to be added.

When you expand a node row, 'id' value is greater than 0. When changing the topic, 'id' value should be set to 0 to place the load child rows.

Download jQuery EasyUI examples

jeasyui-tree-treegrid4.zip

Hot Tools

Other Tools

Online Tutorial

Website Navigation

jQuery EasyUI menu tree - the tree to add a page grid
10/30