最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

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

来源:http://www.erdangjiade.com/ 沐浴春风 2016-01-09 18:46浏览(3254)

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

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

bootstrap-treeview.js多级下拉树菜单
分类:导航菜单 > 树形菜单 难易:高级
查看演示 下载资源 下载积分: 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并保留原文链接:https://www.erdangjiade.com/js/660.html
评论1
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 沙发
    01-08 08:32
    ngu137
    这个真心不错啊 。。。
1 2