Dtree 添加 checkbox 复选框 可以默认选中
一:目标
要实现用一个树形结构的展示数据,每个节点(除了根节点)前有一个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 + '" onclick="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 }
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 + '" onclick="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 // + '" onclick="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 += ' onmouseover="window.status=\'' + node.name + '\';return true;" onmouseout="window.status=\'\';return true;" '; 272 273 if (this.config.useselection && ((node._hc && this.config.folderlinks) || !node._hc)) 274 275 str += ' onclick="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}
上一篇: 深入理解 Vuejs 组件
下一篇: 一女同事刚买的新车