基于treeview组件的通用节点树封装

基于treeview组件的通用节点树封装

最近一直在研究实现菜单树，表格树之类的tree组件，发现treeview使用起来简单，工具提供的也足够丰富，于是基于它再封装一版通用树插件,效果如下：

附上代码，仅供参考：

function TreeProto(selector) {
    this.selector = selector;
    this.content = $(selector);
    this.data= null;// 数据源
    this.backColor="#F5F5F5";      //背景颜色
    this.borderColor="#DBDBDB";    //边框颜色
    this.color="#666666";       //全局字体颜色
  //this.checkedIcon="glyphicon glyphicon-ok";    //选中时候的复选框图标
    this.emptyIcon="";          //设置列表树中没有子节点的节点的图标
    this.highlightSelected= false;    //是否高亮选中
    this.onhoverColor="#E5E5E5";        //设置用户 鼠标滑过 时 树节点 背景颜色。    
    this.multiSelect= false;    //多选
    this.nodeIcon="";   //设置所有列表树节点上的默认图标
    this.showCheckbox= true;   //是否显示复选框
    this.emptyIcon= '';    //没有子节点的节点图标
    this.onNodeChecked=null;  
    this.onNodeUnchecked=null;
    this.showTags=true; //是否在每个节点右边显示tags标签。tags值必须在每个列表树的data结构中给出
}

//加载树
TreeProto.prototype.initTree = function(url, param,sesxhopt,treeviewoption) {
    //绑定选中方法，选中子节点同时选中父节点，选中父节点同时选中所有子节点
    var currentObj = this;
    var nodeCheckedSilent = false;
    function nodeChecked (event, node){
        if(nodeCheckedSilent){
            return;
        }
        nodeCheckedSilent = true;
        currentObj.checkAllParent(node,currentObj.selector);
        currentObj.checkAllSon(node,currentObj.selector);
        nodeCheckedSilent = false;
    }
    //绑定取消选中方法，取消所有子节点同时取消父节点，取消父节点同时取消所有子节点
    var nodeUncheckedSilent = false;
    function nodeUnchecked  (event, node){
        if(nodeUncheckedSilent)
            return;
        nodeUncheckedSilent = true;
        currentObj.uncheckAllParent(node,currentObj.selector);
        currentObj.uncheckAllSon(node,currentObj.selector);
        nodeUncheckedSilent = false;
    }
    this.onNodeChecked = nodeChecked;
    this.onNodeUnchecked=nodeUnchecked;
    $.extend(sesxhopt,treeviewoption);
    $.extend(this,sesxhopt);
    var opt = {
            data: this.data,// 数据源
            backColor:this.backColor,      //背景颜色
            borderColor:this.borderColor,    //边框颜色
            color:this.color,       //全局字体颜色
          //checkedIcon:"glyphicon glyphicon-ok",    //选中时候的复选框图标
            emptyIcon:this.emptyIcon,       //设置列表树中没有子节点的节点的图标
            highlightSelected: this.highlightSelected,    //是否高亮选中
            onhoverColor:this.onhoverColor,     //设置用户 鼠标滑过 时 树节点 背景颜色。    
            multiSelect: this.multiSelect,    //多选
            nodeIcon:this.nodeIcon,     //设置所有列表树节点上的默认图标
            showCheckbox: this.showCheckbox,   //是否显示复选框
            emptyIcon: this.emptyIcon,    //没有子节点的节点图标
            onNodeChecked:this.onNodeChecked ,  
            onNodeUnchecked:this.onNodeUnchecked,
            showTags:this.showTags //是否在每个节点右边显示tags标签。tags值必须在每个列表树的data结构中给出
        }
    if(typeof url === "string"){
        sesxhAjax.AjaxToDo(url,param,function(d){
            opt.data = d;
            this.data = d;
            currentObj.content.treeview(opt);
        });
    }else{
        opt.data = url;
        this.data = url;
        currentObj.content.treeview(opt);
    }

},

选中全部父节点
TreeProto.prototype.checkAllParent = function(node, selector) {
    this.content.treeview('checkNode', node.nodeId, {
        silent : true
    });
    var parentNode = this.content.treeview('getParent', node.nodeId);
    if (!("nodeId" in parentNode)) {
        return;
    } else {
        this.checkAllParent(parentNode, selector);
    }
},
//取消全部父节点
TreeProto.prototype.uncheckAllParent = function(node, selector) {
    this.content.treeview('uncheckNode', node.nodeId, {
        silent : true
    });
    var siblings = this.content.treeview('getSiblings', node.nodeId);
    var parentNode = this.content.treeview('getParent', node.nodeId);
    if (!("nodeId" in parentNode)) {
        return;
    }
    var isAllUnchecked = true; //是否全部没选中
    for ( var i in siblings) {
        if (siblings[i].state.checked) {
            isAllUnchecked = false;
            break;
        }
    }
    if (isAllUnchecked) {
        this.uncheckAllParent(parentNode, selector);
    }
},
//级联选中所有子节点
TreeProto.prototype.checkAllSon = function(node, selector) {
    this.content.treeview('checkNode', node.nodeId, {
        silent : true
    });
    if (node.nodes != null && node.nodes.length > 0) {
        for ( var i in node.nodes) {
            this.checkAllSon(node.nodes[i], selector);
        }
    }
},
//级联取消所有子节点
TreeProto.prototype.uncheckAllSon = function(node, selector) {
    this.content.treeview('uncheckNode', node.nodeId, {
        silent : true
    });
    if (node.nodes != null && node.nodes.length > 0) {
        for ( var i in node.nodes) {
            this.uncheckAllSon(node.nodes[i], selector);
        }
    }
},
//绑定全选方法
TreeProto.prototype.selectAll = function(selector) {
    this.content.treeview('checkAll', {
        silent : true
    });
},
//绑定重置方法
TreeProto.prototype.resetAll = function(selector) {
    this.content.treeview('uncheckAll', {
        silent : true
    });
},
//绑定选中
TreeProto.prototype.checkNode = function(selector) {
    this.content.treeview('checkNode', [ nodeId, { silent: true } ]);

},
//添加操作节点
TreeProto.prototype.bindRowOperation = function(data, json) {
    if(!data || !json) return ;
    var _this = this;
    $.each(data, function(i, item) {
        item.tags = [];
        var items = JSON.stringify(item).replace(/"/g, ''');

        $.each(json, function(j, k) {
            if(undefined == k.pkey){
                //全部都有的
                $.each(k.option, function(m, n) {

                    var str = "<a href='javascript:void(0)' ";
                    if(n.fn){
                        str += "onclick='("+n.fn+")("+items+")'";
                    }
                    str += "><i class='glyphicon ";
                    if(n.icon){
                        str += n.icon;
                    }
                    str += "'>";
                    if(n.name){
                        str += "&nbsp;"+n.name+"&nbsp";
                    }
                    str += "</li></a>";
                    item.tags.push(str);
                });
            }else if(item[k.pkey] == k.value){
                //针对此id单独设置的
                $.each(k.option, function(m, n) {

                    var str = "<a id='operation"+ k.value + m +"' href='javascript:void(0)' ";
                    if(n.fn){
                        str += "onclick='("+n.fn+")("+items+")'";
                    }
                    str += "><i class='glyphicon ";
                    if(n.icon){
                        str += n.icon;
                    }
                    str += "'>";
                    if(n.name){
                        str += "&nbsp;"+n.name+"&nbsp";
                    }
                    str += "</li></a>";
                    item.tags.push(str);
                });
            }
        });
        if (item.nodes) {
            _this.bindRowOperation(item.nodes, json);
        }
    })

    return data;
},
//获取nodeid行的数据
TreeProto.prototype.getRowValue = function(nodeId) {
    var val =  this.content.treeview('getNode',nodeId);
    return val;
},
//获取全部选中
TreeProto.prototype.getChecked = function() {
    var val =  this.content.treeview('getChecked');
    return val;
},
TreeProto.prototype.remove = function() {
    var val =  this.content.treeview('remove');
}
var $Tree = function(selector) {
    return new TreeProto(selector);
}

$Tree.export = function(fn) {
    jQuery.extend(TreeProto.prototype, fn);
}

//调用代码如下：
var stree = $Tree("#tree"); //构建树对象
    var param = "";
    $.post("${app}/sysrole/queryRoleFunc.do",param,function(d){
        var a = stree.bindRowOperation(d,
                [{
                    option:[
                        {
                            name:"详情",
                            icon:"glyphicon-pencil",
                            fn:function(row){
                                alert(row.funcid)
                            }
                        }
                    ]
                },{
                    pkey:"text",
                    value:"系统管理",
                    option:[
                        {
                            name:"添加",
                            fn:function(row){
                                alert(row.funcid)
                            }
                        }
                    ]
                }]);
        stree.initTree(a,"");
    });