jQuery EasyUI — 只選擇combotree的葉子節點
阿新 • • 發佈：2019-02-01
1.定義comboree
當選中的是葉子節點時，返回葉子節點；當選中的不是葉子節點時，拋錯誤訊息，且combotree的值不改變。
EasyUI版本：jquery-easyui-1.4
<input id="cc">2.comboree的資料來源$(function(){ $('#cc').combotree({ width: 200, data: jsonData, onBeforeSelect: function(node) { // 判斷是否是葉子節點 var isLeaf = $(this).tree('isLeaf', node.target); if (!isLeaf) { $.messager.show({ msg: '請選擇葉子節點！' }); // 返回false表示取消本次選擇操作 return false; } } }); });
3.html測試的原始碼var jsonData = [{ "id":1, "text":"My Documents", "children":[{ "id":11, "text":"Photos", "state":"closed", "children":[{ "id":111, "text":"Friend" },{ "id":112, "text":"Wife" },{ "id":113, "text":"Company" }] },{ "id":12, "text":"Program Files", "children":[{ "id":121, "text":"Intel" },{ "id":123, "text":"Microsoft Office" },{ "id":124, "text":"Games", "checked":true }] },{ "id":13, "text":"index.html" }] }];
供測試用
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic ComboTree - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <link rel="stylesheet" type="text/css" href="../demo.css"> <script type="text/javascript" src="../../jquery.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script> </head> <body> <script> var jsonData = [{ "id":1, "text":"My Documents", "children":[{ "id":11, "text":"Photos", "state":"closed", "children":[{ "id":111, "text":"Friend" },{ "id":112, "text":"Wife" },{ "id":113, "text":"Company" }] },{ "id":12, "text":"Program Files", "children":[{ "id":121, "text":"Intel" },{ "id":123, "text":"Microsoft Office" },{ "id":124, "text":"Games", "checked":true }] },{ "id":13, "text":"index.html" }] }]; $(function(){ $('#cc').combotree({ width: 200, data: jsonData, onBeforeSelect: function(node) { // 判斷是否是葉子節點 var isLeaf = $(this).tree('isLeaf', node.target); if (!isLeaf) { $.messager.show({ msg: '請選擇葉子節點！' }); // 返回false表示取消本次選擇操作 return false; } } }); }); </script> <h2>Basic ComboTree</h2> <p>Click the right arrow button to show the tree panel.</p> <div style="margin:20px 0"></div> <input id="cc"> </body> </html>