1. 程式人生 > >easyUI 下拉框 樹形選單載入父/子節點

easyUI 下拉框 樹形選單載入父/子節點

最近忙著做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:每一篇部落格都是自己學習的新知識點,意味著腦瓜子更充實一些,以後積累的知識越來越多,這也是一筆寶貴的財富。

這世界上有三樣東西是別人不走的,一是吃進胃裡的食物,二是藏在心裡的夢想,三是讀進大腦的書。