版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/vcshcn/article/details/47180227
简单的自定义jquery ui树控件，用于机构人员，支持自动加载下级节点数据
jQuery.widget("xway.Tree", {
_Node: function(data) {
this.id = data.type + "_" +data.id;
this.trid = "tr_" + this.id;
this.label = data.label;
this.parent = null;
this.tree = null;
this.children = new Array();
this.type = data.type;
this.level = 1;
this.loaded = data.type == 'user' ? true : false;
this.expand = false;
this.data = data;
this.table = null;
this.tr = null;
this.getData = function() {
return this.data;
};
this.add = function(node) {
this.children.push(node);
this.loaded = true;
this.expand = true;
node.parent = this;
node.tree = this.tree;
node.table = this.table;
node.level = this.level + 1;
this.tree.setMaxLevel(node.level);
return this;
};
this.getLeftBrother = function() {
if (this.parent == null) {
return null;
}
for (var i=0; i<this.parent.children.length; i++) {
var n = this.parent.children[i];
if (n == this) {
if (i == 0) {
return this.parent;
}
else {
var last_child = this.parent.children[i-1];
while (last_child.children.length > 0) {
last_child = last_child.children.last();
}
return last_child;
}
}
}
};
this.isLastBrother = function() {
if (this.parent == null) {
return true;
}
var n = this.parent.children.length;
if (this == this.parent.children[n-1]) {
return true;
}
return false;
};
this.toHtml = function() {
var leftBrother = this.getLeftBrother() ;
var cur_index = (leftBrother == null ? 0 : leftBrother.tr.rowIndex + 1);
this.tr = this.table.insertRow(cur_index);
this.tr.id = this.trid;
this.GetHtml(this.tr);
return this.tr;
};
this.GetHtml = function(tr) {
var max = this.tree.maxLevel;
var stack = new Array();
var p = this.parent;
if (p != null) {
while ( p != null) {
stack.push(p);
p = p.parent;
}
while (stack.length > 0) {
var node = stack.pop();
var td = document.createElement("td");
td.className = "PrefixTD";
tr.appendChild(td);
}
}
tr.appendChild(this.GetLineNodeIconTD());
tr.appendChild(this.GetNodeIconTD());
var td = tr.insertCell();
td.colSpan = max- this.level + 1;
var text = document.createTextNode( this.label);
td.appendChild(text);
for (var i=0; i<this.children.length; i++) {
this.children[i].toHtml();
}
return tr;
};
this.GetLineNodeIconTD = function() {
var last = this.isLastBrother();
var td = document.createElement("td");
td.id = "td_linenode_" + this.id;
if (last == null) {
return td;
}
if (this.type == 'user') {
td.className = "noneTD";
return td;
}
if (this.type == 'org') {
return td;
}
if (this.loaded == true) {
td.className = this.expand ? "minusTD" : "plusTD";
}
else {
td.className = "plusTD";
}
var node = this;
td.addEventListener("click" , function() {
node.toggle();
});
return td;
};
this.GetNodeIconTD = function() {
var td = document.createElement("td");
if (this.type == 'org') {
td.className = "OrgNode";
}
else if (this.type == 'department') {
td.className = "DepartmentNode";
}
else if (this.type == 'user') {
td.className = "UserNode";
}
return td;
};
this.setVisible = function(bool) {
this.expand = false;
if (this.type == "department") {
this.toggleIcon();
}
document.getElementById(this.trid).style.display = ( bool ? "" : "none");
if (bool == false) {
for (var i=0; i<this.children.length; i++) {
this.children[i].setVisible(bool);
}
}
};
this.updateTextColSpan = function() {
var txtTD = this.tr.cells[this.tr.cells.length-1];
txtTD.colSpan = txtTD.colSpan+1;
for (var i=0; i<this.children.length; i++) {
this.children[i].updateTextColSpan();
}
};
this.load = function() {
this.loaded = true;
var p = this.type == 'org' ? {orgid : this.data.id} : {departmentid : this.data.id};
var node = this;
jQuery.getJSON(this.tree.link, p, function(json) {
for (var i=0; i<json.length; i++) {
var d = json[i];
var n = node.tree.widget.newNode(d);
node.add(n);
n.toHtml();
}
node.tree.Root.updateTextColSpan();
});
};
this.toggleIcon = function() {
var LineNode = document.getElementById("td_linenode_" + this.id);
LineNode.className = this.expand ? "minusTD" : "plusTD";
};
this.toggle = function() {
if (this.loaded) {
this.expand = !this.expand;
this.toggleIcon();
for (var i=0; i<this.children.length; i++) {
var c = this.children[i];
c.setVisible(this.expand);
}
}
else {
this.expand = true;
this.toggleIcon();
this.load();
}
};
},
_Tree : function(widget, _id) {
this.widget = widget;
this.id = _id;
this.maxLevel = 0;
this.link = widget.options.link;
this.OrgFunction = widget.options.OrgFunction;
this.DepartmentFunction = widget.options.DepartmentFunction;
this.UsreFunction = widget.options.UsreFunction;
var table = document.createElement("table");
table.setAttribute("style", "border-collapse: collapse;border-spacing: 0; border:1;width:100%");
document.getElementById(_id).appendChild(table);
this.Root = null;
this.root = function(data) {
this.Root = this.widget.newNode(data);
this.Root.tree = this;
this.Root.table = table;
return this.Root;
};
this.toHtml = function() {
this.Root.toHtml();
};
this.setMaxLevel = function(level) {
if (level > this.maxLevel) {
this.maxLevel = level;
}
};
},
_tree : null,
_initData: function(node, level) {
if (level>0) {
node.load();
for (var i=0; i<node.children.length; i++) {
_initData(node.children[i], level - 1);
}
}
},
newRoot: function(data) {
return this._tree.root(data);
},
getRoot: function() {
return this._tree.Root;
},
getTree: function() {
return this._tree;
},
newNode: function(data) {
return new this._Node(data);
},
display: function() {
this._tree.toHtml();
this._initData(this._tree.Root, this.options.AutoLoadLevel);
},
options: {
link: null,
OrgFunction: null,
DepartmentFunction: null,
UsreFunction: null,
AutoLoadLevel: 1
},
_create: function() {
this._tree = new this._Tree(this, this.element[0].id);
},
_init: function() {
},
_destroy: function() {
},
_setOption: function( key, value ) {
this._superApply( arguments );
}
});
这样使用：
jQuery("#orgtree").Tree({link: 'ListTree.do', AutoLoadLevel: 1});
var root = jQuery("#orgtree").Tree('newRoot', {label:'${user.department.org.name}' , type: 'org', id: ${user.department.org.orgid} });
jQuery("#orgtree").Tree("display");
显示效果如图： 展开前，点击+，自动加载下层节点，并展开
