动态加载树网格有助于从服务器上加载部分的行数据,避免加载大型数据的长时间等待。本教程将向您展现如何建立具备动态加载特性的树网格。php
jQuery EasyUI最新试用版下载请猛戳>>html

点击查看示例mysql
建立树网格
1sql 2json 3服务器 4fetch 5ui 6url 7spa 8 9 10 |
< 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 > |
服务器代码
treegrid3_getdata.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$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 ; } |
下载EasyUI示例:easyui-treegrid-demo.zip
有兴趣的朋友能够点击查看更多有关jQuery EasyUI的教程>>