ztree

第一步：引用相关文件。

<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);
                    }
                }
            };
        };
复制代码