js中，jquery的ztree使用,使用复选框

在使用jquery的ztree，首先加入相关的css和js：

zTreeStyle.css，jquery.ztree.core-3.5.min.js，如果需要复选框，还需要加入一个js:jquery.ztree.excheck-3.5.min.js

(1)html中，代码如下所示：

 <input type="text" class="form-control" placeholder="请指定可见用户" id="userId" type="text"  data-title="指定可见用户" value="" data-toggle="dropdown" style="display: none;" value=''>
 <div id="toggle-con" style="overflow:scroll ;border:1px solid #ccc; width:260px; height:200px; background: #fff; border-radius:3px; position: absolute; top:110px; left:30; z-index: 10000; display: none;">
    <ul id="tree2" class="ztree" data-title="指定可见用户"></ul>
 </div>

(2)在js中，代码如下所示：

// 人员树
    var userSettings = {
        async : {
            enable : true,
            type : "post",
            contentType : "text/html;charset=UTF-8",
            dataType : 'json',
            url : 路径
        },
        view : {
            showIcon : false,
            selectedMulti : true,     //可以多选
            showLine : false,
            expandSpeed : 'fast',
            dblClickExpand : false
        },
        check : {
            enable : true,
            chkStyle : "checkbox",    //复选框
            chkboxType : {
                "Y" : "s",
                "N" : "ps"
            }
        },
        data : {
            simpleData : {
                enable : true
            }
        },
        callback : {
            beforeClick : beforeClick,
            onCheck : onCheck
        }
    };
    $.fn.zTree.init($("#tree2"), userSettings);
    setTimeout(function() {
        // 查询条件中所属组织机构的div离开事件
        $("body").click(
                function(event) {
                    if (event.target.id == "userId") {
                        $("#toggle-con").toggle();
                    }
                    if (event.target.id.indexOf("tree2") == -1
                            && event.target.id != "userId") {
                        $("#toggle-con").hide();
                    }
                });
    });

(3)其中，beforeClick与onCheck方法的使用，方法如下：

function beforeClick(treeId, treeNode) {
    var zTree = $.fn.zTree.getZTreeObj("tree2");
    zTree.checkNode(treeNode, !treeNode.checked, null, true);
    return false;
}
function onCheck(e, treeId, treeNode) {
    var zTree = $.fn.zTree.getZTreeObj("tree2");
    var nodes = zTree.getCheckedNodes(true);
    v = "";
    for (var i = 0, l = nodes.length; i < l; i++) {
        if (!nodes[i].isParent) {       //isParent判断是否为父级，也就是是否有下级
            v += nodes[i].name + ",";   //获取所选节点的名称
        }
    }
    if (v.length > 0)
        v = v.substring(0, v.length - 1);
    var userId = $("#userId");
    userId.attr("value", v);
}

(4)获取树节点的id,以json的格式存入array数组

var arr = new Array();
var tree = $.fn.zTree.getZTreeObj('tree2');
var treeData = tree.getCheckedNodes(true);
if (treeData.length != 0) {
   for (var i = 0; i < treeData.length; i++) {
       if (!treeData[i].isParent) {
           var json = {
              key : treeData[i].id
           };
           arr.push(json);
        }
    }
}
if(arr.length==0){
    alert("请选择！");
    return null;
}

 大家好，我是威5，更多精彩关注wx公众号：