自定义的jquery ui树控件

简单的自定义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");

显示效果如图： 展开前，点击+，自动加载下层节点，并展开