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

原创 2016年08月30日 12:02:40

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

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

jQuery EasyUI使用教程之加载父/子节点到树中

通常表示一个树节点的方式就是在每一个节点存储一个parentid,这个也被称为邻接列表模型。直接加载这些数据到树中是不允许的。但是我们可以在加载树形菜单之前,把它转换为标准的树形数据格式。树插件提供一...
  • AABBbaby
  • AABBbaby
  • 2016年07月07日 09:54
  • 904

EasyUI 树型菜单 异步加载树

问题描述:想用EasyUI实现树结构,点击加号时,展开的子节点不正确。 问题解决: 展开第一层节点和展开其他子节点一样,可以调用一个方法。当前节点的id能自动传到后台。 效果图: 关键代码: 后...
  • shi_longyan
  • shi_longyan
  • 2015年07月08日 08:33
  • 3283

easyui datagrid单元格添加下拉框

今天项目需求,需要在datagrid
  • kabuqinuo229891
  • kabuqinuo229891
  • 2014年08月25日 20:36
  • 6990

JqueryEasyUI中combotree 加载下拉框中的树形结构

JqueryEasyUI中combotree 加载下拉框中的树形结构 最近工作中会用到一些树形结构的处理,所以就找到了一些处理树的相关东西: JqueryEasyUI是一个不错...
  • gaoqiao1988
  • gaoqiao1988
  • 2014年10月22日 20:36
  • 5100

JQueryEasyUI 组件 树形下拉框 ComboTree

1,介绍 定义  树形下拉框结合选择控件和下拉树控件  继承关系  combo   tree 每个节点都具备以下属性: · id:节点ID,对加载远程数据很重要。 · text:显示节...
  • qq_35019337
  • qq_35019337
  • 2017年03月11日 21:01
  • 820

easyui 下拉选择树(ComboTree) 的实现

很多时候都会用到下拉框, 有时候为了显示更好的效果, 会用到树型下拉框, 实际就是下拉框中带了一个树型的控件, 所以它自然继承自tree和combobox. 一: 前台: 1. 首先从前台来讲, ...
  • u011650291
  • u011650291
  • 2016年09月04日 19:50
  • 12065

easyui-combotree实现树形结构的下拉控件,并实现节点回显

combotree实现下拉框的属性结构
  • Ditto_zhou
  • Ditto_zhou
  • 2017年07月06日 17:45
  • 772

easyui combotree 下拉树组件 查找

转载 http://bftodou.sinaapp.com/archives/67 easyui提供的ComboTree组件没有查找功能,如果结点多的话很不好找,想要的功能是在ComboTree中...
  • dyx_nt88
  • dyx_nt88
  • 2015年03月03日 17:34
  • 2085

父子结构(树形结构)下拉框

项目中可能经常要做具有父子结构的下拉框,像这样: 实战时,思维一直是用js插件来实现,今天重新学习HTML5时,发现可以直接用select和option实现,具体代码如下: ...
  • csm0912
  • csm0912
  • 2016年10月03日 11:20
  • 4310

easyUI的下拉框combobox与树tree联动

参与联动的有 2 个combobox 和 1 个tree: 联动流程:combobox1 控制 combobox2,combobox2 控制 tree1联动代码: //先写被控制者,再写控制...
  • leftfist
  • leftfist
  • 2015年01月15日 09:45
  • 8459
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:easyUI 下拉框 树形菜单加载父/子节点
举报原因:
原因补充:

(最多只允许输入30个字)