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