自定义的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 ui树控件

相关文章:

你感兴趣的文章:

标签云: