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

演示一：默认

<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>');
    }
})

演示十五：失效树菜单

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

$('#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教程

参数	描述	默认值
collapsed	初始化时的折叠状态	false
unique	展开同级节点的唯一性。true，当展开一个节点时，同级的其他节点会自动关闭；false，当展开一个节点时，同级的其他节点保持原形。	false
control	指定一个容器,控制整个tree的展开,收缩 或者收放 所有的节点。	-
treeview方法
toggle	当一个节点的收放状态改变时，调用自定义函数Callback。 toggle: function() {}	-
add	追加节点。tree.treeview({ add: ''});	-