isihan set jEasyUI

Contoh ini menunjukkan cara mengisih grid data (DataGrid) dengan mengklik pada pengepala senarai.

Semua lajur DataGrid boleh diisih dengan mengklik pada pengepala lajur. Anda boleh menentukan lajur yang boleh diisih. Secara lalai, lajur tidak boleh diisih melainkan anda menetapkan sifat boleh diisih kepada benar.

Buat grid data (DataGrid)

	<table id="tt" class="easyui-datagrid" style="width:600px;height:250px"
			url="datagrid8_getdata.php"
			title="Load Data" iconCls="icon-save"
			rownumbers="true" pagination="true">
		<thead>
			<tr>
				<th field="itemid" width="80" sortable="true">Item ID</th>
				<th field="productid" width="80" sortable="true">Product ID</th>
				<th field="listprice" width="80" align="right" sortable="true">List Price</th>
				<th field="unitcost" width="80" align="right" sortable="true">Unit Cost</th>
				<th field="attr1" width="150">Attribute</th>
				<th field="status" width="60" align="center">Stauts</th>
			</tr>
		</thead>
	</table>

Kami mentakrifkan beberapa lajur boleh diisih, termasuk itemid, productid, listprice, unitcost, dsb. Lajur 'attr1' dan lajur 'status' tidak boleh diisih.

Apabila mengisih, DataGrid akan menghantar dua parameter ke pelayan jauh:

• isih: nama medan lajur isih.

• urutan: kaedah pengisihan, yang boleh menjadi 'asc' atau 'desc', nilai lalai ialah 'asc'.

Kod sisi pelayan

	$page = isset($_POST['page']) ? intval($_POST['page']) : 1;
	$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;
	$sort = isset($_POST['sort']) ? strval($_POST['sort']) : 'itemid';
	$order = isset($_POST['order']) ? strval($_POST['order']) : 'asc';
	$offset = ($page-1)*$rows;
	
	$result = array();
	
	include 'conn.php';
	
	$rs = mysql_query("select count(*) from item");
	$row = mysql_fetch_row($rs);
	$result["total"] = $row[0];
	
	$rs = mysql_query("select * from item order by $sort $order limit $offset,$rows");
	
	$items = array();
	while($row = mysql_fetch_object($rs)){
		array_push($items, $row);
	}
	$result["rows"] = $items;
	
	echo json_encode($result);

Muat turun contoh jQuery EasyUI

jeasyui-datagrid-datagrid8.zip