最近忙著做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>
 

 $('#seleDepartName').combotree({
            url: "../Depart/Test",
            method: 'get',
            loadFilter: function (rows) {
                return convert(rows);
            }
        });

下面貼出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;
        }
 

到這兒就載入完畢了，下面我們看一下介面的效果：

以上就是一個三級的選單，回顧表結構裡面，銷售節點的父部門為業務部，測試部門節點的父部門為銷售，由此可以做出無限極的選單樹，結束。

ps:每一篇部落格都是自己學習的新知識點，意味著腦瓜子更充實一些，以後積累的知識越來越多，這也是一筆寶貴的財富。

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