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

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

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

相关文章推荐

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

JqueryEasyUI中combotree 加载下拉框中的树形结构 最近工作中会用到一些树形结构的处理,所以就找到了一些处理树的相关东西: JqueryEasyUI是一个不错...

jQuery easyUI combobox下拉框 联动 级联

新做了一个下拉框联动的小功能,网上找的是省市级联,之前也套用了,这次是自定义的一个级联,相当于父子关系,有如下两张表: 表A: (分类表)(相当于主菜单) 表B: (目录表)(相当于子菜单) ...
  • nnn_net
  • nnn_net
  • 2016年08月17日 11:06
  • 8164

EasyUI 树形菜单

树(tree)在网页中以树形结构显示分层数据。它向用户提供展开、折叠、拖拽、编辑和异步加载功能。 1、用法 (1)、树(tree)定义在 元素中。该标记可定义叶节点和子节点。节点将是 ul 列表...

jQuery EasyUI使用教程之创建树形下拉框

树形下拉框是一个带有下列树形结构的下拉框。它可以作为一个表单字段进行使用,可以提交给远程服务器。 在本教程中,我们将要创建一个注册表单,带有name、address、city字段。city字段是...

easyui 下拉框树

$('#cbLevel').combotree({                 url: "../../../Handler.ashx?ac=Lesson.BindMenu41",      ...

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

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

ajax请求后台得到json数据后动态生成树形下拉框

$(function(){ $.ajax({ url:"departmentAction_getAllDep.action", type:"post", success:function(result...

从数据库读取数据动态生成树形菜单示例

用C#从数据库读取数据,动态生成树形菜单例子 数据库表 前台代码 树形  body{background:#ecefff} .navPoint{COLOR:#666...
  • drr789
  • drr789
  • 2012年09月11日 12:27
  • 36419

easyui和zTree分别实现树型下拉框

最近工作中需要用到树型下拉框,因为项目中树形结构使用的是zTree,然后就百度,结果出来效果不好看,后来就试着用了easyui的comboTree,虽然比较好看,但是跟整体的bootstrap风格有点...

EasyUI DataGrid DetailView(数据表格详细展示带子表格)

Mark一下EASY UI 的数据表格详细展示使用记录。 第一步:创建页面布局 这一步主要是引用Easy UI的JS,除了easyui.min.js还有datagrid-detailview....
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:easyUI 下拉框 树形菜单加载父/子节点
举报原因:
原因补充:

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