easyUI 下拉框 樹形選單載入父/子節點
阿新 • • 發佈:2019-01-25
最近忙著做easyUI搭建的專案,有很多父子關係的表需要互相依賴 在前臺展示為選單樹或者是下拉框,最開始沒有思路的時候就想著百度,然後百度出來兩種,一種是下拉框樹,一種是多級選單樹,前者只有兩層,後者不帶下拉,於是想兩者結合起來做一個Demo,如下:
表結構,只有一張表,包括了父子關係:
以下是html程式碼,在js裡用ajax請求API獲取資料:
<table> <tr> <td> <div>部門名稱: </div> <select style="margin-bottom: 20px; margin-right: 20px; width: 200px; height: 32px;" class="easyui-combotree" id="seleDepartName" name="city" /> </td> <td> <div> <div>公司:</div> <input style="margin-bottom: 20px; margin-right: 20px; width: 200px; height: 32px;" id="seleCompanyId" class="easyui-combobox" name="language" data-options=" url:'../api/xxx', method:'get', valueField:'CompanyId', textField:'CompanyName', panelHeight:'auto', editable:false, required:true"> </div> </td> </tr> <tr> <td> <div style="float: none; width: 200px; margin-top: 50px;"> <div> <a href="#" class="easyui-linkbutton" id="btnSubmit" style="width: 100%; height: 32px">提交</a> </div> </div> </td> </tr> </table>
js程式碼:
$('#seleDepartName').combotree({
url: "../Depart/Test",
method: 'get',
loadFilter: function (rows) {
return convert(rows);
}
});
可以看到請求了depart/test方法,其中loadFilter相當於一個自定義的過濾方法,在頁面載入時返回過來的仍然是和表裡一樣的結構:
下面貼出loadFilter的方法內容,相當於對json內容的一個轉換,因為在easyUI樹裡只識別id,text,children這些欄位,另外自定義的可以加attributes......
function convert(rows) { function exists(rows, ParentDepartId) { for (var i = 0; i < rows.length; i++) { if (rows[i].DepartId === ParentDepartId) return true; } return false; } debugger; var nodes = []; // get the top level nodes for (var i = 0; i < rows.length; i++) { var row = rows[i]; if (!exists(rows, row.ParentDepartId)) { nodes.push({ id: row.DepartId, text: row.DepartName }); } } var toDo = []; for (var i = 0; i < nodes.length; i++) { toDo.push(nodes[i]); } while (toDo.length) { var node = toDo.shift(); // the parent node // get the children nodes for (var i = 0; i < rows.length; i++) { var row = rows[i]; if (row.ParentDepartId == node.id) { var child = { id: row.DepartId, text: row.DepartName }; if (node.children) { node.children.push(child); } else { node.children = [child]; } toDo.push(child); } } } return nodes; }
詳情可見easyUIDemo樹選單。
到這兒就載入完畢了,下面我們看一下介面的效果:
以上就是一個三級的選單,回顧表結構裡面,銷售節點的父部門為業務部,測試部門節點的父部門為銷售,由此可以做出無限極的選單樹,結束。
ps:每一篇部落格都是自己學習的新知識點,意味著腦瓜子更充實一些,以後積累的知識越來越多,這也是一筆寶貴的財富。
這世界上有三樣東西是別人搶不走的,一是吃進胃裡的食物,二是藏在心裡的夢想,三是讀進大腦的書。