bootstrap-treeview级联问题

最新推荐文章于 2021-06-04 05:51:52 发布

原创最新推荐文章于 2021-06-04 05:51:52 发布 · 343 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #js #bootstrap-treeview #tree #级联问题 #ViewUI

html 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何利用Bootstrap和bootstrap-treeview插件实现一个可全选/全不选的树形结构，包括引入相关文件、HTML结构设置、JavaScript交互逻辑，并展示了具体的实现效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、引入bootstrap、bootstrap-treeview相关文件；

二、HTML代码

<div>
    <div id="tree" style="color: #999; font-size: 14px;"></div>
    <div>
        <button type="button" class="btn btn-success" id="btn-check-all">Check All</button>
        <button type="button" class="btn btn-danger" id="btn-uncheck-all">Uncheck All</button>
    </div>
    <div id="output"></div>
</div>

三、JS代码

var defaultData = [
                        {
                            "id": 0,
                            "icon": "talent-icon-folder",
                            "text": "计算机科学",
                            "nodes": [
                                {
                                    "id": 1,
                                    "icon": "talent-icon-folder",
                                    "text": "软件工程",
                                    "nodes": [
                                        {
                                            "id": 2,
                                            "icon": "talent-icon-file",
                                            "text": "图形学"
                                        },
                                        {
                                            "id": 3,
                                            "icon": "talent-icon-file",
                                            "text": "大数据运算"
                                        }
                                    ]
                                },
                                {
                                    "id": 4,
                                    "icon": "talent-icon-file",
                                    "text": "微机原理"
                                }
                            ]
                        },
                        {
                            "id": 5,
                            "icon": "talent-icon-folder",
                            "text": "土木工程",
                            "state": {
                                "checked": true
                            }
                        },
                        {
                            "id": 6,
                            "icon": "talent-icon-folder",
                            "text": "市场营销"
                        }
                    ];
                    var $checkableTree = $('#tree').treeview({
                        data: defaultData,
                        levels: 3,
                        showIcon: true,
                        showCheckbox: true,
                        showBorder: false,
                        /*multiSelect: true,*/
		                selectedColor: 'back',
		                selectedBackColor: 'white',
                        expandIcon: 'talent-icon-towards-the-right',
                        collapseIcon: 'talent-icon-down',
                        checkedIcon: 'talent-icon-check',
                        uncheckedIcon: 'talent-icon-checkbox',
                        onNodeChecked: function(event, node) {
                            console.log(node.id);
                            $('#output').prepend('<p>' + node.text + ' was checked</p>');
                            // parent-有子必有父
                            function doCheckedNode(node) {
                                // 初始化
                                var thisDiv = $('#tree');
                                var parentNode = thisDiv.treeview('getParent', node);
                                if(parentNode && 0 <= parentNode.nodeId) {
                                    console.log(parentNode);
                                    // 选中
                                    thisDiv.treeview('checkNode', [ parentNode, { silent: true } ]);
                                    // 递归
                                    doCheckedNode(parentNode);
                                }
                            }
                            doCheckedNode(node);
                        },
                        onNodeUnchecked: function (event, node) {
                            $('#output').prepend('<p>' + node.text + ' was unchecked</p>');
                            // child-无父无子
                            function doUnCheckedNode(node) {
                                // 初始化
                                var thisDiv = $('#tree');
                                if(node && node.nodes && 0 < node.nodes.length) {
                                    var childNodes = node.nodes;
                                    for(var i = 0, len = childNodes.length; i < len; i++) {
                                        // 取消选中
                                        thisDiv.treeview('uncheckNode', [ childNodes[i].nodeId, { silent: true } ]);
                                        // 递归
                                        doUnCheckedNode(childNodes[i]);
                                    }
                                }
                            }
                            doUnCheckedNode(node);
                        }
                    });
                    $('#btn-check-all').on('click', function (e) {
                        $checkableTree.treeview('checkAll', { silent: $('#chk-check-silent').is(':checked') });
                    });
                    $('#btn-uncheck-all').on('click', function (e) {
                        $checkableTree.treeview('uncheckAll', { silent: $('#chk-check-silent').is(':checked') });
                    });

四、效果