Add a pagination to TreeGrid

Tutorial » Add a pagination to TreeGrid

This tutorial shows how to add a pagination to TreeGrid with dynamic loading feature.

Create TreeGrid

To enable paging feature for TreeGrid, the 'pagination:true' property should be added, Thus the 'page' and 'rows' parameters will be sent to server when loading a page.

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

The parameters sent to server include:

page: The current page to load.
rows: The page size.
id: The id value of parent row, the rows returned from server will be appended to.

When expanding a row node, the 'id' value is greater than 0. When changing the page number, the 'id' value should be set to 0 to prevent from loading children rows.

Download the EasyUI example:

easyui-treegrid-demo.zip