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

基于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;
}
c42a
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 += " "+n.name+" ";
}
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 += " "+n.name+" ";
}
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,"");
});