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

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


表结构,只有一张表,包括了父子关系:

easyUI 下拉框 树形菜单加载父/子节点_第1张图片

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

部门名称:
公司:

js代码:

 $('#seleDepartName').combotree({
            url: "../Depart/Test",
            method: 'get',
            loadFilter: function (rows) {
                return convert(rows);
            }
        });
可以看到请求了depart/test方法,其中loadFilter相当于一个自定义的过滤方法,在页面加载时返回过来的仍然是和表里一样的结构:

easyUI 下拉框 树形菜单加载父/子节点_第2张图片

下面贴出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树菜单。

到这儿就加载完毕了,下面我们看一下界面的效果:

easyUI 下拉框 树形菜单加载父/子节点_第3张图片

以上就是一个三级的菜单,回顾表结构里面,销售节点的父部门为业务部,测试部门节点的父部门为销售,由此可以做出无限极的菜单树,结束。

ps:每一篇博客都是自己学习的新知识点,意味着脑瓜子更充实一些,以后积累的知识越来越多,这也是一笔宝贵的财富。

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

你可能感兴趣的:(前端)