var idList = []; var jsonNodes = $('#tree').jstree(true).get_json('#', { flat: true }); $.each(jsonNodes, function (i, val) { idList.push($(val).attr('id')); })
手里有個項目是選擇人員；需求是只選擇人員；部門不需要被選擇。（吐槽一萬遍這個jsTree的文檔真難用；有些方法都是搜的別人別的；嘗試后才搞定的）
首先，遍歷全部子節點
然后，判斷這些子節點是否有子級，如果有，就隱藏其復選框，
優化：給樹設置自己的圖標。
附上源碼：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="js/jquery-1.9.1.min.js"></script> 7 <script src=" dist/jstree.min.js "></script> 8 <link rel="stylesheet" href=" dist/themes/default/style.min.css " /> 9 <link rel="stylesheet" href="dist/jsTree.css"> 10 <link rel="stylesheet" href="layui/css/layui.css"> 11 <style> 12 .no_checkbox>i.jstree-checkbox{display:none} 13 .layui-icon{color: #0dbba1;} 14 </style> 15 </head> 16 <body style="padding: 40px;"> 17 <div id="MjsTree" style="width:400px;"></div> 18 <script src="layui/layui.all.js"></script> 19 <script> 20 $(function () { 21 22 let $tree = $('#MjsTree'); 23 $tree.jstree({ 24 "core":{ 25 "data":{ 26 "url" : 'json/data.json', 27 "dataType" : "json" 28 }, 29 "themes" : { 30 "variant" : "large",//加大 31 "ellipsis" : true //文字多時省略 32 }, 33 "check_callback" : true 34 }, 35 "checkbox":{ 36 "three_state": false,//父子不聯動False 37 }, 38 "plugins" : [ "checkbox","themes"] 39 }); 40 let idList = [];//定義一個空數組放，全部數據的id 41 $tree.bind('ready.jstree', function (event,data) { 42 // debugger; 43 let jsonNodes = $tree.jstree(true).get_json('#', { flat: true }); 44 45 $.each(jsonNodes, function (i, val) { 46 let node = $tree.jstree().get_node(this);//獲取當前對象的json數據 47 let idn =node.id; 48 let lvl = node.parents.length;//屬於第幾級別；數字越大；級別越低 49 50 //判斷是否有下級 51 if($tree.jstree(true).is_parent(node)){ 52 $("#"+idn+"_anchor").find('i.jstree-checkbox').hide();//判斷滿足條件的id；找到i標簽隱藏其復選框 53 $tree.jstree(true).set_icon(node,"layui-icon layui-icon-group");//設置圖標 54 }else { 55 $tree.jstree(true).set_icon(node,"layui-icon layui-icon-friends");//設置圖標 56 } 57 idList.push($(val).attr('id'));//獲取的id屬性給數組 58 }) 59 console.log(idList); 60 }); 61 62 //獲取選中節點的數據 63 $tree.on('select_node.jstree', function(event, data) { 64 console.log(data.selected); 65 }); 66 67 }) 68 69 </script> 70 </body> 71 </html>
有人會問【.no_checkbox>i.jstree-checkbox{display:none}】這句樣式沒有用上呢？因為這是另外一種可以達到隱藏復選框效果的方法；
因為這里用上了。