jQuery EasyUI使用教程:在树网格中动态加载

原创|使用教程|编辑:龚雪|2016-07-27 09:17:19.000|阅读 340 次

概述:动态加载树网格有助于从服务器上加载部分的行数据,避免加载大型数据的长时间等待。本教程将向您展示如何创建具有动态加载特性的树网格。

相关链接:

Kendo UI for jQuery——创建现代Web应用程序的最完整UI库!查看详情>>>

动态加载树网格有助于从服务器上加载部分的行数据,避免加载大型数据的长时间等待。本教程将向您展示如何创建具有动态加载特性的树网格。

添加节点到树形菜单

创建树网格

<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

$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] &gt; 0 ? true : false;
}

下载EasyUI示例:easyui-treegrid-demo.zip

购买正版授权的朋友可以点击"咨询在线客服"哦~~~


标签:HTML5jQueryUI界面HTML5/JS

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:慧都控件网

登录 慧都网发表评论


慧都网友 2016-07-27 09:47:56.000
0

感谢分享,收藏咯~


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
jQuery EasyUI

基于jQuery且支持HTML5的用户界面框架

在线
客服
在线
QQ
电话
咨询
400-700-1020
购物车 反馈 返回
顶部
在线客服系统
live chat