头像

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

来源:http://www.erdangjiade.com/ 二当家的 2016-01-09 18:46浏览(1484)

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

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,9.9元整站资源免费下载!3、充值VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:368848856 在线 充值

bootstrap-treeview.js多级下拉树菜单
分类:导航菜单 > 树形菜单 难易:高级
查看演示 下载资源: 108

关注微信号获取此Demo视频教程:

下载资源 下载积分: 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教程

参数 描述 默认值
collapsed 初始化时的折叠状态 false
unique 展开同级节点的唯一性。true,当展开一个节点时,同级的其他节点会自动关闭;false,当展开一个节点时,同级的其他节点保持原形。 false
control 指定一个容器,控制整个tree的展开,收缩 或者收放 所有的节点。 -

treeview方法

toggle 当一个节点的收放状态改变时,调用自定义函数Callback。 toggle: function() {} -
add 追加节点。tree.treeview({ add: ''}); -
标签: bootstrap树菜单
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:http://www.erdangjiade.com/js/660.html
评论0
头像

友情提示:垃圾评论一律封号,下载出错或任何技术问题请联系QQ 826096331

1 2