bootstrap-treeview.js多级下拉树菜单

收藏

bootstrap-treeview.js1是一款强大的树菜单插件，本文演示bootstrap-treeview.js15种不同的调用方法。它可一次性加载数据，也可异步加载。支持Checkbox,selectable,节点级联等，而且还能承载大数据。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

演示一：默认

<div id="treeview1"></div>

treeview.js树菜单数组

var defaultData = [
    {
        text: 'Parent 1',
        href: '#parent1',
        tags: ['4'],
        nodes: [
            {
                text: 'Child 1',
                href: '#child1',
                tags: ['2'],
                nodes: [
                    {
                        text: 'Grandchild 1',
                        href: '#grandchild1',
                        tags: ['0']
                    },
                    {
                        text: 'Grandchild 2',
                        href: '#grandchild2',
                        tags: ['0']
                    }
                ]
            },
            {
                text: 'Child 2',
                href: '#child2',
                tags: ['0']
            }
        ]
    },
    {
        text: 'Parent 2',
        href: '#parent2',
        tags: ['0']
    },
    {
        text: 'Parent 3',
        href: '#parent3',
        tags: ['0']
    },
    {
        text: 'Parent 4',
        href: '#parent4',
        tags: ['0']
    },
    {
        text: 'Parent 5',
        href: '#parent5',
        tags: ['0']
    }
];

$('#treeview1').treeview({
    data: defaultData
});

演示二：初始化树菜单收缩状态

$('#treeview2').treeview({
    levels: 1,//收缩层级
    data: defaultData
});

演示三：初始化树菜单展开状态

$('#treeview3').treeview({
    levels: 99,
    data: defaultData
});

演示四：蓝色主题

$('#treeview4').treeview({
    color: "#428bca",
    data: defaultData
});

演示五：初始化树菜单收缩状态

$('#treeview5').treeview({
    color: "#428bca",
    expandIcon: 'glyphicon glyphicon-chevron-right',//展开图标
    collapseIcon: 'glyphicon glyphicon-chevron-down',//合并图标
    nodeIcon: 'glyphicon glyphicon-bookmark',//无节点图标
    data: defaultData
});

演示六：徽章标签

$('#treeview6').treeview({
    showTags: true, //显示徽章（标签）
    data: defaultData
});

演示七：是否显示边框

$('#treeview7').treeview({
    showBorder: false,
    data: defaultData
});

演示八：设置颜色

$('#treeview8').treeview({
    color: "yellow",//文字和图标颜色
    backColor: "purple",//背景色
    onhoverColor: "orange",//鼠标悬浮颜色
    borderColor: "red",//边框颜色
    highlightSelected: true,//高亮选中
    selectedColor: "yellow",//选中颜色
    selectedBackColor: "darkorange",//选中背景色
    data: defaultData
});

演示九：节点数据重置

$('#treeview9').treeview({
    data: alternateData //新的节点数据，具体请看DEMO数组定义
});

演示十：开启链接下划线

$('#treeview10').treeview({
    enableLinks: true //下划线链接
});

演示十一：可搜索树菜单

<div id="treeview-searchable"></div>

var $searchableTree = $('#treeview-searchable').treeview({
    data: defaultData,
});

演示十二：可选中的树菜单

<div id="treeview-selectable"></div>

$('#treeview-selectable').treeview({
    data: defaultData,
    multiSelect: $('#chk-select-multi').is(':checked'),
    onNodeSelected: function(event, node) {
        $('#selectable-output').prepend('<p>' + node.text + ' was selected</p>');
    },
    onNodeUnselected: function(event, node) {
        $('#selectable-output').prepend('<p>' + node.text + ' was unselected</p>');
    }
})

演示十三：可展开的树菜单

<div id="treeview-expandible"></div>

$('#treeview-expandible').treeview({
    data: defaultData,
    onNodeCollapsed: function(event, node) {
        $('#expandible-output').prepend('<p>' + node.text + ' was collapsed</p>');
    },
    onNodeExpanded: function(event, node) {
        $('#expandible-output').prepend('<p>' + node.text + ' was expanded</p>');
    }
});

演示十四：可多选树菜单

<div id="treeview-checkable"></div>

$('#treeview-checkable').treeview({
    data: defaultData,
    showIcon: false,
    showCheckbox: true,
    onNodeChecked: function(event, node) {
        $('#checkable-output').prepend('<p>' + node.text + ' was checked</p>');
    },
    onNodeUnchecked: function(event, node) {
        $('#checkable-output').prepend('<p>' + node.text + ' was unchecked</p>');
    }
})

演示十五：失效树菜单

$('#treeview-disabled').treeview({
    data: defaultData,
    onNodeDisabled: function(event, node) {
        $('#disabled-output').prepend('<p>' + node.text + ' was disabled</p>');
    },
    onNodeEnabled: function(event, node) {
        $('#disabled-output').prepend('<p>' + node.text + ' was enabled</p>');
    },
    onNodeCollapsed: function(event, node) {
        $('#disabled-output').prepend('<p>' + node.text + ' was collapsed</p>');
    },
    onNodeUnchecked: function(event, node) {
        $('#disabled-output').prepend('<p>' + node.text + ' was unchecked</p>');
    },
    onNodeUnselected: function(event, node) {
        $('#disabled-output').prepend('<p>' + node.text + ' was unselected</p>');
    }
})

treeviewAPI教程