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',View Code10 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 }View Code
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 + '<span class="demo--checkbox demo--radioInput"></span>' 7 + '</label>'; 8 }View Code
4. 在js檔案的任意位置加入以下幾個函式，為了實現父級子級 checkbox選中事件，程式碼中有詳細註釋，這裡不做過多說明
View Code
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}View Code
四：說明
至此應該是結束了，如果按照步驟不能實現，請留言評論，咱們可以互相探討，本人親測好使，最後附上全部的js程式碼和css程式碼把
1 // Node object 2 3 function Node(id, pid, name, url, 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.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 }; 34 35 36 37 // Tree object 38 39 function dTree(objName) { 40 41 this.config = { 42 43 target : null, 44 45 folderLinks : true, 46 47 useSelection : true, 48 49 useCookies : true, 50 51 useLines : true, 52 53 useIcons : false,//我給改了，不想讓顯示圖示，太醜了 0.0 想要的話，改成true 54 55 useStatusText : false, 56 57 closeSameLevel : false, 58 59 inOrder : false, 60 61 useCheckbox : true //新加的 62 63 } 64 65 this.icon = { 66 67 root : '/dtree/img/base.gif', 68 69 folder : '/dtree/img/folder.gif', 70 71 folderOpen : '/dtree/img/folderopen.gif', 72 73 node : '/dtree/img/page.gif', 74 75 empty : '/dtree/img/empty.gif', 76 77 line : '/dtree/img/line.gif', 78 79 join : '/dtree/img/join.gif', 80 81 joinBottom : '/dtree/img/joinbottom.gif', 82 83 plus : '/dtree/img/plus.gif', 84 85 plusBottom : '/dtree/img/plusbottom.gif', 86 87 minus : '/dtree/img/minus.gif', 88 89 minusBottom : '/dtree/img/minusbottom.gif', 90 91 nlPlus : '/dtree/img/nolines_plus.gif', 92 93 nlMinus : '/dtree/img/nolines_minus.gif' 94 95 }; 96 97 this.obj = objName; 98 99 this.aNodes = []; 100 101 this.aIndent = []; 102 103 this.root = new Node(-1); 104 105 this.selectedNode = null; 106 107 this.selectedFound = false; 108 109 this.completed = false; 110 111 }; 112 113 114 115 // Adds a new node to the node array 116 117 dTree.prototype.add = function(id, pid, name, url, title, target, icon, iconOpen, open) { 118 119 this.aNodes[this.aNodes.length] = new Node(id, pid, name, url, title, target, icon, iconOpen, open); 120 121 }; 122 123 124 125 // Open/close all nodes 126 127 dTree.prototype.openAll = function() { 128 129 this.oAll(true); 130 131 }; 132 133 dTree.prototype.closeAll = function() { 134 135 this.oAll(false); 136 137 }; 138 139 140 141 // Outputs the tree to the page 142 143 dTree.prototype.toString = function() { 144 145 var str = '<div class="dtree">\n'; 146 147 if (document.getElementById) { 148 149 if (this.config.useCookies) this.selectedNode = this.getSelected(); 150 151 str += this.addNode(this.root); 152 153 } else str += 'Browser not supported.'; 154 155 str += '</div>'; 156 157 if (!this.selectedFound) this.selectedNode = null; 158 159 this.completed = true; 160 161 return str; 162 163 }; 164 165 166 167 // Creates the tree structure 168 169 dTree.prototype.addNode = function(pNode) { 170 171 var str = ''; 172 173 var n=0; 174 175 if (this.config.inOrder) n = pNode._ai; 176 177 for (n; n<this.aNodes.length; n++) { 178 179 if (this.aNodes[n].pid == pNode.id) { 180 181 var cn = this.aNodes[n]; 182 183 cn._p = pNode; 184 185 cn._ai = n; 186 187 this.setCS(cn); 188 189 if (!cn.target && this.config.target) cn.target = this.config.target; 190 191 if (cn._hc && !cn._io && this.config.useCookies) cn._io = this.isOpen(cn.id); 192 193 if (!this.config.folderLinks && cn._hc) cn.url = null; 194 195 if (this.config.useSelection && cn.id == this.selectedNode && !this.selectedFound) { 196 197 cn._is = true; 198 199 this.selectedNode = n; 200 201 this.selectedFound = true; 202 203 } 204 205 str += this.node(cn, n); 206 207 if (cn._ls) break; 208 209 } 210 211 } 212 213 return str; 214 215 }; 216 217 218 219 // Creates the node icon, url and text 220 221 dTree.prototype.node = function(node, nodeId) { 222 223 var str = '<div class="dTreeNode">' + this.indent(node, nodeId); 224 225 if (this.config.useIcons) { 226 227 if (!node.icon) node.icon = (this.root.id == node.pid) ? this.icon.root : ((node._hc) ? this.icon.folder : this.icon.node); 228 229 if (!node.iconOpen) node.iconOpen = (node._hc) ? this.icon.folderOpen : this.icon.node; 230 231 if (this.root.id == node.pid) { 232 233 node.icon = this.icon.root; 234 235 node.iconOpen = this.icon.root; 236 237 } 238 239 str += '<img id="i' + this.obj + nodeId + '" src="' + ((node._io) ? node.iconOpen : node.icon) + '" alt="" />'; 240 241 } 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 + '<span class="demo--checkbox demo--radioInput"></span>' 251 + '</label>'; 252 } 253 // if(this.config.useCheckbox == true && node.id != 0){ 254 // str += '<input type="checkbox" id="' + node.pid+ '_' + node.id 255 // + '" onclick="javascript:' + this.obj + '.cc(' + node.id 256 // + ',' + node.pid + ')"/>'; 257 // } 258 259 if (node.url) { 260 261 str += '<a id="s' + this.obj + nodeId + '" class="' + ((this.config.useSelection) ? ((node._is ? 'nodeSel' : 'node')) : 'node') + '" href="' + node.url + '"'; 262 263 if (node.title) str += ' title="' + node.title + '"'; 264 265 if (node.target) str += ' target="' + node.target + '"'; 266 267 if (this.config.useStatusText) str += ' onmouseover="window.status=\'' + node.name + '\';return true;" onmouseout="window.status=\'\';return true;" '; 268 269 if (this.config.useSelection && ((node._hc && this.config.folderLinks) || !node._hc)) 270 271 str += ' onclick="javascript: ' + this.obj + '.s(' + nodeId + ');"'; 272 273 str += '>'; 274 275 } 276 277 else if ((!this.config.folderLinks || !node.url) && node._hc && node.pid != this.root.id) 278 279 str += '<a href="javascript: ' + this.obj + '.o(' + nodeId + ');" class="node">'; 280 281 str += node.name; 282 283 if (node.url || ((!this.config.folderLinks || !node.url) && node._hc)) str += '</a>'; 284 285 str += '</div>'; 286 287 if (node._hc) { 288 289 str += '<div id="d' + this.obj + nodeId + '" class="clip" style="display:' + ((this.root.id == node.pid || node._io) ? 'block' : 'none') + ';">'; 290 291 str += this.addNode(node); 292 293 str += '</div>'; 294 295 } 296 297 this.aIndent.pop(); 298 299 return str; 300 301 }; 302 303 //複選框onclick事件 304 dTree.prototype.cc=function(nodeId, nodePid){ 305 //說明：checkbox的id由 nodePid + _ + nodeId 三部分組成 306 //獲取當前節點的選中狀態 307 var boo = $("#"+nodePid+"_"+nodeId).attr("checked"); 308 //1. 判斷有無子節點，如果有，則全部選中,並且遞迴判斷子節點是否還有子節點 309 childsSelected(nodeId, boo); 310 311 //2. 獲取所有同級節點，判斷是否都選中，如果都選中，則父節點也要選中 312 parentsSelected(nodePid); 313 } 314 315 //遞迴選中父節點，引數1：父節點，引數2：選中狀態 316 function parentsSelected(pid) { 317 //1. 獲取所有同級checkbox的id集合 318 var siblings = getChilds(pid); 319 //由於至少還會有呼叫方法的那個節點本身，所以siblings裡至少有一個值 320 var flag = $("#"+siblings[0]).attr("checked"); 321 //如果flag為false，則不用看其他同級節點了，父節點的checkbox必然為false，為true的話，則繼續看同級節點裡有沒有false 322 //只要有一個false，父節點都為false 323 if (flag){ 324 for (var i = 1; i < siblings.length; i++){ 325 if ($("#"+siblings[i]).attr("checked") != flag){ 326 flag = false; 327 break; 328 } 329 } 330 } 331 // 獲取父節點的選中狀態 （父節點的id，_的後面部分是子節點_的前面部分） 332 var originalCheck = $("input[id$='_"+siblings[0].split("_")[0]+"']").attr("checked"); 333 //如果父節點原本的選中狀態和應該的選中狀態不一致，則改變父節點選中狀態，並遞迴呼叫本方法 334 if (originalCheck != flag){ 335 $("input[id$='_"+siblings[0].split("_")[0]+"']").attr("checked", flag); 336 var parentCheckBoxId = $("input[id$='_"+siblings[0].split("_")[0]+"']").attr("id"); 337 if (parentCheckBoxId != null){ 338 parentsSelected(parentCheckBoxId.split("_")[0]); 339 } 340 } 341 342 } 343 344 //遞迴選中子節點,引數1：父節點id， 引數2：選中狀態 345 function childsSelected(pid, boo) { 346 //獲取所有下一級節點的checkbox的id 347 var childs = getChilds(pid); 348 if (childs.length == 0){ 349 return; 350 } 351 //讓所有子節點選中，並遞迴判斷每一個子節點是否還有子節點，讓每一層每一個都選中 352 for (var i = 0; i < childs.length; i++){ 353 $("#"+childs[i]).attr("checked",boo); 354 childsSelected(childs[i].split("_")[1], boo); 355 } 356 } 357 358 //獲取下一級子節點的id 359 function getChilds(pid){ 360 var arr = new Array(); 361 $("input[id^='"+pid+"_']").each(function (i,chkbox) { 362 arr.push(chkbox.id); 363 }) 364 return arr; 365 } 366 367 368 369 // Adds the empty and line icons 370 371 dTree.prototype.indent = function(node, nodeId) { 372 373 var str = ''; 374 375 if (this.root.id != node.pid) { 376 377 for (var n=0; n<this.aIndent.length; n++) 378 379 str += '<img src="' + ( (this.aIndent[n] == 1 && this.config.useLines) ? this.icon.line : this.icon.empty ) + '" alt="" />'; 380 381 (node._ls) ? this.aIndent.push(0) : this.aIndent.push(1); 382 383 if (node._hc) { 384 385 str += '<a href="javascript: ' + this.obj + '.o(' + nodeId + ');"><img id="j' + this.obj + nodeId + '" src="'; 386 387 if (!this.config.useLines) str += (node._io) ? this.icon.nlMinus : this.icon.nlPlus; 388 389 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 ) ); 390 391 str += '" alt="" /></a>'; 392 393 } else str += '<img src="' + ( (this.config.useLines) ? ((node._ls) ? this.icon.joinBottom : this.icon.join ) : this.icon.empty) + '" alt="" />'; 394 395 } 396 397 return str; 398 399 }; 400 401 402 403 // Checks if a node has any children and if it is the last sibling 404 405 dTree.prototype.setCS = function(node) { 406 407 var lastId; 408 409 for (var n=0; n<this.aNodes.length; n++) { 410 411 if (this.aNodes[n].pid == node.id) node._hc = true; 412 413 if (this.aNodes[n].pid == node.pid) lastId = this.aNodes[n].id; 414 415 } 416 417 if (lastId==node.id) node._ls = true; 418 419 }; 420 421 422 423 // Returns the selected node 424 425 dTree.prototype.getSelected = function() { 426 427 var sn = this.getCookie('cs' + this.obj); 428 429 return (sn) ? sn : null; 430 431 }; 432 433 434 435 // Highlights the selected node 436 437 dTree.prototype.s = function(id) { 438 439 if (!this.config.useSelection) return; 440 441 var cn = this.aNodes[id]; 442 443 if (cn._hc && !this.config.folderLinks) return; 444 445 if (this.selectedNode != id) { 446 447 if (this.selectedNode || this.selectedNode==0) { 448 449 eOld = document.getElementById("s" + this.obj + this.selectedNode); 450 451 eOld.className = "node"; 452 453 } 454 455 eNew = document.getElementById("s" + this.obj + id); 456 457 eNew.className = "nodeSel"; 458 459 this.selectedNode = id; 460 461 if (this.config.useCookies) this.setCookie('cs' + this.obj, cn.id); 462 463 } 464 465 }; 466 467 468 469 // Toggle Open or close 470 471 dTree.prototype.o = function(id) { 472 473 var cn = this.aNodes[id]; 474 475 this.nodeStatus(!cn._io, id, cn._ls); 476 477 cn._io = !cn._io; 478 479 if (this.config.closeSameLevel) this.closeLevel(cn); 480 481 if (this.config.useCookies) this.updateCookie(); 482 483 }; 484 485 486 487 // Open or close all nodes 488 489 dTree.prototype.oAll = function(status) { 490 491 for (相關推薦
Dtree 新增 checkbox 複選框
一：目標 要實現用一個樹形結構的展示資料，每個節點（除了根節點）前有一個checkbox，同時，點選父節點，則子節點全選或者全不選，當選中了全部子節點，父節點選中；如下圖所示： 注：本人把顯示圖示改成了false（個人覺得不好看），想用圖示的話可以不用修改原始檔， useIcons :
GridControl中新增checkbox複選框
新增一列,FieldName為 "check"，將ColumnEdit 設定為 複選框 樣式。gridview1 editable設定為true 將要繫結的DataTable新增列 "check",Type 為 bool。 繫結DataTable到GridCon
Axure RP Pro 相關問題 checkbox複選框部件的OnClick事件中複選框的狀態已發生了改變
分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！
Vue中CheckBox複選框實現單選效果
為什麼有radio不用，偏偏要使用CheckBox實現單選效果呢？ 答案是如果想同時實現單選，又實現可以一個都不選的話。只能使用CheckBox來做了。 通過jQuery來做 實現思路： 1.如果當前物件不選中：去除當前物件的選中狀態 2.如果當前物件選中：
jquery對radio單選框和CheckBox複選框的操作
radio單選：輸出選擇的值。 checkbox複選及全選：判斷是否為全選，輸出選擇的值。 我用的jq版本為1.11版 程式碼如下： html <body> <div id="select-only-one"> <input
Django中checkbox複選框的傳值問題
Django 中，html 頁面通過 form 標籤來傳遞表單資料。 對於複選框資訊，即 checkbox 型別，點選 submit 後，資料將提交至 view 中的函式。 我們通過request.POST.get() 函式來獲取來自 html 頁面的值，但是該函式只能 get 到
Bootstrap模態框（modal），並新增帶複選框的表格（table），還可做提示框、檔案選擇框等，很實用！
Bootstrap中的模態框外掛以彈出對話方塊的形式出現，具有最小和最實用的功能集，主要的是使用起來很靈活！有以下幾個特性：（1）不支援同時開啟多個模態框；（2）務必將模態框的 HTML 程式碼放在文件的最高層級內（也就是說，儘量作為 body 標籤的直接子元素）
vue基於element-ui的三級CheckBox複選框
最近vue專案需要用到三級CheckBox複選框，需要實現全選反選不確定三種狀態。但是element-ui table只支援多選行，並不能支援三級及以上的多選，所以寫了這篇部落格以後學習使用。 效果圖預覽： 首先是頁面佈局，當然也可已使用table，但是自己用flex佈局後面更容易增刪改查其他功能 1
extjs4 treepanel checkbox 複選框
原部落格地址：https://blog.csdn.net/cdmamata/article/details/47001633?utm_source=blogxgwz4 Extjs4 treePanel checkBox 多選框全
CheckBox複選框的
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="你最大的夢想是：" android:textColor="#0
input checkbox複選框取值
<table> <!--列表表頭 開始 --> <tr class="ui-widget ui-state-hover" style="height: 36px;"> <th><inpu
提交表單中Select列表或Checkbox複選框的多個值到Struts2 Action
以提交Select列表的值為例。 1.HTML寫法： <select name="authorizedUsers" id="authorizedUsers" multiple="multiple"> <option value="1">
input checkbox 複選框大小修改
有的時候，需要使用複選框，但是複選框有時候預設的太小，這時候就需要加大複選框，網上搜了很多，都沒有直接的解決方法， 一種是採用div 擴大點選範圍或者是採用圖片替代。 直到看到下面一篇介紹，使用了下，才可以達到我想要的效果，試了下ie和谷歌都支援。 參考 https:/
給java的JFileChooser元件新增一個複選框
JFileChooser是個好用的元件，但在java swing程式設計時可能有時需要擴充套件一下它的功能，比如我想給它增加一個複選框，這樣可以給選擇的檔案或資料夾做更詳細的控制。比如，我想給選擇的資料夾讓使用者自己選擇是否處理子資料夾。 要怎麼實現這個功能呢，看了 JFi
LayaAir UI 元件 # CheckBox 複選框
目錄 CheckBox 元件 預設checkbox 資源 自定義元件面板 獲取選中狀態 CheckBox 元件 Package laya.ui 類 public class CheckBo
html中標籤用法解析及如何設定checkbox複選框的預設選中狀態
本文導語: html中<checkbox>標籤用法解析及如何設定checkbox複選框的預設選中狀態（由www.169it.com蒐集整理)html中複選框Checkbox物件代表一個 HTML 表單中的 一個選擇框。html中複選框Checkbox物件的屬性屬性 描述a...
checkBox複選框，獲得選中那一行所有列的資料
function showCol(){ var check=$("input[name='one']:checked");//選中的複選框 check.each(function(){ va
AngularJS判斷checkbox/複選框是否選中並實時顯示
最近因為專案原因重新撿起來了AngularJS ,遇到老問題複選框選中和值的問題。 先貼以前網上找的解決方案 http://www.cnblogs.com/CheeseZH/p/4517701.html 個人感覺太麻煩了，程式碼太多,然後自己找了點資料，現在如下自己的解決方
checkbox複選框
<!--在el-checkbox元素中定義v-model繫結變數，單一的checkbox中，預設繫結變數的值會是Boolean，選中為true。--> <el-checkbox v-model="checked">備選項</el-checkbox> data(
android studio checkbox複選框的選中，並顯示打印出來
package com.example.checkbox; import android.os.Bundle; import android.app.Activity; import android.view.Menu; import android.view.View; import android.v