原文作者：小巷而已 【[layui-xtree 3.0]依賴layui form模塊 復選框tree插件】 原文鏈接： https://blog.csdn.net/xianglikai1/article/details/79032278
js 代碼 ：
<link href="layui/css/layui.css" rel="stylesheet" /> <style type="text/css"> form { width: 500px; margin: 10px auto; } h1, h2, h3 { padding: 10px 0; } a { text-align: right; font-size: 18px; color: #1C86EE; } .xtree_contianer { width: 500px; border: 1px solid #9C9C9C; overflow: auto; margin-bottom: 30px; background-color: #fff; padding: 10px 0 25px 5px; } .div-btns { margin: 20px 0; } .layui-form-label { width: 60px !important; } </style> </head> <body> <!--別忘記form 以及form的class--> <form class="layui-form"> <h1>Layui - Xtree 3.0 </h1> <h3>基於layui form模塊的一款帶復選框的樹型插件</h3> <div style="text-align:right;"><a href="http://fly.layui.com/jie/19038/" target="_blank">查看文檔</a></div> <h2>demo1、最基礎的用法 - 直接綁定json</h2> <h3>這里使用的三個參數是必須的</h3> <div id="xtree1" class="xtree_contianer"></div> <h2>demo2、最基礎的用法 - 異步加載</h2> <h3>服務端延遲2秒，可看清加載提示</h3> <div id="xtree2" style="height:400px;overflow:auto;" class="xtree_contianer"></div> <h2>demo3、最完整的參數用法</h2> <h3>請仔細的看參數吧</h3> <div id="xtree3" class="xtree_contianer"></div> <h2>提供的四種方法</h2> <h3>下面事件作用於demo3，輸出為console.log();</h3> <h3>demo寬度適合與F12左右分屏</h3> <div class="div-btns"> <input type="button" id="btn1" value="獲取全部[選中的][末級節點]原checkbox DOM對象，返回Array" class="layui-btn layui-btn-fluid" /> </div> <div class="div-btns"> <input type="button" id="btn2" value="獲取全部原checkbox DOM對象，返回Array" class="layui-btn layui-btn-fluid" /> </div> <div class="div-btns"> <input type="button" id="btn3" value="更新數據，重新渲染" class="layui-btn layui-btn-fluid" /> </div> <div class="div-btns"> <div class="layui-form-item"> <label class="layui-form-label">value值</label> <div class="layui-input-block"> <input type="text" id="txt1" placeholder="如：jd1.1" autocomplete="off" class="layui-input"> </div> </div> <input type="button" id="btn4" value="通過value值找父級DOM對象，頂級節點與錯誤值均返回null" class="layui-btn layui-btn-fluid" /> </div> <h3>有建議，有疑問，有BUG，請聯系QQ：151446298</h3> <h3> Layui官網：<a href="http://www.layui.com" target="_blank">www.layui.com</a> 感謝賢心 <i class="layui-icon" style="font-size: 30px; color: #1E9FFF;"></i> </h3> </form> </body> <script src="layui/layui.js"></script> <script src="js/jquery-2.1.1.min.js"></script> <!--引用xtree--> <script src="layui-xtree/layui-xtree.js"></script> <script type="text/javascript"> var json=[{title:'電動車管理',checked:false,value: 1,data:[{title:'電動車',checked:false,value: 27,data:[]},{title:'電動車登記',checked:false,value: 7,data:[]},{title:'信息查詢與修改',checked:false,value: 8,data:[]},{title:'發卡量查詢',checked:false,value: 113,data:[]}]},{title:'基站管理',checked:false,value: 2,data:[{title:'安裝地點管理',checked:false,value: 9,data:[]},{title:'基站配置管理',checked:false,value: 11,data:[]},{title:'基站狀態查詢',checked:false,value: 10,data:[]}]},{title:'數據統計',checked:false,value: 118,data:[{title:'類型統計',checked:false,value: 119,data:[]},{title:'點位統計',checked:false,value: 120,data:[]}]},{title:'報警管理',checked:false,value: 3,data:[{title:'報警登記',checked:false,value: 12,data:[]},{title:'報警記錄查詢',checked:false,value: 13,data:[]},{title:'實時地圖監控',checked:false,value: 14,data:[]},{title:'電子巡查',checked:false,value: 123,data:[]}]},{title:'記錄查詢',checked:false,value: 4,data:[{title:'電動車行駛記錄查詢',checked:false,value: 15,data:[]},{title:'電動車行駛軌跡查詢',checked:false,value: 16,data:[]},{title:'相關視頻調用',checked:false,value: 17,data:[]},{title:'低電量電子車牌查詢',checked:false,value: 18,data:[]},{title:'操作日志查詢',checked:false,value: 19,data:[]},{title:'超速查詢',checked:false,value: 26,data:[]},{title:'基站車輛查詢',checked:false,value: 111,data:[]},{title:'實時位置查詢',checked:false,value: 28,data:[]},{title:'異常查詢',checked:false,value: 116,data:[]}]},{title:'數據分析',checked:false,value: 93,data:[{title:'同行車輛研判',checked:false,value: 94,data:[]},{title:'交通熱力圖',checked:false,value: 102,data:[]}]},{title:'特種管理',checked:false,value: 103,data:[{title:'對象布控',checked:false,value: 104,data:[{title:'警用裝備布控',checked:false,value: 106,data:[]},{title:'車輛布控',checked:false,value: 107,data:[]},{title:'人員布控',checked:false,value: 108,data:[]},{title:'其他',checked:false,value: 109,data:[]}]},{title:'布控報警',checked:false,value: 105,data:[{title:'報警監控',checked:false,value: 110,data:[]}]}]},{title:' 信息推送',checked:false,value: 97,data:[{title:'個體推送',checked:false,value: 98,data:[]},{title:'群體推送',checked:false,value: 99,data:[]},{title:'消息推送',checked:false,value: 112,data:[]},{title:'電話推送',checked:false,value: 115,data:[]},{title:'短信推送',checked:false,value: 122,data:[]}]},{title:'系統設置',checked:false,value: 5,data:[{title:'修改密碼',checked:false,value: 20,data:[]},{title:'菜單管理',checked:false,value: 21,data:[]},{title:'用戶管理',checked:false,value: 22,data:[]},{title:'部門管理',checked:false,value: 23,data:[]},{title:'角色管理',checked:false,value: 24,data:[]},{title:'權限管理',checked:false,value: 25,data:[]},{title:'發卡管理',checked:false,value: 114,data:[]},{title:'手持機管理',checked:false,value: 117,data:[]}]},{title:'版本信息',checked:false,value: 6,data:[]}]; layui.use(['form'], function () { var form = layui.form; //1、最基礎的用法 - 直接綁定json var xtree = new layuiXtree({ elem: 'xtree' //(必填) 放置xtree的容器，樣式參照 .xtree_contianer , form: form //(必填) layui 的 from , data: json //(必填) json數據 , isopen: true //加載完畢后的展開狀態，默認值：true , ckall: true //啟用全選功能，默認值：false , ckallback: function () { } //全選框狀態改變后執行的回調函數 , icon: { //三種圖標樣式，更改幾個都可以，用的是layui的圖標 open: "" //節點打開的圖標 , close: "" //節點關閉的圖標 , end: "" //末尾節點的圖標 } , color: { //三種圖標顏色，獨立配色，更改幾個都可以 //open: "#EE9A00" //節點圖標打開的顏色 //, close: "#EEC591" //節點圖標關閉的顏色 //, end: "#828282" //末級節點圖標的顏色 } , click: function (data) { //節點選中狀態改變事件監聽，全選框有自己的監聽事件 //console.log(data.elem); //得到checkbox原始DOM對象 //console.log(data.elem.checked); //開關是否開啟，true或者false //console.log(data.value); //開關value值，也可以通過data.elem.value得到 //console.log(data.othis); //得到美化后的DOM對象 } });// xtree1 end // <img src="layui/images/face/20.gif" /> //獲取全部[選中的][末級節點]原checkbox DOM對象，返回Array document.getElementById('btn1').onclick = function () { var oCks = xtree3.GetChecked(); //這是方法 for (var i = 0; i < oCks.length; i++) { console.log(oCks[i].value); } } //獲取全部原checkbox DOM對象，返回Array document.getElementById('btn2').onclick = function () { var oCks = xtree1.GetAllCheckBox(); //這是方法 for (var i = 0; i < oCks.length; i++) { if (oCks[i].checked == true) { console.log(oCks[i].value); } } } //更新數據，重新渲染 document.getElementById('btn3').onclick = function () { xtree3.render(); } //通過value值找父級DOM對象，頂級節點與錯誤值均返回null document.getElementById('btn4').onclick = function () { var oCks = xtree3.GetParent(document.getElementById('txt1').value); //這是方法 if (oCks != null) { //如果返回的對象不為null，則獲取到父節點了，如果為null，說明這個值對應的節點是一級節點或是值錯誤 console.log(oCks.value); } else { console.log('無父級節點或value值錯誤'); } } });// layui.use end </script>
直接上圖：
