关闭

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

标签: easyui结构javascriptcombo box
3070人阅读 评论(0) 收藏 举报
分类:

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

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

3
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:42310次
    • 积分:623
    • 等级:
    • 排名:千里之外
    • 原创:19篇
    • 转载:10篇
    • 译文:0篇
    • 评论:1条
    文章分类
    最新评论