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 }]);