Grid pokok jEasyUI menambah penomboran

Tutorial ini menunjukkan cara menambah penomboran pada TreeGrid dengan ciri pemuatan dinamik.

Buat grid pokok (TreeGrid)

Untuk mendayakan ciri penomboran grid pokok (TreeGrid), anda mesti menambah atribut 'penomboran:true' supaya halaman akan Hantar parameter 'halaman' dan 'baris' ke pelayan.

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

Kod sisi pelayan

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

Parameter yang dihantar ke pelayan termasuk:

• halaman: ke dimuatkan Halaman semasa.

• baris: saiz halaman.

• id: Nilai id baris induk yang baris dikembalikan daripada pelayan akan ditambahkan.

Apabila mengembangkan nod baris, nilai 'id' lebih besar daripada 0. Apabila menukar nombor halaman, nilai 'id' hendaklah ditetapkan kepada 0 untuk meletakkan subrow pemuatan.

Muat turun contoh jQuery EasyUI

jeasyui-tree-treegrid4.zip