TreeGrid:懒加载
参考示例:
TreeGrid:懒加载
创建代码
<div id="treegrid1" class="mini-treegrid" style="width:600px;height:250px;"
url="../data/TreeService.aspx?method=LoadNodes" showTreeIcon="true" textField="text" idField="id"
treeColumn="filename" onbeforeload="onBeforeTreeLoad">
<div property="columns">
<div name="filename" field="name" width="150">名称</div>
<div field="type" width="100">类型</div>
<div field="size" width="100" dateFormat="yyyy-MM-dd">大小</div>
<div field="createdate" width="100" dateFormat="yyyy-MM-dd">创建日期</div>
</div>
</div>
服务端返回数据
[{
id: "form",
text: "Form",
......
isLeaf: false, //是否叶子节点:+和-号
expanded: false //节点处于收缩状态
},
......
]
其中,isLeft 说明此节点是否有下一级节点。expanded 表示此节点处于折叠状态。
懒加载事件
当用户点击"+"图标时,会自动加载下一级节点,此时会把当前节点id传递到后台,也可以拦截加载事件,增加额外属性:
function onBeforeTreeLoad(e) {
var tree = e.sender; //树控件
var node = e.node; //当前节点
var params = e.params; //参数对象
//可以传递自定义的属性
params.myField = "123"; //后台:request对象获取"myField"
}
服务端处理
服务端通过request获取"id"属性后,加载此节点的下一级节点数组,并通过JSON返回。
String id = Request["id"];
if (String.IsNullOrEmpty(id)) id = "-1";
//获取下一级节点
String sql = "select * from plus_file where pid = '" + id + "' order by updatedate";
ArrayList folders = DBUtil.Select(sql);
//判断节点,是否有子节点。如果有,则处理isLeaf和expanded。
for (int i = 0, l = folders.Count; i < l; i++)
{
Hashtable node = (Hashtable)folders[i];
String nodeId = node["id"].ToString();
String sql2 = "select * from plus_file where pid = '" + nodeId + "' order by updatedate";
ArrayList nodes = DBUtil.Select(sql2);
if (nodes.Count > 0)
{
node["isLeaf"] = false;
node["expanded"] = false;
}
}
//返回JSON
String json = PluSoft.Utils.JSON.Encode(folders);
Response.Write(json);
分享到:
相关推荐
Ext.ux.tree.treegrid异步加载,点击节点加载数据
MVC+EasyUITreeGrid懒加载示例,主要对EasyUI中TreeGrid组件的使用进行演示。对于正在学此组件的童鞋,不防花个几分钟看一下。本文主要演示:TreeGrid的简单应用、懒加载方法、控件数据格式。
jquery.treegrid.min.js jquery.treegrid.min.jsjquery.treegrid.min.jsjquery.treegrid.min.js
jquery-treegrid 树形表格组件 最新的treegrid 版本 下载
扩展jquery.treegrid.extension.js,实现jquery-treegrid的懒加载,结合jquery.cookie.js来实现缓存,减缓页面大量数据加载
treegrid动态加载tree级联更新下拉列表,保存让下拉列表显示名称,不是id,和动态计算数量乘以单价的和,和总合计,添加一列删除一列,撤回,保存的合计。
treegrid大数据优化,支持每个节点上秒显示上万条数据
GridView+Jquery实现的TreeGrid GridView和jquery 实现的无刷新TreeGrid 演示数据采用系统自动生成,功能非常简单
jquery easyui treegrid demo 详解 增删改查 用IE打开,并选择允许
基于jQuery的TreeGrid组件,附讲解地址: http://blog.csdn.net/s445320/article/details/50715430
使用Bootstrap-table和JQuery TreeGrid插件展示树形表格,实现异步加载大数据量。
ASP.NET源码——GridView+Jquery实现的TreeGrid.zip
jquery easyui treegrid 拖拽demo
jquery.min.js+jquery.treegrid.min.js 二、后端提供树状列表格式的集合数据,借助前端的DT的配置控制,来在页面上输出满足treegrid格式要求的html 前台: @using Model @{ Layout = null; UserInfo userInfo = ...
GridView+Jquery实现的TreeGrid_jtreegrid
GridView+Jquery实现的TreeGrid_C# GUI控件
NULL 博文链接:https://zhaozhi3758.iteye.com/blog/1399229