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教程