我的js树

 仅限于 ie系列浏览器( chromium 不可以)

js部分

  1          //节点属性
  2          function Node()
  3          {
  4              var nodeID;
  5              var subAreaId;
  6              var nodeName = '';
  7              var nodeDeep = 0;
  8              var NodePic;
  9              var NodeTarget;
 10              var NodeUrl;
 11              var IsFirst = false;
 12              var IsLast = false;
 13              var IsRoot = false;
 14              var childNodeList = new Array();
 15              var paraentNode = undefined;
 16          }
 17 
 18          Tree = function ()
 19          {
 20              this.id = null;
 21              this.initialize.apply(this, arguments);
 22          }
 23          //树
 24          Tree.prototype =
 25 {
 26     initialize: function (config)
 27     {
 28         if (config.IsShowCheck != undefined)
 29         {
 30             this.IsShowCheck = config.IsShowCheck;
 31         }
 32         if (config.IsShowCheck != undefined)
 33         {
 34             this.IsShowCheck = config.IsShowCheck;
 35         }
 36         if (config.IsShowCheck != undefined)
 37         {
 38             this.IsShowCheck = config.IsShowCheck;
 39         }
 40         if (config.IsExpand != undefined)
 41         {
 42             this.IsExpand = config.IsExpand;
 43         }
 44         this.id = config.ClientID;
 45 
 46         this.Data = config.treeSource;
 47     },
 48     RootNode: new Node(),
 49     Data: null,
 50     IsShowCheck: true,
 51     IsShowLine: true,
 52     IsShowPic: true,
 53     IsExpand: false,
 54     Style: { NodeHeight: 20, NodeWidth: 20 },
 55     SetbgImage: function (img, src)
 56     {
 57         img.style.backgroundImage = "url('" + src + "')";
 58         img.style.backgroundRepeat = "no-repeat";
 59     },
 60     GetbgImageUrl: function (img) { return img.style.backgroundImage; },
 61     NodePic:
 62     {
 63         Home: "Images/Tree/home.gif",
 64         TrunkNode:
 65                     {
 66                         ftv2folderopen: "Images/Tree/ftv2folderopen.gif",
 67                         ftv2mnode: "Images/Tree/ftv2mnode.gif",
 68                         ftv2pnode: "Images/Tree/ftv2pnode.gif",
 69                         ftv2nodee: "Images/Tree/ftv2nodee.gif",
 70                         ftv2mlastnode: "Images/Tree/ftv2mlastnode.gif",
 71                         ftv2plastnode: "Images/Tree/ftv2plastnode.gif",
 72                         ftv2lastnodee: "Images/Tree/ftv2lastnodee.gif",
 73                         ftv2plastnode: "Images/Tree/ftv2plastnode.gif"
 74                     },
 75         LeafNode: { ftv2folderopen: "Images/ftv2folderopen.gif" },
 76         Lines: { Blank: "Images/Tree/ftv2blank.gif", vertline: "Images/Tree/ftv2vertlinee.gif" }
 77     },
 78     GetDeep: function (node, deep)
 79     {
 80         if (node.paraentNode != undefined)
 81         {
 82             deep++;
 83             return this.GetDeep(node.paraentNode, deep);
 84         }
 85         else
 86         {
 87             return deep;
 88         }
 89     },
 90     addNode: function (rNode, node)
 91     {
 92         rNode.childNodeList.push(node);
 93         node.paraentNode = rNode;
 94         node.IsLast = true;
 95         if (rNode.childNodeList.length > 1)
 96         {
 97             rNode.childNodeList[rNode.childNodeList.length - 2].IsLast = false;
 98         }
 99     },
100     CreateTreeNode: function (n)
101     {
102         for (var i = 0; i < this.Data.length; i++)
103         {
104             if (this.Data[i] != undefined && this.Data[i].PID == n.id)
105             {
106                 var node = new Node();
107                 node.id = this.Data[i].ID;
108                 node.childNodeList = new Array();
109                 node.nodeName = this.Data[i].Name;
110                 node.nodeID = this.Data[i].ID;
111                 node.NodeUrl = "http://www.baidu.com";
112                 node.childNodeList = new Array();
113                 this.addNode(n, node);
114                 this.CreateTreeNode(node);
115             }
116         }
117         return n;
118     },
119     CreateTree: function ()
120     {
121         this.RootNode.IsRoot = true;
122         this.RootNode.id = 0;
123         this.RootNode.subAreaId = this.id + "subRoot";
124         this.RootNode.nodeName = this.Data[0].Name;
125         this.RootNode.childNodeList = new Array();
126         var nodes = this.CreateTreeNode(this.RootNode);
127         this.DrawTree(nodes);
128     },
129     GetParaentNodeList: function (arr, n)
130     {
131         if (n.paraentNode != undefined)
132         {
133             arr.push(n.paraentNode);
134             this.GetParaentNodeList(arr, n.paraentNode);
135         }
136     },
137     //********画树开始**********
138     DrawTree: function (n)
139     {
140         //画根节点
141         if (n.IsRoot)
142         {
143             var RootNameId = this.id + "RootName";
144             document.getElementById(RootNameId).innerHTML = n.nodeName;
145             var RootImgId = this.id + "RootImg";
146             var RootImg = document.getElementById(RootImgId);
147             this.SetbgImage(RootImg, this.NodePic.Home);
148             RootImg.style.display = "inline-block";
149             RootImg.style.width = this.Style.NodeWidth;
150             RootImg.style.height = this.Style.NodeHeight;
151         }
152 
153         //当前节点同级兄弟节点列表
154         var childNodes = n.childNodeList;
155         for (var i = 0; i < childNodes.length; i++)
156         {
157             var node = childNodes[i];
158             //当前节点的子节点
159             var nodesubList = node.childNodeList;
160             var divNode = document.createElement("div");
161             divNode.id = this.id + "div" + node.nodeID;
162             var subDivNode = document.createElement("div");
163             subDivNode.id = this.id + "subDiv" + node.nodeID;
164             node.subAreaId = subDivNode.id;
165 
166             //当前节点的父节点链
167             var pNodeList = new Array();
168 
169             this.GetParaentNodeList(pNodeList, node);
170 
171             //画深度空白或线
172             for (var j = pNodeList.length - 1; j >= 0; j--)
173             {
174                 var line = document.createElement("span");
175                 line.id = this.id + "Line" + i + "_" + j + "_" + pNodeList[j].nodeName;
176                 this.SetbgImage(line, this.NodePic.Lines.vertline);
177                 if (pNodeList[j].IsRoot || pNodeList[j].IsLast)
178                 {
179                     this.SetbgImage(line, this.NodePic.Lines.Blank);
180                 }
181                 line.style.width = this.Style.NodeWidth;
182                 line.style.height = this.Style.NodeHeight;
183                 line.style.display = "inline-block";
184                 divNode.appendChild(line);
185             }
186 
187             //***************加号还是减号Start****************
188             var imgNode = document.createElement("span");
189             imgNode.id = this.id + "imgNode" + node.nodeID;
190             imgNode.style.display = "inline-block";
191             imgNode.style.width = this.Style.NodeWidth;
192             imgNode.style.height = this.Style.NodeHeight;
193             //判断节点图片样式
194 
195             //第一个节点 并且有子节点
196             if (i == 0)
197             {
198                 if (childNodes.length > 0)
199                 {
200                     if (this.IsExpand)
201                     {
202                         this.SetbgImage(imgNode, this.NodePic.TrunkNode.ftv2mnode);
203                     }
204                     else
205                     {
206                         this.SetbgImage(imgNode, this.NodePic.TrunkNode.ftv2pnode);
207                     }
208 
209                 }
210                 else
211                 {
212                     this.SetbgImage(imgNode, this.NodePic.TrunkNode.ftv2nodee);
213                 }
214             }
215 
216             //中间节点
217             if (nodesubList.length > 0)
218             {
219                 if (this.IsExpand)
220                 {
221                     this.SetbgImage(imgNode, this.NodePic.TrunkNode.ftv2mnode);
222                 }
223                 else
224                 {
225                     this.SetbgImage(imgNode, this.NodePic.TrunkNode.ftv2pnode);
226                 }
227 
228             }
229             else
230             {
231                 this.SetbgImage(imgNode, this.NodePic.TrunkNode.ftv2nodee);
232             }
233 
234             //最后一个节点 
235             if (i == childNodes.length - 1)
236             {
237                 //并且有子节点
238                 if (nodesubList.length > 0)
239                 {
240                     //是否全部展开
241                     if (this.IsExpand)
242                     {
243                         this.SetbgImage(imgNode, this.NodePic.TrunkNode.ftv2mlastnode);
244                     }
245                     else
246                     {
247                         this.SetbgImage(imgNode, this.NodePic.TrunkNode.ftv2plastnode);
248                     }
249                 }
250                 else
251                 {
252                     this.SetbgImage(imgNode, this.NodePic.TrunkNode.ftv2lastnodee);
253                 }
254 
255             }
256             imgNode.style.backgroundRepeat = "no-repeat";
257             //***************加号还是减号End****************
258 
259             //***************加减号点击事件Start****************
260             imgNode.onclick = function ()
261             {
262                 var e = event || window.event;
263                 var obj = document.getElementById(e.srcElement.id);
264                 //中间加号
265                 if (Tree.prototype.GetbgImageUrl(obj).indexOf(Tree.prototype.NodePic.TrunkNode.ftv2pnode) > -1)
266                 {
267                     Tree.prototype.SetbgImage(obj, Tree.prototype.NodePic.TrunkNode.ftv2mnode);
268                 }
269                 //中间减号
270                 else if (Tree.prototype.GetbgImageUrl(obj).indexOf(Tree.prototype.NodePic.TrunkNode.ftv2mnode) > -1)
271                 {
272                     Tree.prototype.SetbgImage(obj, Tree.prototype.NodePic.TrunkNode.ftv2pnode);
273                 }
274                 //最后一个加号
275                 else if (Tree.prototype.GetbgImageUrl(obj).indexOf(Tree.prototype.NodePic.TrunkNode.ftv2plastnode) > -1)
276                 {
277                     Tree.prototype.SetbgImage(obj, Tree.prototype.NodePic.TrunkNode.ftv2mlastnode);
278                 }
279                 //最后一个减号
280                 else if (Tree.prototype.GetbgImageUrl(obj).indexOf(Tree.prototype.NodePic.TrunkNode.ftv2mlastnode) > -1)
281                 {
282                     Tree.prototype.SetbgImage(obj, Tree.prototype.NodePic.TrunkNode.ftv2plastnode);
283                 }
284                 //切换是否显示显示子节点
285                 var sdnID = e.srcElement.id.replace('imgNode', 'subDiv');
286                 var sdn = document.getElementById(sdnID);
287                 sdn.style.display == "" ? sdn.style.display = "none" : sdn.style.display = "";
288             }
289             //***************加减号点击事件End****************
290 
291             //添加加减号
292             divNode.appendChild(imgNode);
293 
294             //是否显示复选框
295             if (this.IsShowCheck)
296             {
297                 var cb = document.createElement('INPUT');
298                 cb.id = this.id + "cb" + node.nodeID;
299                 cb.type = 'checkbox';
300                 cb.value = node.nodeName;
301                 cb.style.display = "inline-block";
302                 divNode.appendChild(cb);
303                 cb.onclick = function ()
304                 {
305                     //                    var nlist = 
306                     //                    CheckBoxClick(this, );                  
307                 };
308             }
309 
310             //添加节点显示
311             var aNode = document.createElement("A");
312             aNode.id = this.id + "a" + "_" + node.nodeID;
313             aNode.href = node.NodeUrl;
314             aNode.innerHTML = node.nodeName;
315             aNode.onclick = function () { return false; }
316             //aNode.style.position = "fixed";
317             aNode.style.display = "inline-block";
318             divNode.appendChild(aNode);
319             divNode.appendChild(subDivNode);
320 
321             //是否显示子节点
322             if (!this.IsExpand) { subDivNode.style.display = "none"; }
323 
324             var subDiv = document.getElementById(n.subAreaId);
325             if (subDiv == null || subDiv == undefined)
326             {
327                 subDiv = document.createElement("div");
328                 subDiv.id = n.subAreaId;
329                 document.appendChild(subDiv);
330             }
331 
332             subDiv.appendChild(divNode);
333             if (nodesubList.length > 0)
334             {
335                 this.DrawTree(node);
336             }
337         }
338         //********画树结束**********
339     }
340 }


 


 


html部分




1 <span id="<%=this.ClientID %>RootImg"></span><span id="<%=this.ClientID %>RootName"></span> 
2 <div id="<%=this.ClientID %>subRoot"></div>




调用部分




 var nodeStr =
          [


 { "ID": 0, "Name": "根节点", "PID": -1 },
            { "ID": 1, "Name": " 节点1", "PID": 0 },
            { "ID": 2, "Name": " 节点2", "PID": 0 },
            { "ID": 3, "Name": " 节点3", "PID": 1 },
            { "ID": 4, "Name": " 节点4", "PID": 2 },
            { "ID": 5, "Name": " 节点5", "PID": 3 },
            { "ID": 6, "Name": " 节点6", "PID": 4 },
            { "ID": 7, "Name": " 节点7", "PID": 5 },
            { "ID": 8, "Name": " 节点8", "PID": 6 } ,
            { "ID": 9, "Name": " 节点9", "PID": 7 },
            { "ID": 10, "Name": " 节点10", "PID": 8 },
            { "ID": 11, "Name": " 节点11", "PID": 0 },
            { "ID": 12, "Name": " 节点12", "PID": 0 },
            { "ID": 13, "Name": " 节点13", "PID": 11}



          ];

   new Tree({ 'ClientID': '<%=this.ClientID %>', 'IsExpand': true, 'treeSource': nodeStr }).CreateTree();      




 




 点击下载






            

            
posted @ 
2013-02-05 13:29 
x4646 
阅读(257) 
评论(0) 
编辑 
收藏 
举报