bootstrap的treeview使用

treeview的增删节点：http://www.cnblogs.com/cpcpc/p/7217926.html

treeview的功能讲解：http://www.jq22.com/jquery-info10461

1、treeview本身不支持动态添加节点、删除节点。网上已经有人修改了源码，增加添加节点、删除节点功能。但是添加根节点或者删除根节点，js貌似会报错。所以本人控制了根节点不能删除。

在treeview.js的Tree的return方法添加以下代码

//添加节点
addNode: $.proxy(this.addNode, this),
//编辑节点
editNode: $.proxy(this.editNode, this),
//删除节点
deleteNode: $.proxy(this.deleteNode, this),

再在treeview.js文件的尾部有很多自定义方法，在这里添加Tree的自定义方法

Tree.prototype.addNode = function(identifiers, options) {
this.forEachIdentifier(identifiers,options,
$.proxy(function(node, options) {
this.setAddNode(node, options);
},
this));

this.setInitialStates({ nodes: this.tree }, 0);
this.render();
}

Tree.prototype.setAddNode = function(node, options) {
if (node.nodes == null) node.nodes = [];
if (options.node) {
node.nodes.push(options.node);
};
};

Tree.prototype.editNode = function (identifiers, options) {
this.forEachIdentifier(identifiers, options, $.proxy(function (node, options) {
this.setEditNode(node, options);
}, this));
this.setInitialStates({ nodes: this.tree }, 0);
this.render();
}

Tree.prototype.setEditNode = function (node, options) {
if (options) {
$.extend(node, options);
};
};

Tree.prototype.deleteNode = function (identifiers, options) {
this.forEachIdentifier(identifiers, options, $.proxy(function (node, options) {
var parentNode = this.getParent(node);
this.setDeleteNode(parentNode, node, options);
}, this));
};

Tree.prototype.setDeleteNode = function (node, deletenode, options) {
if (node.nodes != null) {
for (var i = node.nodes.length - 1; i >= 0; i--) {
var mynode = node.nodes[i];
if (mynode.id === deletenode.id) {
node.nodes.splice(i, 1);
}
}
this.setInitialStates({ nodes: this.tree }, 0);
this.render();
}
};

2、构建treeview的数据源

function getTree() {
var data = [
{
text: "p1",
id: '0',
nodes: [
{ text: "p1-1", id: '1' },
{ text: "p1-2", id: '2' },
{ text: "p1-3", id: '3' },
{
text: "p1-4",
id: '4',
nodes: [
{
text: 'p1-1-1',
id: '5'
}
]
}
]
}
];
return data;
}

数据源是类似上述的数据格式。服务端需要返回该格式的json数据

先构建node类

package dto;

import java.util.List;

public class NodeDto  implements java.io.Serializable {
/**
* id
*/
private long id;
/**
* 节点名称
*/
private String text;
/**
* 子节点
*/
private List<NodeDto> nodes;
public long getId() {
return id;
}
public void setId(long id) {
this.id = id;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public List<NodeDto> getNodes() {
return nodes;
}
public void setNodes(List<NodeDto> nodes) {
this.nodes = nodes;
}
}

递归获取子节点，自己按个人写法去领悟如何递归

private List<NodeDto> getChildNode(Session session ,long parentId) throws Exception{
List<NodeDto> rootList = null;
//根据父Id获取子节点
List<Permission> nodelist = getEntityList(session,Restrictions.eq("parentId", parentId),Permission.class);
if(nodelist!=null&&nodelist.size()>0){
rootList = new ArrayList<NodeDto>();
NodeDto node = null;
for(Permission permiss : nodelist){
node = new NodeDto();
node.setId(permiss.getId());
node.setText(permiss.getModuleName());
node.setNodes(getChildNode(session,permiss.getId()));
rootList.add(node);
}
}
return rootList;
}

3、加载treeview控件

<div id="tree"></div>

function loadTree(data){
$("#tree")
.treeview({
data: data,
icon: "glyphicon glyphicon-stop",
selectedIcon: "glyphicon glyphicon-stop",
collapseIcon: "glyphicon glyphicon-minus",
expandIcon: "glyphicon glyphicon-plus",
color: "#000000",
backColor: "#FFFFFF",
showIcon: true,
showCheckbox: false,
onhoverColor: "#E8E8E8",
showBorder: true,
showTags: true,
highlightSelected: true,
highlightSearchResults: false,
selectedBackColor: "#8D9CAA",
levels: 3,
tags: ['available'],
onNodeSelected: function(event, data) {
if (data.id == undefined || data.id == null) {
return;
}
$("input[name='parentId']").val(data.id);
$("input[name='parentNodeId']").val(data.nodeId);
},
onNodeExpanded:
function(event, data) {
$.ajax({
type: "Post",
url: "/Bootstrap/GetExpandJson?id=" + data.id,
dataType: "json",
success: function (result) {
for (var index = 0; index < result.length; index++) {
var item = result[index];
$("#tree1")
.treeview("addNode",
[
data.nodeId,
{ node: { text: item.text, id: item.id }, silent: true }
]);
}
}
});
}
});
}

4、增删节点
添加节点

var addNode =[parentNodeId, { node: { id:10.id, text: "子节点", href: "001005" } }];
$("#tree").treeview("addNode", addNode);

parentNodeId，指定添加节点的父节点nodeId

删除节点

$("#tree").treeview("deleteNode", [nodeId, { silent: true }]);