Ztree

Ztree

到ztree的官网下载ztree的js插件，包含js和css两个部分，然后，将js引入到项目中

新建页面，将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为作者的帮助类，其作用为添加版本号

编写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 } } };

添加自定义方法，为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(); //关闭遮罩层 } }); }

添加异步加载时需要请求的参数的处理方法function getUrl(id, node) { var parentcode = node.id; return "AnsyChildData?System_Code=" + System_Code + "&Data_Code=" + Data_Code + "&tabReport=" + tabReport + "&Quota_Code=" + parentcode; }

添加异步调用后返回数据的过滤处理//异步过滤数据 function filter(treeId, parentNode, childNodes) { return childNodes.ResultObj; }

添加初始化ztree的方法//初始化树 var zTreeObj = $.fn.zTree.init($("#dataTree"), setting, zTreeNodes);

运行页面，将会发现有下级节点的出现loading效果，这就说明已经在异步加载。