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效果，这就说明已经在异步加载。
