1: /**
2: Javascript标准库:Table转换成树形Table
3: 前置条件：需要包含prototype.js文件
4: 调用函数table2tree即可生成树形表格
5: 函数调用协议：void table2tree(config)
6: 参数config是一个类，其中属性有
7: tableName ：表格的名称，HTML代码中id指定
8: rootId ：树形的根ID，业务代码，例如0标识省分
9: treeId ：TR上面的标识树节点当前ID的属性，默认为treeId
10: treeParentId ：TR上面标识树节点的父亲ID的属性，默认为treeParentId
11: imageRoot ：使用的图片所在的目录，目录中的图片命名有强制约定，
12: empty.gif空，folder.gif目录关闭状态folderopen.gif目录打开状态
13: checkMode ：是否使用JS生成checkBox，默认为-1。
14: 值0：只生成页节点的checkBox，
15: 值1：生成页节点和目录节点的CheckBox，但是不联动选择，
16: 值2：生成页节点和目录节点的CheckBox，联动选择。
17: showLine ：是否显示树形的前面的线条，默认为false
18: columnIndex ：树形显示在表格中的第几列，从0开始，默认为0，
19: 如果输入的数据大于表格最大列数，自动设置为0.
20: collapseOnLabel ：是否开启在目录节点上点击文本信息自动对树进行展开和关闭的功能。
21: expandLevel :展开的层次深度
22: oncheck:函数，当切换到
23: 调用实例：
24: window.Table2Tree.create({tableName:"TestTableTree",rootId:"0",treeId:"xid",treeParentId:"pid"}); 25: **/
26: if(null==window.Table2Tree)
27: { 28: window.Table2Tree=function(config)
29: { 30: if(null==config||null==config.tableName||null==config.rootId)
31: { 32: alert("JavaScript:table2Tree 函数调用错误"); 33: return;
34: }
35: this.table=$(config.tableName);
36: if(null==this.table||null==this.table.tBodies||this.table.tBodies.length<1)
37: { 38: alert("JavaScript:table2Tree 错误，找不到指定的Table") 39: return;
40: }
41: this.config=config==null?[]:config;
42: this.config.columnIndex=this.config.columnIndex&&this.config.columnIndex>=0?this.config.columnIndex:0;
43: this.config.collapseOnLabel=this.config.collapseOnLabel==null?true:this.config.collapseOnLabel;
44: this.build=function()
45: { 46: this.__buildTreeNodes(this.config.rootId);
47: }
48: this._buildImage=function(imgsrc,onclickf)
49: { 50: imgsrc=this.config.imageRoot+imgsrc;
51: var ret= window.buildElement("img", 52: {src:imgsrc,treeDynImage:(onclickf!=null?"1":null)}, 53: null,null,
54: onclickf==null?null:{onclick:onclickf}); 55: return ret;
56: }
57: }
58: window.Table2Tree.icons=
59: { 60: vect_line:"img-vert-line.gif"
61: ,empty:"empty.gif"
62: ,branch_end:"img-branch-end.gif"
63: ,branch_cont:"img-branch-cont.gif"
64: ,puls_end:"img-plus-end.gif"
65: ,puls_cont:"img-plus-cont.gif"
66: ,folderopen:"folderopen.gif"
67: ,folder:"folder.gif"
68: ,page:"page.gif"
69: ,plus:"plus.gif"
70: }
71: window.Table2Tree.prototype.__buildTreeNodes=function(parentTreeIDValue,treeDeep,lastNodeArray)
72: { 73: var pidsubsAll=this.__getSubNodes(parentTreeIDValue);
74: if(pidsubsAll==null||pidsubsAll.length<1){return;} 75: treeDeep=treeDeep==null?0:treeDeep;
76: lastNodeArray=null==lastNodeArray?[]:lastNodeArray;
77: var pidsubs=[];var pidsubs_Pages=[];
78: for(var n=0;n<pidsubsAll.length;n++)
79: { 80: var row=pidsubsAll[n];
81: if(this.__getSubNodes(row.getAttribute(this.config.treeId)).length<1)
82: { 83: pidsubs_Pages.push(row);
84: }
85: else
86: { 87: row.setAttribute("isTreeFolder",true); 88: pidsubs.push(row);
89: }
90: }
91: var folderCount=pidsubs.length;
92: if(pidsubs_Pages.length>0)
93: { 94: pidsubs.pushArray(pidsubs_Pages);
95: }
96: for(var nTreeNode=0;nTreeNode<pidsubs.length;nTreeNode++)
97: { 98: var isLastTreeNode=(nTreeNode==pidsubs.length-1);//是否是最后一个
99: lastNodeArray[treeDeep]=isLastTreeNode;
100: var row=pidsubs[nTreeNode];
101: var aryTds=row.cells;
102: var td=this.config.columnIndex<aryTds.length?aryTds[this.config.columnIndex]:aryTds[0];
103: var bFolder=row.getAttribute("isTreeFolder"); 104: row.treeparameter_toggle=treeDeep>this.config.expandLevel-1?0:1;
105: var isExpand=row.treeparameter_toggle!=0;
106: if(treeDeep>0 &&treeDeep>this.config.expandLevel){row.style.display="none";} 107: this.table.tBodies[0].appendChild(row);
108: var isContainImage=aryTds.length>0&&aryTds[0].children&&aryTds[0].children.length>0
109: &&null!=aryTds[0].children[0].tagName&&aryTds[0].children[0].tagName.toLowerCase()=="img";
110: var ary=[];
111: for(var x=0;x<treeDeep;x++)
112: { 113: if(this.config.showLine)
114: { 115: if(!lastNodeArray[x]){ary.push(this._buildImage(window.Table2Tree.icons.vect_line));} 116: else{ary.push(this._buildImage(window.Table2Tree.icons.empty));} 117: if(x>=1){ary.push(this._buildImage(window.Table2Tree.icons.empty));} 118: }
119: else
120: { 121: ary.push(this._buildImage(window.Table2Tree.icons.empty));
122: }
123: }
124: if(this.config.showLine && treeDeep>0)
125: { 126: ary.push(this._buildImage((this.config.showLine?(isLastTreeNode?window.Table2Tree.icons.branch_end:window.Table2Tree.icons.branch_cont):window.Table2Tree.icons.empty)));
127: }
128: var myInstance=this;
129: if(bFolder)
130: { 131: var pImage=window.Table2Tree.icons.plus;
132: if(treeDeep==0 && this.config.showLine)
133: { 134: pImage=isLastTreeNode?window.Table2Tree.icons.puls_end:window.Table2Tree.icons.puls_cont;
135: }
136: if(isExpand)
137: { 138: pImage=pImage.replace("plus","minus"); 139: }
140: ary.push(this._buildImage(pImage,function(){window.Table2Tree.__collapseTreeNode(myInstance)})); 141: if(isContainImage==false)
142: { 143: ary.push(this._buildImage((isExpand?window.Table2Tree.icons.folderopen:window.Table2Tree.icons.folder),function(){window.Table2Tree.__collapseTreeNode(myInstance)})); 144: }
145: if(null!=this.config.checkMode && this.config.checkMode>=1)
146: { 147: if(this.config.checkMode>1)
148: { 149: ary.push(window.buildElement("input",{type:"checkbox"},null,null,{onclick:function(){window.Table2Tree.__cascadeCheckedNodes(event,myInstance)}})); 150: }
151: else
152: { 153: ary.push(window.buildElement("input",{type:"checkbox"},null,null,{onclick:function(){window.Table2Tree.__onCheckBoxClick(myInstance);}})); 154: }
155: }
156: if(this.config.collapseOnLabel)
157: { 158: var span=window.buildElement("div",null,{display:"inline"},null,{onclick:function(){window.Table2Tree.__collapseTreeNode(myInstance)}}); 159: while(td.childNodes && td.childNodes.length>0)
160: { 161: span.appendChild(td.childNodes[0])
162: }
163: td.appendChild(span);
164: }
165: this.__appendAll(td,ary);
166: }
167: else//node.not a folder.
168: { 169: if(this.config.showLine==false){ary.push(this._buildImage(window.Table2Tree.icons.empty));} 170: if(isContainImage==false){ary.push(this._buildImage(window.Table2Tree.icons.page));} 171: if(null!=this.config.checkMode && this.config.checkMode>=0)
172: { 173: ary.push(window.buildElement("input",{type:"checkbox"},null,null,{onclick:function(){window.Table2Tree.__onCheckBoxClick(myInstance);}})); 174: var span=document.buildElement("div",null,{display:"inline"},null,{onclick:window.Table2Tree.__labelClicked}); 175: while(td.childNodes && td.childNodes.length>0)
176: { 177: span.appendChild(td.childNodes[0])
178: }
179: td.appendChild(span);
180: }
181: this.__appendAll(td,ary);
182: }
183: td.style.border="0";
184: if(null==td.style.cursor||td.style.cursor==""){td.style.cursor="pointer";} 185: ary=null;
186: if(window.IE)CollectGarbage();
187: if(bFolder && row.getAttribute(this.config.treeParentId)!=row.getAttribute(this.config.treeId))
188: { 189: this.__buildTreeNodes(row.getAttribute(this.config.treeId),treeDeep+1,lastNodeArray);
190: if(window.IE)CollectGarbage();
191: }
192: }
193: pidsubs=null;pidsubs_Pages=null;pidsubsAll=null;if(window.IE)CollectGarbage();
194: }
195:
196: window.Table2Tree.prototype.m_cacheNodeByParentKey=null;
197: window.Table2Tree.prototype.summary="";
198: window.Table2Tree.prototype.__getSubNodes=function(parentValue)
199: