bootstrap treeView多选的使用

具体效果

html页面代码 js可以去上篇文章下载

   <div class="form-group" id="funDiv">
                        <div class="col-sm-2 control-label">选择功能</div>
                        <div class="col-sm-10">
                            <input type="text" id="knowledgeText" name="knowledgeText" class="form-control" value=""
                                   onclick="$('#hideDiv').show()" placeholder="分类名称" readonly="readonly"/>
                            <div id="hideDiv" style="display: none;">
                                <div id="knowledgeTree"></div>
                                <button class="btn btn-danger" style="float: right" type="button" onclick="hideDIV()">
                                    <span class="glyphicon glyphicon-eye-open"></span> 确定
                                </button>
                            </div>
                            <input style="display: none" readonly="readonly" id="ids">
                        </div>
                    </div>
<script type="text/javascript" src="${request.contextPath}/statics/libs/bootstrap-treeview.js"></script>

js部分

<script type="text/javascript">
    $(function () {
        getTree(0,0);
    })

    function getChildNodeIdArr(node) {
        var ts = [];
        if (node.nodes) {
            for (x in node.nodes) {
                ts.push(node.nodes[x].nodeId);
                if (node.nodes[x].nodes) {
                    var getNodeDieDai = getChildNodeIdArr(node.nodes[x]);
                    for (j in getNodeDieDai) {
                        ts.push(getNodeDieDai[j]);
                    }
                }
            }
        } else {
            ts.push(node.nodeId);
        }
        return ts;
    }
    function getTree(id,nodeId) {
        var data = new FormData();
        data.append("pid",id);
        var  url=baseURL + 'company/functioninfo/page';
        $.ajax({
            type: "post",
            url: url,
            processData: false,  // 告诉jQuery不要去处理发送的数据
            contentType: false,  // 告诉jQuery不要去设置Content-Type请求头
            data: data,
            success: function (r) {
                if (r.code == 0) {
                    if(id == 0){
                        var tree = new Array();
                        $.each( r.page.list,function(index, item){
                            tree[index]={text:item.name,id:item.id};
                        })
                        $('#knowledgeTree').treeview({
                            color: "#428bca",
                            data: tree,
                            showCheckbox: true,
                            multiSelect: false,
                            onNodeChecked: function (event, data) {
                                var selectNodes = getChildNodeIdArr(data); //获取所有子节点
                                if (selectNodes) { //子节点不为空，则选中所有子节点
                                    $('#knowledgeTree').treeview('checkNode', [selectNodes, { silent: true }]);
                                }
                                var parentNode = $("#treeview-checkable").treeview("getNode", data.parentId);
                                setParentNodeCheck(data);
                            },
                            onNodeUnchecked: function (event, data) {
                                var selectNodes = getChildNodeIdArr(data); //获取所有子节点
                                if (selectNodes) { //子节点不为空，则取消选中所有子节点
                                    $('#knowledgeTree').treeview('uncheckNode', [selectNodes, { silent: true }]);
                                }
                            },
                            onNodeSelected: function (event, node) {
                                getTree(node.id,node.nodeId);
                            },
                        });
                    }else {
                        if(typeof($('#knowledgeTree').treeview('getSelected')[0].nodes) != "undefined" ){
                            if($('#knowledgeTree').treeview('getSelected')[0].nodes.length>0)  {
                                return;
                            }
                        }
                        $.each(r.page.list, function (index, item) {
                            var addNodes = new Array();
                            addNodes[0] = nodeId;
                            addNodes[1] = {node: {text: item.name, id: item.id}};
                            $("#knowledgeTree").treeview("addNode", addNodes);
                        });
                    }
                }
            }
        });
    }
    function setParentNodeCheck(node) {
        var parentNode = $("#knowledgeTree").treeview("getNode", node.parentId);
        if (parentNode.nodes) {
            var checkedCount = 0;
            for (x in parentNode.nodes) {
                if (parentNode.nodes[x].state.checked) {
                    checkedCount ++;
                } else {
                    break;
                }
            }
            if (checkedCount === parentNode.nodes.length) {
                $("#knowledgeTree").treeview("checkNode", parentNode.nodeId);
                setParentNodeCheck(parentNode);
            }
        }
    }
    function hideDIV() {

        var listChecked= $('#knowledgeTree').treeview('getChecked');
        var ids = new Array();
        var names="";
        console.log(ids.length);
        $.each(listChecked, function (index, item) {
            var sum = ids.length;
            $.each(ids, function (index, id) {
                if(item.id == id){
                    sum++;
                }
            });
            if(sum == ids.length){
                names = names+'，'+item.text
                console.log("添加"+item.text);
                ids[sum]=item.id;
            }
        });

        $("#knowledgeText").val(names);
        $("#ids").val(ids);
        $("#hideDiv").hide();
    }
</script>