Custom jquery ui tree control

Custom jquery ui tree control

Simple custom jquery ui tree control for organization staff, supporting automatic loading of lower-level node data

 

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
 
  
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. maxLevel) {this. maxLevel = level ;};}, _ tree: null, _ initData: function (node, level) {if (level> 0) {node. load (); for (var I = 0; I
   
    
 
    
 
    
This method is used as follows:
    
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 );
    
Before the display effect is expanded, click + to automatically load the lower-level nodes and expand