Ztree 分批异步加载
本文简要介绍ztree的分批异步加载，因作者在利用时踩了良多坑，所以写下来供给给后来者参考。
东西/原料
- vs2015
- ztree
方式/步调
- 1
到ztree的官网下载ztree的js插件，包含js和css两个部门，然后，将js引入到项目中
- 2
新建页面，将js与css添加引用到页面
@Common.HtmlHelper.Css("~/Scripts/viewer/viewer.css", "~/Scripts/ztree/css/demo.css", "~/Scripts/ztree/css/zTreeStyle/zTreeStyle.css")
@Common.HtmlHelper.Script("~/Scripts/ztree/js/jquery.ztree.all.js")
注：Common.HtmlHelper为作者的帮忙类，其感化为添加版本号
- 3
编写js，添加ztree异步加载的设置装备摆设，如下
var setting = {
async: {
enable: true,
url: getUrl,
autoParam: ["id", "name"],
dataFilter: filter
},
view: {
showLine: false,
addDiyDom: addDiyDom,
addHoverDom: addHoverDom,
showTitle: true
},
data: {
simpleData: {
enable: true
}
}
};
- 4
添加自界说方式，为ztree加载数据：
unction BindTree()
{
com.ajax({
url: "FirstAnsyData?System_Code=" + System_Code + "&Data_Code=" + Data_Code + "&tabReport=" + tabReport,
type: "post",
contentType: "application/json",
data: {},
dataType: "json",
success: function (res)
{
if (res.ResultFlag == com.AjaxResultFlag.success)
{
queryHandler(res.ResultObj);
var zTree = $.fn.zTree.getZTreeObj("dataTree");
var nodes = zTree.transformToArray(zTree.getNodes());
nodes.forEach(function (value, i)
{
if (value.isparent && value.pId != null) {
value.isParent = value.isparent;
zTree.reAsyncChildNodesPromise(value, "", false);
}
});
}
else
{
com.msg(res.ResultObj);
}
},
error: function (x, y, z)
{
com.msg("操作掉败");
},
complete: function ()
{
parent.layer.closeAll(); //封闭遮罩层
}
});
}
- 5
添加异步加载时需要请求的参数的处置方式
function getUrl(id, node)
{
var parentcode = node.id;
return "AnsyChildData?System_Code=" + System_Code + "&Data_Code=" + Data_Code + "&tabReport=" + tabReport + "&Quota_Code=" + parentcode;
}
- 6
添加异步伐用后返回数据的过滤处置
//异步过滤数据
function filter(treeId, parentNode, childNodes)
{
return childNodes.ResultObj;
}
- 7
添加初始化ztree的方式
//初始化树
var zTreeObj = $.fn.zTree.init($("#dataTree"), setting, zTreeNodes);
- 8
运行页面，将会发现有下级节点的呈现loading结果，这就申明已经在异步加载。
- 发表于 2019-08-04 22:05
- 阅读 ( 1367 )
- 分类：其他类型
0 篇文章
作家榜 »
-
xiaonan123
189 文章
-
汤依妹儿
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
华志健
23 文章