bootstrap-treeview 树形菜单控件

最新推荐文章于 2026-05-15 09:36:59 发布

原创最新推荐文章于 2026-05-15 09:36:59 发布 · 1.1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Bootstrap

本文介绍了一个基于Bootstrap的树形菜单控件实现方法。通过使用该控件，可以轻松地在网页上创建多级嵌套的树形结构菜单。示例展示了如何定义树结构数据并配置控件选项，如节点图标、复选框显示等。

bootstrap-treeview 树形菜单控件

https://github.com/jonmiles/bootstrap-treeview

            var tree = [
            {
                text: "Parent 1",
                id:1,
                nodes: [
                {
                    text: "Child 1",
                    id:2,
                    nodes: [
                    {
                        text: "Grandchild 1",
                        id:3,
                    },
                    {
                        text: "Grandchild 2",
                        id:4
                    }
                    ]
                },
                {
                    text: "Child 2",
                    id:5
                }
                ]
            },
            {
                text: "Parent 2",
                id:6
            },
            {
                text: "Parent 3",
                id:7
            },
            {
                text: "Parent 4",
                id:8
            },
            {
                text: "Parent 5",
                id:9
            }
            ];
            $('#tree').treeview({
                    data: tree,         // 数据源
                    showCheckbox: false,   //是否显示复选框
                    highlightSelected: true,    //是否高亮选中
                    nodeIcon: 'glyphicon glyphicon-user',    //节点上的图标
                    //nodeIcon: 'glyphicon glyphicon-globe',
                    emptyIcon: '',    //没有子节点的节点图标
                    multiSelect: false,    //多选
                    onNodeChecked: function (event,data) {
                        console.log("nodeId = "+data.nodeId);
                        console.log("id = "+data.id);
                    },
                    onNodeSelected: function (event, data) {
                        console.log("nodeId = "+data.nodeId);
                        console.log("id = "+data.id);
                    }
                });