第一步:引用相关文件。
<script type="text/javascript" src="/Scripts/jquery.ztree.core-3.1.min.js"></script> <script type="text/javascript" src="/Scripts/jquery.ztree.excheck-3.1.min.js"></script> <link rel="stylesheet" href="/Content/zTreeStyle/zTreeStyle.css" type="text/css" />
第一个文件是Ztree的核心文件,这个是必须要的;第二个文件是一个拓展文件,主要用户单选框和复选框的功能,因为要用到,所以也必须引用进来;第三个文件是CSS文件。
第二步:相关配置(具体详细配置,请参考官网API)。
var setting = { data: { simpleData: { enable: true } }, check: { enable: true }, async: {//异步加载节点数据 enable: true, url: "/DepartMent/GetJson/" }, callback: {//绑定回调函数 onAsyncSuccess: zTreeOnAsyncSuccess//在异步加载完成时调用 } }; $(function () { $.fn.zTree.init($("#treeDemo"), setting); }); function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) { if (art.dialog.data('User')) {//这里有用到artDialog插件 var ID = top.art.dialog.data('User');// 获取由主页面传递过来的数据 var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo") var zTree = zTreeObj.getCheckedNodes(false); for (var i = 0; i < zTree.length; i++) { if (ID.indexOf("," + zTree[i].id + ",") != -1) { zTreeObj.checkNode(zTree[i], true); } } }; }; 复制代码