easyUI 下拉框 树形菜单加载父/子节点

最近忙着做easyUI搭建的项目，有很多父子关系的表需要互相依赖 在前台展示为菜单树或者是下拉框，最开始没有思路的时候就想着百度，然后百度出来两种，一种是下拉框树，一种是多级菜单树，前者只有两层，后者不带下拉，于是想两者结合起来做一个Demo，如下：

表结构，只有一张表，包括了父子关系：

以下是html代码，在js里用ajax请求API获取数据：

                                

                                    

                                        
部门名称: 
                                        
                                    
                                    

                                        

                                            
公司:
                                            
                                        
                                    
                                
                                


                                    

                                        

                                            

                                                提交
                                            
                                        
                                    
                                
                            

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:每一篇博客都是自己学习的新知识点，意味着脑瓜子更充实一些，以后积累的知识越来越多，这也是一笔宝贵的财富。

这世界上有三样东西是别人抢不走的,一是吃进胃里的食物,二是藏在心里的梦想,三是读进大脑的书。