bootstrap treeview 下拉树 (二) checkBox多选

继上一篇文章，下拉树中往往要求可以多选，返回input中的字符串，以“，”分割，选择完毕以后点击确定隐藏Tree，废话不多刷，上干货：

界面效果：

JS部分：

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

    function buildTree(parentNode, datas) {
        for (var key in datas) {
            var data = datas[key];
            if (data.parentid == parentNode.id) {
                var node = {text: data.knowledgeText, id: data.id, nodes: [], selectable: true};
                parentNode.nodes.push(node);
                buildTree(node, datas);
            }
        }

        if (parentNode.nodes.length == 0) {
            delete parentNode.nodes;
        }
    }

    function getTree(strid) {
        var params = {};
        params.id = 'a696ee80-5b26-4a99-b013-ba22bec4d3bb';
        $.ajax({
            url: "/knowledge/getTree", // 请求的URL
            dataType: 'json',
            type: "get",
            data: params,
            success: function (data) {
                var tree = {text: '复读语文', id: 'a696ee80-5b26-4a99-b013-ba22bec4d3bb', nodes: []};
                buildTree(tree, data.data);
                $('#knowledgeTree').treeview({
                    color: "#428bca",
                    data: [tree],
                    showCheckbox: true,
                    multiSelect: true,
                    onNodeChecked: function (event, data) {
                        console.log('dddd', data);
                        var str = $("#knowledgeText").val();
                        console.log('1', data.knowledgeText);
                        if (str.length > 0) {
                            $("#knowledgeText").val(str + data.text + ',');
                        } else {
                            $("#knowledgeText").val(data.text + ',');
                        }
                        console.log('2', str);
                    },
                    onNodeUnchecked: function (event, data) {
                        var str = $("#knowledgeText").val();
                        $("#knowledgeText").val(str.replace(data.text + ",", ""));
//                        console.log('content', str.substring(0, str.indexOf(data.text)));
                        console.log('content', str.replace(data.text + ",", ""));
                    }
                });


            }
        });
    }

    function hideDIV() {

//        $("#knowledgeText").val(mdata.text);
        $("#hideDiv").hide();
    }

HTML：

<body>
<input type="text" id="knowledgeText" name="knowledgeText" class="form-control" value=""
       onclick="$('#hideDiv').show()" placeholder="分类名称"/>
<div id="hideDiv" style="display: none;">
    <div id="knowledgeTree"></div>
    <button class="btn btn-danger" type="button" onclick="hideDIV()">
        <span class="glyphicon glyphicon-eye-open"></span> 确定
    </button>
</div>

</body>

bootstrap treeview 下拉树 (二) checkBox多选

继上一篇文章，下拉树中往往要求可以多选，返回input中的字符串，以“，”分割，选择完毕以后点击确定隐藏Tree，废话不多刷，上干货：

相关推荐