ztree组织树实例，选中并展示已选数据

最近在对接接口，需要获取上家的组织机构接口并将数据展示出来，所以就了解了一下这种组织机构树，有ztree，dtree等等，考虑到用户那边都是比较老的ie，所以还是用了ztree，特地记录一下使用方法

 Ztree的官方API文档和demo地址：http://www.treejs.cn/

建议在用之前，先去看看官方文档的注意事项与入门指南，可以更加快速上手

1.文件准备

ztree提供了很多js文件，在3.0后，将功能分割成独立模块，目前有 core + excheck + exedit +exhide，每个模块负责不同的功能，例如复选框，编辑，拖拽等，明确你需要的功能导入不同js，并且将css文件一并添加

注意，ztre所有的js必须放在jquery的后面

2.初始化

这里直接上代码更加直观

setting里面的参数配置，在官方文档写的特别详细，这里就不赘述，可以自行去看，这里只放一些常用的参数

这里区分一下简单数据格式和标准数据格式，简单数据概况的说就是json数据是类似于list集合形式，数据之间的父子关系是通过id和pid进行关联，而标准数据则是在父节点里会包含下面的子节点，现在基本常用的都是简单数据模式，使用时需要绑定id和pid

<script>
var zTreeObj; //实例一个obj
    var setting = {
        view: {
            selectedMulti: true, //设置是否能够同时选中多个节点
            showIcon: true,  //设置是否显示节点图标
            showLine: true,  //设置是否显示节点与节点之间的连线
        },
        data: {
            simpleData: {
                enable: true, //设置是否启用简单数据格式（zTree支持标准数据格式跟简单数据格式，上面例子中是标准数据格式）
                idKey: "id",  //设置启用简单数据格式时id对应的属性名称
                pidKey: "pId" //设置启用简单数据格式时parentId对应的属性名称,ztree根据id及pid层级关系构建树结构
            }
        },
        check: {
            enable: true   //设置是否显示checkbox复选框
        },
        callback: {
            onCheck: zTreeOnClick,
            beforeCheck: function (treeId, treeNode) {
                if (treeNode.isParent) {
                    return false;
                }
            }
        }
    }
</script>

setting设置完成后，就把你的数据进行绑定

                            这里是你的dom     配置     数据源
zTreeObj = $.fn.zTree.init($("#ztreeOrgs"), setting, data.info);

至于其他的更多的扩展功能，我这里贴上代码，如果需要demo的话，也可以留言给我

整体代码 JS

<script>
    var zTreeObj;
    var setting = {
        view: {
            selectedMulti: true, //设置是否能够同时选中多个节点
            showIcon: true,  //设置是否显示节点图标
            showLine: true,  //设置是否显示节点与节点之间的连线
        },
        data: {
            simpleData: {
                enable: true, //设置是否启用简单数据格式（zTree支持标准数据格式跟简单数据格式，上面例子中是标准数据格式）
                idKey: "id",  //设置启用简单数据格式时id对应的属性名称
                pidKey: "pId" //设置启用简单数据格式时parentId对应的属性名称,ztree根据id及pid层级关系构建树结构
            }
        },
        check: {
            enable: true   //设置是否显示checkbox复选框
        },
        callback: {
            onCheck: zTreeOnClick,
            beforeCheck: function (treeId, treeNode) {
                if (treeNode.isParent) {
                    return false;
                }
            }
        }
    }
    function zTreeOnClick(event, treeId, treeNode) {
        var treeObj = $.fn.zTree.getZTreeObj("ztreeOrgs");
        var nodes = treeObj.getCheckedNodes(true);
        var c = "";
        var n = "";
        var html = "";
        for (var i = 0; i < nodes.length; i++) {
            if (nodes[i].isParent != true) {
                html += "<li id=" + nodes[i].id + " class=checkValue>" + nodes[i].name + "</li>"
                c += nodes[i].id + ",";
                n += nodes[i].name + ",";
            }
        } 
        $("#checkName").val(n.substring(0, n.length - 1));
        $("#checklist").html(html);
        $("#checkValue").val(c.substring(0, c.length - 1));

    };
    function resultCheck() {
        var treeObj = $.fn.zTree.getZTreeObj("ztreeOrgs");
        treeObj.checkAllNodes(false)
        $("#checklist").html("");
        $("#checkValue").val("");
        $("#checkName").val("");
    }
    function submitCheck() {
       
        
    }
    function closelist() {
        var treeObj = $.fn.zTree.getZTreeObj("ztreeOrgs");
        treeObj.expandAll(false);
    }
    $(function () {
        $.ajax({
            type: "POST",
            url: ,
            success: function (data) {
                if (data.status == "success") {
                    zTreeObj = $.fn.zTree.init($("#ztreeOrgs"), setting, data.info);
                    fuzzySearch('ztreeOrgs', '#KeyOrg', null, true);
                }

            }
        });
    })
</script>

HTML

<div class="person">
    搜索：<input type="text" name="Orgs" id="KeyOrg" placeholder="模糊查询" style="" />
    <div id="ztreeOrgs" class="ztree"></div>

</div>
<input type="hidden" name="name" id="checkValue" value="" />
<input type="hidden" name="name" id="checkName" value="" />
<input type="hidden" name="name" id="hidID" value="@ViewBag.ID" />
<input type="hidden" name="name" id="hidPendID" value="@ViewBag.PendID" />
<div class="person">
    <ul id="checklist">
    </ul>
</div>
<div>
    <input type="button" name="name" onclick="submitCheck()" value="提交发文" />
    <input type="button" name="name" onclick="resultCheck()" value="清空选择" />
    <input type="button" name="name" onclick="closelist()" value="全部折叠" />
</div>