简要教程
插件描述：bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件。该jQuery插件基于Twitter Bootstrap，以简单和优雅的方式来显示一些继承树结构，如视图树、列表树等等。
插件依赖
- Bootstrap v3.0.3
- jQuery v2.0. 以上两个外部依赖文件已经经过测试可以正常使用，其他版本的Bootstrap需要另行测试。该插件不支持bootstrap 2。
使用方法
首先要在页面中引入依赖文件和 bootstrap-treeview.js文件。
代码语言：javascript复制<!-- Required Stylesheets -->
<link href="./css/bootstrap.css" rel="stylesheet">
<!-- Required Javascript -->
<script src="./js/jquery.js"></script>
<script src="./js/bootstrap-treeview.js"></script>HTML结构
可以使用任何HTML DOM元素来作为该列表树的容器：
代码语言：javascript复制<div id="tree"></div>调用插件
代码语言：javascript复制function getTree() {
// Some logic to retrieve, or generate tree structure
return data;
}
$('#tree').treeview({data: getTree()});数据结构
为了创建树的继承结构，需要为该列表树插件提供一个嵌套结构的js对象。例如：
代码语言：javascript复制var tree = [
{
text: "Parent 1",
nodes: [
{
text: "Child 1",
nodes: [
{
text: "Grandchild 1"
},
{
text: "Grandchild 2"
}
]
},
{
text: "Child 2"
}
]
},
{
text: "Parent 2"
},
{
text: "Parent 3"
},
{
text: "Parent 4"
},
{
text: "Parent 5"
}
];最简单的树结构可以只有一个节点，使用一个带text属性的js对象来实现即可：
代码语言：javascript复制{
text: "Node 1"
}如果你需要自定义更多的内容，可以参考下面：
代码语言：javascript复制{
text: "Node 1",
icon: "glyphicon glyphicon-stop",
selectedIcon: "glyphicon glyphicon-stop",
color: "#000000",
backColor: "#FFFFFF",
href: "#node-1",
selectable: true,
state: {
checked: true,
disabled: true,
expanded: true,
selected: true
},
tags: ['available'],
nodes: [
{},
...
]
}全局参数
参数可以定制treeview的默认外观和行为。参数使用一个对象来在插件初始化时传入：
代码语言：javascript复制// Example: initializing the treeview
// expanded to 5 levels
// with a background color of green
$('#tree').treeview({
data: data, // data is not optional
levels: 5,
backColor:'green'
}); 可用方法
你可以通过两种方式来调用方法：
1、插件包装器：插件的包装器可以作为访问底层方法的代理。
代码语言：javascript复制$('#tree').treeview('methodName', args)多个参数必须使用数组对象来传入。
2、直接使用treeview：你可以通过下面两种方法中的一种来获取treeview对象实例。
代码语言：javascript复制//该方法返回一个treeview的对象实例
$('#tree').treeview(true)
.methodName(args);
//对象实例也保存在DOM元素的data中，
//可以使用'treeview'的id来访问它。
$('#tree').data('treeview')
.methodName(args);treeview方法列表
- checkAll(options)：选择所有的节点。
$('#tree').treeview('checkAll', { silent: true });- checkNode(node | nodeId, options)：选择指定的节点，接收节点或节点ID。
$('#tree').treeview('checkNode', [ nodeId, { silent: true } ]);- clearSearch()：清空以前的搜索结果。例如清除它们的高亮状态。
$('#tree').treeview('clearSearch');- collapseAll(options)：折叠所有的节点，折叠整个树。
$('#tree').treeview('collapseAll', { silent: true });- collapseNode(node | nodeId, options)：折叠指定节点和它的子节点如果不想折叠子节点可以设置{ ignoreChildren: true }。
$('#tree').treeview('collapseNode', [ nodeId, { silent: true, ignoreChildren: false } ]);- disableAll(options)：禁用所有的节点。
$('#tree').treeview('disableAll', { silent: true });- disableNode(node | nodeId, options)：禁用指定的节点，接收节点或节点ID。
$('#tree').treeview('disableNode', [ nodeId, { silent: true } ]);- enableAll(options)：启用所有的节点。
$('#tree').treeview('enableAll', { silent: true });- enableNode(node | nodeId, options)：启用指定的节点，接收节点或节点ID。
$('#tree').treeview('enableNode', [ nodeId, { silent: true } ]);- expandAll(options)：展开所有的树节点。也可以展开任何给定级别的树节点。
$('#tree').treeview('expandAll', { levels: 2, silent: true });- expandNode(node | nodeId, options)：展开指定的树节点，接收节点或节点ID。也可以展开任何给定级别的树节点。
$('#tree').treeview('expandNode', [ nodeId, { levels: 2, silent: true } ]);- getCollapsed()：返回折叠节点的数组。例如state.expanded = false。
$('#tree').treeview('getCollapsed', nodeId);- getDisabled()：返回被禁用节点的数组。
$('#tree').treeview('getDisabled', nodeId);- getEnabled()：返回可用节点的数组。
$('#tree').treeview('getEnabled', nodeId);- getExpanded()：返回所有展开节点的数组。
$('#tree').treeview('getExpanded', nodeId);- getNode(nodeId)：返回给定节点ID的单一节点对象。
$('#tree').treeview('getNode', nodeId);- getParent(node | nodeId)：返回给定节点的父节点，如果没有则返回undefined。
$('#tree').treeview('getParent', node);- getSelected()：返回所有被选择节点的数组，例如：state.selected = true。
$('#tree').treeview('getSelected', nodeId);- getSiblings(node | nodeId)：返回给定节点的兄弟节点的数组，如果没有则返回undefined。
$('#tree').treeview('getSiblings', node);- getUnselected()：返回没有被选择节点的数组。例如：state.selected = false。
$('#tree').treeview('getUnselected', nodeId);- remove()：移除列表树容器。移除附加的事件、附加对象和额外的html元素。
$('#tree').treeview('remove');- revealNode(node | nodeId, options)：显示一个树节点，展开从这个节点开始到根节点的所有节点。
$('#tree').treeview('revealNode', [ nodeId, { silent: true } ]);- search(pattern, options)：搜索匹配是非常的指定树节点，并高亮它们。返回配平节点的数组。
$('#tree').treeview('search', [ 'Parent', {
ignoreCase:true, // case insensitive
exactMatch:false, // like or equals
revealResults:true, // reveal matching nodes
}]);
$('##tree').treeview('search', [ value,{ ignoreCase: false, exactMatch: false },attr]);
//value:值，
//attr:需要查询的属性- selectNode(node | nodeId, options)：选择一个给定的树节点，接收节点或节点ID。
$('#tree').treeview('selectNode', [ nodeId, { silent: true } ]);- toggleNodeChecked(node | nodeId, options)：切换节点的Check状态。
$('#tree').treeview('toggleNodeChecked', [ nodeId, { silent: true } ]);- toggleNodeDisabled(node | nodeId, options)：切换一个节点的可用和不可用状态。
$('#tree').treeview('toggleNodeDisabled', [ nodeId, { silent: true } ]);- toggleNodeExpanded(node | nodeId, options)：切换一个节点的展开和折叠状态。
$('#tree').treeview('toggleNodeExpanded', [ nodeId, { silent: true } ]);- toggleNodeSelected(node | nodeId, options)：切换一个节点的选择状态。
$('#tree').treeview('toggleNodeSelected', [ nodeId, { silent: true } ]);- uncheckAll(options)：Uncheck所有的节点。
$('#tree').treeview('uncheckAll', { silent: true });- uncheckNode(node | nodeId, options)：Uncheck一个给定的节点，接收节点或节点ID。
$('#tree').treeview('uncheckNode', [ nodeId, { silent: true } ]);- unselectNode(node | nodeId, options)：不选择指定的节点，接收节点或节点ID。
$('#tree').treeview('unselectNode', [ nodeId, { silent: true } ]);事件
你可以在参数中使用回调函数来绑定任何事件，或者使用标准的jQuery .on()方法来绑定事件。
在参数中调用的示例：
代码语言：javascript复制$('#tree').treeview({
// The naming convention for callback's is to prepend with `on`
// and capitalize the first letter of the event name
// e.g. nodeSelected -> onNodeSelected
onNodeSelected:function(event, data) {
// 事件代码...
});
//使用jQuery .on方法：
$('#tree').on('nodeSelected',function(event, data) {
// 事件代码...
}); 实战
代码语言：javascript复制//后端代码：
@RequestMapping(value = "/index", method = RequestMethod.POST)
@ResponseBody
public R index(@RequestBody MUser user) {
//查询用户角色
MRole role = this.roleService.queryUSerRole(user.getuId());
//定义菜单返回格式
List<Map<String, Object>> menus = new ArrayList<Map<String, Object>>();
if (role != null) {
//查询用户权限
List<MMenu> menuList = this.menuService.queryRoleMenu(role.getrId());
//找出母节点（一级菜单）
List<MMenu> parent = new ArrayList<MMenu>();
for (int i = 0; i < menuList.size(); i ) {
MMenu menu = menuList.get(i);
if (menu.getMpId() == 0) {
parent.add(menu);
}
}
//找出子节点（二级菜单）
List<MMenu> children = null;
Map<String, Object> map = null;
for (MMenu menu : parent) {
map = new HashMap<String, Object>();
map.put("parent", menu);
children = new ArrayList<MMenu>();
for (int i = 0; i < menuList.size(); i ) {
MMenu canUse = menuList.get(i);
if (canUse.getMpId() == menu.getmId()) {
children.add(canUse);
}
}
map.put("children", children);
menus.add(map);
}
}
return R.ok(menus);
}
//HTML
<div id="tree"></div>
//js
$(document).ready(function () {
var userName = ReadCookie('userName');
var roleName = ReadCookie('roleName');
var uId = ReadCookie('userId');
$('#userName').html(userName);
$('#roleName').html(roleName);
//查询用户菜单权限
$.ajax({
type: "POST",
url: "http://localhost:8080/maintain/system/index",
headers: {"Content-Type": "application/json"},
data: JSON.stringify({uId: uId}),
dataType: "json",
success: function (res) {
if (res.code == 200) {
$('#tree').treeview({data: getTree(res.data)});
}
}
});
function getTree(data) {
var tree = [
for (var index in data) {
var parent = {
text: '',
href: '',
nodes: []
};
var p = data[index].parent;
var c = data[index].children;
parent.text = p.mName;
parent.href = '#';
for (var i in c) {
var child = {
text: '',
href: ''
};
if (c[i].mName != '' && c[i].mName != null) {
child.href = c[i].mUrl;
child.text = c[i].mName;
}
if (child.text != '') {
parent.nodes.push(child);
}
}
tree.push(parent);
}
return tree;
}
});效果图：
