概述
近期做的项目中,后台管理系统模块需要实现树形菜单,故采用bootstrap treeview插件来实现此功能。
插件网址
jQuery多级列表树插件bootstrap-treeview
安装使用
- 到官网下载插件,解压。
- 引入依赖的样式文件
bootstrap.css
,jquery.js
脚本文件,以及bootstrap-treeview.js
脚本文件;
例如:
使用
创建容器
准备树形数据
var treeData = [
{
text: "item1",
icon: "fa fa-cube"
nodes: [
{
text: "item1-1",
icon: "fa fa-cube"
href:"index1.html",
state: {
checked: false,
disabled: false,
expanded: false,
selected: true
}
},
{
text: "item1-2",
icon: "fa fa-cube"
href:"index2.html",
state: {
checked: false,
disabled: false,
expanded: false,
selected: false
}
}
]
},
{
text: "item2",
icon: "fa fa-cube"
href:"index3.html",
state: {
checked: false,
disabled: false,
expanded: false,
selected: false
}
}
];
参数说明:
text: 树形菜单显示的文本;
icon: 树形菜单显示的图标;
href: 点击菜单条目时,跳转的页面路径;
初始化
$('#menuTree').treeview({
data: treeData,// 树形菜单数据
emptyIcon: "icon-circle",
enableLinks: false,
levels: 1,// 展开层级
backColor: "transparent",// 背景
color: "#ffffff",// 文本颜色
selectable: true,
state: {
checked: true,
disabled: true,
expanded: true,
selected: true
},
selectedBackColor: "#5485F7",// 选中时的背景色
selectedColor: '#ffffff',//选中时的文本颜色
onhoverColor: "#5485F7",// hover时的颜色
showBorder: false,
expandIcon: 'fa fa-angle-right',// 展开图标
collapseIcon: 'fa fa-angle-down',// 收缩图标
onNodeSelected: function(event, data) {// 选中事件
if (data && data.href) {
// 打开相应的页面,内嵌iframe的方式
$('#currentPage').attr('src', data.href)
}
// 重置收缩展开
if (data.nodes != null) {
var select_node = $('#menuTree').treeview('getSelected');
if (select_node[0].state.expanded) {
$('#menuTree').treeview('collapseNode', select_node);
select_node[0].state.selected = false;
} else {
$('#menuTree').treeview('expandNode', select_node);
select_node[0].state.selected = false;
}
}
}
});
设置页面初始化时展开的节点
$('#menuTree').treeview('expandNode', [0, {
levels: 2,
silent: true
}]);
当页面初始化时,默认展开第一个节点,展开层级数为2;
注意:
页面初始化时,设置展开节点并选中第一个节点,需要给节点设置:
state: {
checked: false,
disabled: false,
expanded: false,
selected: true
}
初始化不需要选中的节点则是:
state: {
checked: false,
disabled: false,
expanded: false,
selected: false
}