bootstrap-treeview

• #文档
• #使用
  • 1. 引用
  • 2. 定义容器
  • 3. 初始化
  • 4. 效果图
• #自定义函数

#文档

https://www.npmjs.com/package/bootstrap-treeview
https://github.com/jonmiles/bootstrap-treeview

#使用

1. 引用

<!-- Required Stylesheets -->
<link href="bootstrap.css" rel="stylesheet">
 
<!-- Required Javascript -->
<script src="jquery.js"></script>
<script src="bootstrap-treeview.js"></script>

2. 定义容器

<div id="categoryTree"></div>

3. 初始化

var expandedNode=null;

$(function() {
    //
    searchCategoryNodes("");
});

function loadNode(data){
    var nodes = getNodeArray(data);
    for(var i = 0 ; i < nodes.length ; i++){
        $("#categoryTree").treeview("addNode", [expandedNode.nodeId, { node: nodes[i]}]);
    }
}

function initCategoryTree(data){
    var me = this;
    $('#categoryTree').treeview({
        levels : 1,
        color : "#515151",
        showBorder: false,
        data : getNodeArray(data),
        onhoverColor:"#EDEDED",
        onNodeSelected:function(event,data){
            
        },
        onNodeExpanded:function(event,data){

            if(data.nodes.length>0){ // 如果存在子节点，删除重新查询
                $("#categoryTree").treeview("deleteChildrenNode", data.nodeId);
            }
            me.expandedNode = data;
            var nodeId = data.nodeRef.replace("workspace://SpacesStore/","");
            alert(data.path);
            me.searchCategoryNodes(data.path);
        },
        onNodeCollapsed:function(event,data){
            
        }
    });
}

function searchCategoryNodes(path){
    
    var me = this;
    $.ajax({
        url:getBasePath()+"/file/searchCategoryNodes",
        type:'POST', //GET
        //async:true,    //或false,是否异步
        data:{
            path:path
        },
        //contentType: "application/json",
        dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
        success:function(data,textStatus,jqXHR){
            if(path == ""){
                initCategoryTree(data);
            }else{
                loadNode(data);
            }
        },
        error:function(xhr,textStatus){
            //error
        },
    });    
}

function getNodePath(nodeName){
    var path = "";
    if (this.expandedNode != null) {
        path = this.expandedNode.path +"/"+nodeName;
    }else{
        path = nodeName;
    }
    return path;
}
function getNodeArray(data){
    
    var array = new Array(),node;
    for (var i = 0; i < data.length; i++) {
        
        var path = getNodePath(data[i].path);
        
        node = {
            nodeRef:data[i].nodeRef,
            text : data[i].name,
            path :getNodePath(data[i].name),
            expandIcon:"glyphicon glyphicon-plus",
            collapseIcon:"glyphicon glyphicon-minus",
            /*"color":"red"*/
            nodes:[] //默认使节点都显示可expandicon,不设置为空。没有子节点不显示expandicon
            
        };
        array.push(node);
    }
    return array;
}
function getBasePath() {
    var location = (window.location + '').split('/');
    var basePath = location[0] + '//' + location[2] + '/' + location[3];
    return basePath;
}

4. 效果图

#自定义函数

示例：自定义addNode和deleteChildrenNode方法

1. 在Tree主函数return添加以下代码_

// add and delete Children Node
addNode : $.proxy(this.addNode, this),
deleteChildrenNode : $.proxy(this.deleteChildrenNode, this),

2. 添加Tree的prototype方法

/**
 * 给节点添加子节点
 * 
 * @param {Object|Number}
 *            identifiers - A valid node, node id or array of node
 *            identifiers
 * @param {optional
 *            Object} options.node;
 */
Tree.prototype.addNode = function(identifiers, options) {

    this.forEachIdentifier(identifiers, options, $.proxy(
            function(node, options) {
                this.setAddNode(node, options);
            }, this));
    this.nodes = [];//重置nodes为空，避免重复数据添加。
    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);
    }
    ;
};

/**
 * 删除子节点 置空子节点 刷新节点
 * 
 * @param node
 * @param options
 */
Tree.prototype.deleteChildrenNode = function(identifiers, options) {
    this.forEachIdentifier(identifiers, options, $.proxy(
            function(node, options) {
                if (node.nodes != null) {
                    node.nodes = null;
                    this.setInitialStates({
                        nodes : this.tree
                    }, 0);
                    this.render();
                }
            }, this));
};