一：目标
要实现用一个树形结构的展示数据，每个节点（除了根节点）前有一个checkbox，同时，点击父节点，则子节点全选或者全不选，当选中了全部子节点，父节点选中；如下图所示：
同时可以在创建的时候，让某些节点默认选中或不选中；
注：本人把显示图标改成了false（个人觉得不好看），想用图标的话可以不用修改源文件，
useIcons : false// 想用图标，值为true
二：准备工作
1. dtree 的 js css等文件可以去官网上下载：http://destroydrop.com/javascripts/tree/
2.由于本人对js文件做出了修改，其中用到了jquery的选择器，所以引入一个jquery的js文件
三：详细步骤
1.如果要想将dtree引入到java的web项目中，请首先将js文件中的 function dTree(objName) 下的this.icon 下所有的图片路径修改成自己项目可以访问到的图片路径
1 this.icon = { 2 3 root : '/dtree/img/base.gif', 4 5 folder : '/dtree/img/folder.gif', 6 7 folderOpen : '/dtree/img/folderopen.gif', 8 9 node : '/dtree/img/page.gif', 10 11 empty : '/dtree/img/empty.gif', 12 13 line : '/dtree/img/line.gif', 14 15 join : '/dtree/img/join.gif', 16 17 joinBottom : '/dtree/img/joinbottom.gif', 18 19 plus : '/dtree/img/plus.gif', 20 21 plusBottom : '/dtree/img/plusbottom.gif', 22 23 minus : '/dtree/img/minus.gif', 24 25 minusBottom : '/dtree/img/minusbottom.gif', 26 27 nlPlus : '/dtree/img/nolines_plus.gif', 28 29 nlMinus : '/dtree/img/nolines_minus.gif' 30 31 };
2.在 function dTree(objName) 下this.config最后加入一个属性 userCheckbox，默认值为 true
1 this.config = { 2 3 target : null, 4 5 folderLinks : true, 6 7 useSelection : true, 8 9 useCookies : true, 10 11 useLines : true, 12 13 useIcons : false,//我给改了，不想让显示图标，太丑了 0.0 想要的话，改成true 14 15 useStatusText : false, 16 17 closeSameLevel : false, 18 19 inOrder : false, 20 21 useCheckbox : true //新加的 22 23 }
并在 function Node(id, pid, name, url,checked ,title, target, icon, iconOpen, open) 中加入一行代码：
this.checkedStatus = checked || false;// 选中状态，默认false，不选中
1 function Node(id, pid, name, url,checked ,title, target, icon, iconOpen, open) { 2 3 this.id = id; 4 5 this.pid = pid; 6 7 this.name = name; 8 9 this.url = url; 10 11 this.checkedStatus = checked || false;// 选中状态，默认false，不选中 12 13 this.title = title; 14 15 this.target = target; 16 17 this.icon = icon; 18 19 this.iconOpen = iconOpen; 20 21 this._io = open || false; 22 23 this._is = false; 24 25 this._ls = false; 26 27 this._hc = false; 28 29 this._ai = 0; 30 31 this._p; 32 33 };
修改 dTree.prototype.add = function(id, pid, name, url, checked, title, target, icon, iconOpen, open) ， 添加了一个参数 checked：是否选中
1 dTree.prototype.add = function(id, pid, name, url, checked, title, target, icon, iconOpen, open) { 2 3 this.aNodes[this.aNodes.length] = new Node(id, pid, name, url,checked ,title, target, icon, iconOpen, open); 4 5 };
3.在 dTree.prototype.node = function(node, nodeId)下 if (this.config.useIcons) {} 结束之后加入以下代码，把checkbox加入进去，（checkbox做了美化，最后修改css文件），并判断是否默认选中：
1 if(this.config.useCheckbox == true && node.id != 0){ 2 str += '<label class="demo--label">' 3 + '<input type="checkbox" class="demo--radio" id="' + node.pid+ '_' + node.id 4 + '" οnclick="javascript:' + this.obj + '.cc(' + node.id 5 + ',' + node.pid + ')"'; 6 if (node.checkedStatus){ 7 str += 'checked="checked"'; 8 } 9 str += ' />' 10 + '<span class="demo--checkbox demo--radioInput"></span>' 11 + '</label>'; 12 }
4. 在js文件的任意位置加入以下几个函数，为了实现父级子级 checkbox选中事件，代码中有详细注释，这里不做过多说明
1 //复选框onclick事件 2 dTree.prototype.cc=function(nodeId, nodePid){ 3 //说明：checkbox的id由 nodePid + _ + nodeId 三部分组成 4 //获取当前节点的选中状态 5 var boo = $("#"+nodePid+"_"+nodeId).attr("checked"); 6 //1. 判断有无子节点，如果有，则全部选中,并且递归判断子节点是否还有子节点 7 childsSelected(nodeId, boo); 8 9 //2. 获取所有同级节点，判断是否都选中，如果都选中，则父节点也要选中 10 parentsSelected(nodePid); 11 } 12 13 //递归选中父节点，参数1：父节点，参数2：选中状态 14 function parentsSelected(pid) { 15 //1. 获取所有同级checkbox的id集合 16 var siblings = getChilds(pid); 17 //由于至少还会有调用方法的那个节点本身，所以siblings里至少有一个值 18 var flag = $("#"+siblings[0]).attr("checked"); 19 //如果flag为false，则不用看其他同级节点了，父节点的checkbox必然为false，为true的话，则继续看同级节点里有没有false 20 //只要有一个false，父节点都为false 21 if (flag){ 22 for (var i = 1; i < siblings.length; i++){ 23 if ($("#"+siblings[i]).attr("checked") != flag){ 24 flag = false; 25 break; 26 } 27 } 28 } 29 // 获取父节点的选中状态 （父节点的id，_的后面部分是子节点_的前面部分） 30 var originalCheck = $("input[id$='_"+siblings[0].split("_")[0]+"']").attr("checked"); 31 //如果父节点原本的选中状态和应该的选中状态不一致，则改变父节点选中状态，并递归调用本方法 32 if (originalCheck != flag){ 33 $("input[id$='_"+siblings[0].split("_")[0]+"']").attr("checked", flag); 34 var parentCheckBoxId = $("input[id$='_"+siblings[0].split("_")[0]+"']").attr("id"); 35 if (parentCheckBoxId != null){ 36 parentsSelected(parentCheckBoxId.split("_")[0]); 37 } 38 } 39 40 } 41 42 //递归选中子节点,参数1：父节点id， 参数2：选中状态 43 function childsSelected(pid, boo) { 44 //获取所有下一级节点的checkbox的id 45 var childs = getChilds(pid); 46 if (childs.length == 0){ 47 return; 48 } 49 //让所有子节点选中，并递归判断每一个子节点是否还有子节点，让每一层每一个都选中 50 for (var i = 0; i < childs.length; i++){ 51 $("#"+childs[i]).attr("checked",boo); 52 childsSelected(childs[i].split("_")[1], boo); 53 } 54 } 55 56 //获取下一级子节点的id 57 function getChilds(pid){ 58 var arr = new Array(); 59 $("input[id^='"+pid+"_']").each(function (i,chkbox) { 60 arr.push(chkbox.id); 61 }) 62 return arr; 63 }
5.之前提到过，对checkbox做出了一点美化，所以css文件的最后请加上以下代码：
1 .demo--label{display:inline-block} 2 .demo--radio{display:none} 3 .demo--radioInput{background-color:#fff;border:1px solid rgba(0,0,0,0.15);border-radius:100%;display:inline-block;height:13px;margin-right:5px;margin-top:-1px;vertical-align:middle;width:13px;line-height:1} 4 .demo--radio:checked + .demo--radioInput:after{background-color:#57ad68;border-radius:100%;content:"";display:inline-block;height:9px;margin:2px;width:9px} 5 .demo--checkbox.demo--radioInput,.demo--radio:checked + .demo--checkbox.demo--radioInput:after{border-radius:0}
四：说明
至此应该是结束了，如果按照步骤不能实现，请留言评论，咱们可以互相探讨，本人亲测好使，最后附上全部的js代码和css代码把,
(如果想让某一个节点默认选中，则设置url后面的一个参数为 true ，
d.add(1,0,'Node 1','searchTest.page',true);
这样只会影响单节点，对父节点和子节点都没有影响)
dtree.js:
1 // Node object 2 3 function Node(id, pid, name, url,checked ,title, target, icon, iconOpen, open) { 4 5 this.id = id; 6 7 this.pid = pid; 8 9 this.name = name; 10 11 this.url = url; 12 13 this.checkedStatus = checked || false;// 选中状态，默认false，不选中 14 15 this.title = title; 16 17 this.target = target; 18 19 this.icon = icon; 20 21 this.iconOpen = iconOpen; 22 23 this._io = open || false; 24 25 this._is = false; 26 27 this._ls = false; 28 29 this._hc = false; 30 31 this._ai = 0; 32 33 this._p; 34 35 }; 36 37 38 39 // Tree object 40 41 function dTree(objName) { 42 43 this.config = { 44 45 target : null, 46 47 folderLinks : true, 48 49 useSelection : true, 50 51 useCookies : true, 52 53 useLines : true, 54 55 useIcons : false,//我给改了，不想让显示图标，太丑了 0.0 想要的话，改成true 56 57 useStatusText : false, 58 59 closeSameLevel : false, 60 61 inOrder : false, 62 63 useCheckbox : true //新加的 64 65 } 66 67 this.icon = { 68 69 root : '/dtree/img/base.gif', 70 71 folder : '/dtree/img/folder.gif', 72 73 folderOpen : '/dtree/img/folderopen.gif', 74 75 node : '/dtree/img/page.gif', 76 77 empty : '/dtree/img/empty.gif', 78 79 line : '/dtree/img/line.gif', 80 81 join : '/dtree/img/join.gif', 82 83 joinBottom : '/dtree/img/joinbottom.gif', 84 85 plus : '/dtree/img/plus.gif', 86 87 plusBottom : '/dtree/img/plusbottom.gif', 88 89 minus : '/dtree/img/minus.gif', 90 91 minusBottom : '/dtree/img/minusbottom.gif', 92 93 nlPlus : '/dtree/img/nolines_plus.gif', 94 95 nlMinus : '/dtree/img/nolines_minus.gif' 96 97 }; 98 99 this.obj = objName; 100 101 this.aNodes = []; 102 103 this.aIndent = []; 104 105 this.root = new Node(-1); 106 107 this.selectedNode = null; 108 109 this.selectedFound = false; 110 111 this.completed = false; 112 113 }; 114 115 116 117 // Adds a new node to the node array 118 119 dTree.prototype.add = function(id, pid, name, url, checked, title, target, icon, iconOpen, open) { 120 121 this.aNodes[this.aNodes.length] = new Node(id, pid, name, url,checked ,title, target, icon, iconOpen, open); 122 123 }; 124 125 126 127 // Open/close all nodes 128 129 dTree.prototype.openAll = function() { 130 131 this.oAll(true); 132 133 }; 134 135 dTree.prototype.closeAll = function() { 136 137 this.oAll(false); 138 139 }; 140 141 142 143 // Outputs the tree to the page 144 145 dTree.prototype.toString = function() { 146 147 var str = '<div class="dtree">\n'; 148 149 if (document.getElementById) { 150 151 if (this.config.useCookies) this.selectedNode = this.getSelected(); 152 153 str += this.addNode(this.root); 154 155 } else str += 'Browser not supported.'; 156 157 str += '</div>'; 158 159 if (!this.selectedFound) this.selectedNode = null; 160 161 this.completed = true; 162 163 return str; 164 165 }; 166 167 168 169 // Creates the tree structure 170 171 dTree.prototype.addNode = function(pNode) { 172 173 var str = ''; 174 175 var n=0; 176 177 if (this.config.inOrder) n = pNode._ai; 178 179 for (n; n<this.aNodes.length; n++) { 180 181 if (this.aNodes[n].pid == pNode.id) { 182 183 var cn = this.aNodes[n]; 184 185 cn._p = pNode; 186 187 cn._ai = n; 188 189 this.setCS(cn); 190 191 if (!cn.target && this.config.target) cn.target = this.config.target; 192 193 if (cn._hc && !cn._io && this.config.useCookies) cn._io = this.isOpen(cn.id); 194 195 if (!this.config.folderLinks && cn._hc) cn.url = null; 196 197 if (this.config.useSelection && cn.id == this.selectedNode && !this.selectedFound) { 198 199 cn._is = true; 200 201 this.selectedNode = n; 202 203 this.selectedFound = true; 204 205 } 206 207 str += this.node(cn, n); 208 209 if (cn._ls) break; 210 211 } 212 213 } 214 215 return str; 216 217 }; 218 219 220 221 // Creates the node icon, url and text 222 223 dTree.prototype.node = function(node, nodeId) { 224 225 var str = '<div class="dTreeNode">' + this.indent(node, nodeId); 226 227 if (this.config.useIcons) { 228 229 if (!node.icon) node.icon = (this.root.id == node.pid) ? this.icon.root : ((node._hc) ? this.icon.folder : this.icon.node); 230 231 if (!node.iconOpen) node.iconOpen = (node._hc) ? this.icon.folderOpen : this.icon.node; 232 233 if (this.root.id == node.pid) { 234 235 node.icon = this.icon.root; 236 237 node.iconOpen = this.icon.root; 238 239 } 240 241 str += '<img id="i' + this.obj + nodeId + '" src="' + ((node._io) ? node.iconOpen : node.icon) + '" alt="" />'; 242 243 } 244 245 if(this.config.useCheckbox == true && node.id != 0){ 246 str += '<label class="demo--label">' 247 + '<input type="checkbox" class="demo--radio" id="' + node.pid+ '_' + node.id 248 + '" οnclick="javascript:' + this.obj + '.cc(' + node.id 249 + ',' + node.pid + ')"'; 250 if (node.checkedStatus){ 251 str += 'checked="checked"'; 252 } 253 str += ' />' 254 + '<span class="demo--checkbox demo--radioInput"></span>' 255 + '</label>'; 256 } 257 // if(this.config.useCheckbox == true && node.id != 0){ 258 // str += '<input type="checkbox" id="' + node.pid+ '_' + node.id 259 // + '" οnclick="javascript:' + this.obj + '.cc(' + node.id 260 // + ',' + node.pid + ')"/>'; 261 // } 262 263 if (node.url) { 264 265 str += '<a id="s' + this.obj + nodeId + '" class="' + ((this.config.useSelection) ? ((node._is ? 'nodeSel' : 'node')) : 'node') + '" href="' + node.url + '"'; 266 267 if (node.title) str += ' title="' + node.title + '"'; 268 269 if (node.target) str += ' target="' + node.target + '"'; 270 271 if (this.config.useStatusText) str += ' οnmοuseοver="window.status=\'' + node.name + '\';return true;" οnmοuseοut="window.status=\'\';return true;" '; 272 273 if (this.config.useSelection && ((node._hc && this.config.folderLinks) || !node._hc)) 274 275 str += ' οnclick="javascript: ' + this.obj + '.s(' + nodeId + ');"'; 276 277 str += '>'; 278 279 } 280 281 else if ((!this.config.folderLinks || !node.url) && node._hc && node.pid != this.root.id) 282 283 str += '<a href="javascript: ' + this.obj + '.o(' + nodeId + ');" class="node">'; 284 285 str += node.name; 286 287 if (node.url || ((!this.config.folderLinks || !node.url) && node._hc)) str += '</a>'; 288 289 str += '</div>'; 290 291 if (node._hc) { 292 293 str += '<div id="d' + this.obj + nodeId + '" class="clip" style="display:' + ((this.root.id == node.pid || node._io) ? 'block' : 'none') + ';">'; 294 295 str += this.addNode(node); 296 297 str += '</div>'; 298 299 } 300 301 this.aIndent.pop(); 302 303 return str; 304 305 }; 306 307 //复选框onclick事件 308 dTree.prototype.cc=function(nodeId, nodePid){ 309 //说明：checkbox的id由 nodePid + _ + nodeId 三部分组成 310 //获取当前节点的选中状态 311 var boo = $("#"+nodePid+"_"+nodeId).attr("checked"); 312 //1. 判断有无子节点，如果有，则全部选中,并且递归判断子节点是否还有子节点 313 childsSelected(nodeId, boo); 314 315 //2. 获取所有同级节点，判断是否都选中，如果都选中，则父节点也要选中 316 parentsSelected(nodePid); 317 } 318 319 //递归选中父节点，参数1：父节点，参数2：选中状态 320 function parentsSelected(pid) { 321 //1. 获取所有同级checkbox的id集合 322 var siblings = getChilds(pid); 323 //由于至少还会有调用方法的那个节点本身，所以siblings里至少有一个值 324 var flag = $("#"+siblings[0]).attr("checked"); 325 //如果flag为false，则不用看其他同级节点了，父节点的checkbox必然为false，为true的话，则继续看同级节点里有没有false 326 //只要有一个false，父节点都为false 327 if (flag){ 328 for (var i = 1; i < siblings.length; i++){ 329 if ($("#"+siblings[i]).attr("checked") != flag){ 330 flag = false; 331 break; 332 } 333 } 334 } 335 // 获取父节点的选中状态 （父节点的id，_的后面部分是子节点_的前面部分） 336 var originalCheck = $("input[id$='_"+siblings[0].split("_")[0]+"']").attr("checked"); 337 //如果父节点原本的选中状态和应该的选中状态不一致，则改变父节点选中状态，并递归调用本方法 338 if (originalCheck != flag){ 339 $("input[id$='_"+siblings[0].split("_")[0]+"']").attr("checked", flag); 340 var parentCheckBoxId = $("input[id$='_"+siblings[0].split("_")[0]+"']").attr("id"); 341 if (parentCheckBoxId != null){ 342 parentsSelected(parentCheckBoxId.split("_")[0]); 343 } 344 } 345 346 } 347 348 //递归选中子节点,参数1：父节点id， 参数2：选中状态 349 function childsSelected(pid, boo) { 350 //获取所有下一级节点的checkbox的id 351 var childs = getChilds(pid); 352 if (childs.length == 0){ 353 return; 354 } 355 //让所有子节点选中，并递归判断每一个子节点是否还有子节点，让每一层每一个都选中 356 for (var i = 0; i < childs.length; i++){ 357 $("#"+childs[i]).attr("checked",boo); 358 childsSelected(childs[i].split("_")[1], boo); 359 } 360 } 361 362 //获取下一级子节点的id 363 function getChilds(pid){ 364 var arr = new Array(); 365 $("input[id^='"+pid+"_']").each(function (i,chkbox) { 366 arr.push(chkbox.id); 367 }) 368 return arr; 369 } 370 371 372 373 // Adds the empty and line icons 374 375 dTree.prototype.indent = function(node, nodeId) { 376 377 var str = ''; 378 379 if (this.root.id != node.pid) { 380 381 for (var n=0; n<this.aIndent.length; n++) 382 383 str += '<img src="' + ( (this.aIndent[n] == 1 && this.config.useLines) ? this.icon.line : this.icon.empty ) + '" alt="" />'; 384 385 (node._ls) ? this.aIndent.push(0) : this.aIndent.push(1); 386 387 if (node._hc) { 388 389 str += '<a href="javascript: ' + this.obj + '.o(' + nodeId + ');"><img id="j' + this.obj + nodeId + '" src="'; 390 391 if (!this.config.useLines) str += (node._io) ? this.icon.nlMinus : this.icon.nlPlus; 392 393 else str += ( (node._io) ? ((node._ls && this.config.useLines) ? this.icon.minusBottom : this.icon.minus) : ((node._ls && this.config.useLines) ? this.icon.plusBottom : this.icon.plus ) ); 394 395 str += '" alt="" /></a>'; 396 397 } else str += '<img src="' + ( (this.config.useLines) ? ((node._ls) ? this.icon.joinBottom : this.icon.join ) : this.icon.empty) + '" alt="" />'; 398 399 } 400 401 return str; 402 403 }; 404 405 406 407 // Checks if a node has any children and if it is the last sibling 408 409 dTree.prototype.setCS = function(node) { 410 411 var lastId; 412 413 for (var n=0; n<this.aNodes.length; n++) { 414 415 if (this.aNodes[n].pid == node.id) node._hc = true; 416 417 if (this.aNodes[n].pid == node.pid) lastId = this.aNodes[n].id; 418 419 } 420 421 if (lastId==node.id) node._ls = true; 422 423 }; 424 425 426 427 // Returns the selected node 428 429 dTree.prototype.getSelected = function() { 430 431 var sn = this.getCookie('cs' + this.obj); 432 433 return (sn) ? sn : null; 434 435 }; 436 437 438 439 // Highlights the selected node 440 441 dTree.prototype.s = function(id) { 442 443 if (!this.config.useSelection) return; 444 445 var cn = this.aNodes[id]; 446 447 if (cn._hc && !this.config.folderLinks) return; 448 449 if (this.selectedNode != id) { 450 451 if (this.selectedNode || this.selectedNode==0) { 452 453 eOld = document.getElementById("s" + this.obj + this.selectedNode); 454 455 eOld.className = "node"; 456 457 } 458 459 eNew = document.getElementById("s" + this.obj + id); 460 461 eNew.className = "nodeSel"; 462 463 this.selectedNode = id; 464 465 if (this.config.useCookies) this.setCookie('cs' + this.obj, cn.id); 466 467 } 468 469 }; 470 471 472 473 // Toggle Open or close 474 475 dTree.prototype.o = function(id) { 476 477 var cn = this.aNodes[id]; 478 479 this.nodeStatus(!cn._io, id, cn._ls); 480 481 cn._io = !cn._io; 482 483 if (this.config.closeSameLevel) this.closeLevel(cn); 484 485 if (this.config.useCookies) this.updateCookie(); 486 487 }; 488 489 490 491 // Open or close all nodes 492 493 dTree.prototype.oAll = function(status) { 494 495 for (var n=0; n<this.aNodes.length; n++) { 496 497 if (this.aNodes[n]._hc && this.aNodes[n].pid != this.root.id) { 498 499 this.nodeStatus(status, n, this.aNodes[n]._ls) 500 501 this.aNodes[n]._io = status; 502 503 } 504 505 } 506 507 if (this.config.useCookies) this.updateCookie(); 508 509 }; 510 511 512 513 // Opens the tree to a specific node 514 515 dTree.prototype.openTo = function(nId, bSelect, bFirst) { 516 517 if (!bFirst) { 518 519 for (var n=0; n<this.aNodes.length; n++) { 520 521 if (this.aNodes[n].id == nId) { 522 523 nId=n; 524 525 break; 526 527 } 528 529 } 530 531 } 532 533 var cn=this.aNodes[nId]; 534 535 if (cn.pid==this.root.id || !cn._p) return; 536 537 cn._io = true; 538 539 cn._is = bSelect; 540 541 if (this.completed && cn._hc) this.nodeStatus(true, cn._ai, cn._ls); 542 543 if (this.completed && bSelect) this.s(cn._ai); 544 545 else if (bSelect) this._sn=cn._ai; 546 547 this.openTo(cn._p._ai, false, true); 548 549 }; 550 551 552 553 // Closes all nodes on the same level as certain node 554 555 dTree.prototype.closeLevel = function(node) { 556 557 for (var n=0; n<this.aNodes.length; n++) { 558 559 if (this.aNodes[n].pid == node.pid && this.aNodes[n].id != node.id && this.aNodes[n]._hc) { 560 561 this.nodeStatus(false, n, this.aNodes[n]._ls); 562 563 this.aNodes[n]._io = false; 564 565 this.closeAllChildren(this.aNodes[n]); 566 567 } 568 569 } 570 571 } 572 573 574 575 // Closes all children of a node 576 577 dTree.prototype.closeAllChildren = function(node) { 578 579 for (var n=0; n<this.aNodes.length; n++) { 580 581 if (this.aNodes[n].pid == node.id && this.aNodes[n]._hc) { 582 583 if (this.aNodes[n]._io) this.nodeStatus(false, n, this.aNodes[n]._ls); 584 585 this.aNodes[n]._io = false; 586 587 this.closeAllChildren(this.aNodes[n]); 588 589 } 590 591 } 592 593 } 594 595 596 597 // Change the status of a node(open or closed) 598 599 dTree.prototype.nodeStatus = function(status, id, bottom) { 600 601 eDiv = document.getElementById('d' + this.obj + id); 602 603 eJoin = document.getElementById('j' + this.obj + id); 604 605 if (this.config.useIcons) { 606 607 eIcon = document.getElementById('i' + this.obj + id); 608 609 eIcon.src = (status) ? this.aNodes[id].iconOpen : this.aNodes[id].icon; 610 611 } 612 613 eJoin.src = (this.config.useLines)? 614 615 ((status)?((bottom)?this.icon.minusBottom:this.icon.minus):((bottom)?this.icon.plusBottom:this.icon.plus)): 616 617 ((status)?this.icon.nlMinus:this.icon.nlPlus); 618 619 eDiv.style.display = (status) ? 'block': 'none'; 620 621 }; 622 623 624 625 626 627 // [Cookie] Clears a cookie 628 629 dTree.prototype.clearCookie = function() { 630 631 var now = new Date(); 632 633 var yesterday = new Date(now.getTime() - 1000 * 60 * 60 * 24); 634 635 this.setCookie('co'+this.obj, 'cookieValue', yesterday); 636 637 this.setCookie('cs'+this.obj, 'cookieValue', yesterday); 638 639 }; 640 641 642 643 // [Cookie] Sets value in a cookie 644 645 dTree.prototype.setCookie = function(cookieName, cookieValue, expires, path, domain, secure) { 646 647 document.cookie = 648 649 escape(cookieName) + '=' + escape(cookieValue) 650 651 + (expires ? '; expires=' + expires.toGMTString() : '') 652 653 + (path ? '; path=' + path : '') 654 655 + (domain ? '; domain=' + domain : '') 656 657 + (secure ? '; secure' : ''); 658 659 }; 660 661 662 663 // [Cookie] Gets a value from a cookie 664 665 dTree.prototype.getCookie = function(cookieName) { 666 667 var cookieValue = ''; 668 669 var posName = document.cookie.indexOf(escape(cookieName) + '='); 670 671 if (posName != -1) { 672 673 var posValue = posName + (escape(cookieName) + '=').length; 674 675 var endPos = document.cookie.indexOf(';', posValue); 676 677 if (endPos != -1) cookieValue = unescape(document.cookie.substring(posValue, endPos)); 678 679 else cookieValue = unescape(document.cookie.substring(posValue)); 680 681 } 682 683 return (cookieValue); 684 685 }; 686 687 688 689 // [Cookie] Returns ids of open nodes as a string 690 691 dTree.prototype.updateCookie = function() { 692 693 var str = ''; 694 695 for (var n=0; n<this.aNodes.length; n++) { 696 697 if (this.aNodes[n]._io && this.aNodes[n].pid != this.root.id) { 698 699 if (str) str += '.'; 700 701 str += this.aNodes[n].id; 702 703 } 704 705 } 706 707 this.setCookie('co' + this.obj, str); 708 709 }; 710 711 712 713 // [Cookie] Checks if a node id is in a cookie 714 715 dTree.prototype.isOpen = function(id) { 716 717 var aOpen = this.getCookie('co' + this.obj).split('.'); 718 719 for (var n=0; n<aOpen.length; n++) 720 721 if (aOpen[n] == id) return true; 722 723 return false; 724 725 }; 726 727 728 729 // If Push and pop is not implemented by the browser 730 731 if (!Array.prototype.push) { 732 733 Array.prototype.push = function array_push() { 734 735 for(var i=0;i<arguments.length;i++) 736 737 this[this.length]=arguments[i]; 738 739 return this.length; 740 741 } 742 743 }; 744 745 if (!Array.prototype.pop) { 746 747 Array.prototype.pop = function array_pop() { 748 749 lastElement = this[this.length-1]; 750 751 this.length = Math.max(this.length-1,0); 752 753 return lastElement; 754 755 } 756 757 };
dtree.css:
1 .dtree { 2 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 3 font-size: 11px; 4 color: #666; 5 white-space: nowrap; 6 } 7 .dtree img { 8 border: 0px; 9 vertical-align: middle; 10 } 11 .dtree a { 12 color: #333; 13 text-decoration: none; 14 } 15 .dtree a.node, .dtree a.nodeSel { 16 white-space: nowrap; 17 padding: 1px 2px 1px 2px; 18 } 19 .dtree a.node:hover, .dtree a.nodeSel:hover { 20 color: #333; 21 text-decoration: underline; 22 } 23 .dtree a.nodeSel { 24 background-color: #c0d2ec; 25 } 26 .dtree .clip { 27 overflow: hidden; 28 } 29 30 .demo--label{display:inline-block} 31 .demo--radio{display:none} 32 .demo--radioInput{background-color:#fff;border:1px solid rgba(0,0,0,0.15);border-radius:100%;display:inline-block;height:13px;margin-right:5px;margin-top:-1px;vertical-align:middle;width:13px;line-height:1} 33 .demo--radio:checked + .demo--radioInput:after{background-color:#57ad68;border-radius:100%;content:"";display:inline-block;height:9px;margin:2px;width:9px} 34 .demo--checkbox.demo--radioInput,.demo--radio:checked + .demo--checkbox.demo--radioInput:after{border-radius:0}
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
