LigerUI 树控件数据异步加载
程序员文章站
2022-05-18 19:53:40
...
当需要绑定到树中的数据量比较大的情况下,需要采用延迟数据加载来解决这个问题,树的异步加载从理论上完全可以实现,树中的数据量来自于子节点套子节点,当无数的子节点一块绑定显示的时候,会产生数据无法显示的问题。
延迟数据加载,首先会把树的第一级节点绑定到树中,当打开第一级节点的时候,通过后台调用的方式获取当前结点的下一级节点内容,由于下级节点有可能又有子节点或者叶子节点,所以需要通过type来标识,比如 节点使用department,叶子使用employee来标识员工与部门之间的关系。
后台数据的绑定需要最好按照固定的格式绑定,一般按照id,pid,type,text的方式与树的节点的属性相对应。
在绑定完数据后需要通过属性赋值来标识下:
idFieldName: 'id',
parentIDFieldName: 'pid',
前端请求示例如下:
$(function ()
{
$("#treeDepart").ligerTree({
nodeWidth: 300,
url: '../AttendanceGroup/GetSelectUser',
isLeaf: function (data) {
if (!data) return false;
return data.type == "employee";
},
delay: function (e) {
var data = e.data;
if (data.type == "department") {
return {
url: '../AttendanceGroup/GetSelectUser?prevId=' + data.id
}
}
return false;
},
checkbox: true,
idFieldName: 'id',
parentIDFieldName: 'pid',
slide: false,
onCheck: checkEle
});
});
后台数据赋值操作:
foreach (RCSA_DepartmentModel depobj in list)
{
if (depobj.parentId == null || depobj.parentId.Length == 0)
{
rlist.Add(new { id = depobj.departmentId, pid = 0, text = depobj.departmentName,type= "department" });
}
else {
rlist.Add(new { id = depobj.departmentId, pid = depobj.parentId, text = depobj.departmentName, type = "department" });
}
}