文档章节

EasyUI 实现级联下拉框 可复用 静态或动态

Geeyu
 Geeyu
发布于 2017/08/29 12:28
字数 1154
阅读 39
收藏 0
点赞 0
评论 0

效果

  1. 通过一个按钮打开窗口,初始界面如下

初始界面

  1. 可以增删,第三级会根据第一级的选择,显示为输入或者下拉,两者都为combobox

界面


问题及解决

  1. 选择器获取不到JQuery对象
// EasyUI会改变其DOM结构(理所当然),所以应该优先使用EasyUI提供的API
$('#first_level').combobox('select', first);
  1. 新添加的行没有样式
// 重新渲染,使样式生效
$.parser.parse($('.dynamic-tr:last'));
  1. 关键方法
// 设置选中事件
element.combobox({
    onSelect: function (record) {
        // 初始化下拉框的内容
        element.combobox('loadData', data);
    }
})
  1. Json 数据结构的设计比较重要

实现

HTML

<div id="dialog_condition" style="width:700px;height: 400px">
	<div style="margin-left: -30px;margin-top: 30px">
		<form>
			<table class="table_list">
				<tr id="append_line" style="text-align: center">
					<td><input name="" hidden></td>
					<td>
						<a id="condition_add_btn" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
					</td>
					<td>
						<input id="first_level" name="1" prompt="first_level" class="easyui-combobox" style="width: 160px" data-options="editable:false"/>
					</td>
					<td>
						<input id="second_level" name="2" prompt="second_level" class="easyui-combobox" style="width: 160px" data-options="editable:false"/>
					</td>
					<td>
						<input id="third_level" name="3" prompt="third_level" class="easyui-textbox" style="width: 160px" data-options="panelHeight:0, hasDownArrow:false"/>
					</td>
					<td>
						<a id="condition_del_btn" class="easyui-linkbutton" plain="true">删除</a>
					</td>
				</tr>
			</table>
		</form>
	</div>
</div>

JavaScript


<script type="text/javascript">
    
    /**
     * 1. 不同菜单只需要更改 data 部分
     * 2. 表单元素的 name 需要自己更改
     * 3. 获取第三极下拉框值的时候要区分 输入 还是 选中
     * 4. 提示值需要自己修改
     */

    /************************************** start api **********************************/
    // 提交表单
    function submitConditions() {
        alert('submit...')
    }
    /************************************** end api **********************************/

    /************************************** start data **********************************/
    // 需要动态查询的三级下拉框,在此指定查询接口及combobox字段,查询接口应返回一个 json 数组
    var data_third = [{
        'DATA_INDEX': ['CUSTOMER', 'USERID']
    },{
        'CUSTOMER': {
            valueField: 'value',
            textField: 'text',
            url: ''
        },
        'USERID': {
            valueField: 'value',
            textField: 'text',
            url: 'getXxxList'
        }
    }];

    // 一级下拉框
    var data_first = [{
        value: 'TITLE',
        text: '主题'
    },{
        value: 'DESCRIBE',
        text: '描述'
    },{
        value: 'TITLEORDESCRIBE',
        text: '主题或描述'
    },{
        value: 'PRIORITY',
        text: '优先级'
    },{
        value: 'STATUS',
        text: '状态'
    },{
        value: 'SOURCE',
        text: '来源'
    },{
        value: 'CUSTOMER',
        text: '客户'
    },{
        value: 'USERID',
        text: '受理坐席'
    }];

    // 二级下拉框
    var comparator_default = [{
        value: 'YES',
        text: '是'
    },{
        value: 'NO',
        text: '不是'
    },{
        value: 'BH',
        text: '包含'
    },{
        value: 'NBH',
        text: '不包含'
    },{
        value: 'SW',
        text: '以某个值开头'
    },{
        value: 'EW',
        text: '以某个值结尾'
    }];
    var data_second = {
        'TITLE': comparator_default,
        'DESCRIBE': comparator_default,
        'TITLEORDESCRIBE': comparator_default,
        'PRIORITY': [{
            value: 'YES',
            text: '是'
        },{
            value: 'NO',
            text: '不是'
        }],
        'STATUS': comparator_default,
        'SOURCE': comparator_default,
        'CUSTOMER': comparator_default,
        'USERID': comparator_default
    };

    // 回显时的参数
    var data_load_Construction = {
        url: '',
        queryParam: [{
            key: 'abc',
            value: 'abcValue'
        }],
        idField: 'id',
        valueFieldFirst: 'field',
        textFieldFirst: '',
        valueFieldSecond: 'conditions',
        textFieldSecond: '',
        valueFieldThird: '',
        textFieldThird: 'value'
    };

    window.data_first = data_first;
    window.data_second = data_second;
    window.data_third = data_third;
    window.data_load_Construction = data_load_Construction;
    /************************************** end data **********************************/

    /************************************** start init **********************************/
    $(function () {
        initCondition();
    });
    function initCondition() {
        // 创建窗口
        $('#dialog_condition').dialog({
            title: '条件',
            width: 700,
            height: 400,
            closed: true,
            modal: true,
            buttons:[
                {text:'取消', iconCls:'icon-cancel', handler:function () {
                    cancelSubmitConditions();
                }},
                {text:'确定', iconCls:'icon-ok', handler:function () {
                    submitConditions();
                }}
            ]
        });
        // 打开、关闭窗口按钮
        $('#openDialog').on('click', function () {
            $('#dialog_condition').dialog('open')
        });
        function cancelSubmitConditions() {
            $('#dialog_condition').dialog('close');
        }
        // 解析样式
        $.parser.parse($('#dialog_condition'));

        // 增删按钮
        $('#condition_add_btn').on('click', function () {
            // 有个很难理解的bug,第二次给一级下拉绑定 onselect 方法会失败,因此用一下方法跳过 “第二次”
            addCondition();
            $('.dynamic-tr:last').remove();
            addCondition();
        });

        // 初始化菜单
        initSelect($('#first_level'), window.data_first);

        // 初始化下拉框选中事件
        initSelectAction(window.data_second, $('#first_level'), $('#second_level'), $('#third_level'));
    }
    /************************************** end init **********************************/

    /************************************** start main **********************************/
    function addCondition() {
        var new_tr = $("<tr class='dynamic-tr'>" +
            "<td style='margin-left: 50px'>" +
                "<input name='id' class='dynamic-id' hidden>" +
            "</td>" +
            '<td></td>' +
            "<td>" +
                "<input name='' prompt='first_level' class='easyui-combobox dynamic-td-first' style='width: 160px' data-options='editable:false'/>" +
            "</td>" +
            "<td>" +
                "<input name='' prompt='second_level' class='easyui-combobox dynamic-td-second' style='width: 160px' data-options='editable:false'/>" +
            "</td>" +
            "<td>" +
                "<input name='' prompt='third_level' class='easyui-textbox dynamic-td-third' style='width: 160px' data-options='panelHeight:0, hasDownArrow:false'/>" +
            "</td>" +
            "<td>" +
                "<a class='easyui-linkbutton condition_del_btn' plain='true'>删除</a>" +
            "</td>" + "</tr>");
        var append_line = $('.dynamic-tr:last');
        if (append_line.length === 0)
            $('#append_line').after(new_tr);
        else
            append_line.after(new_tr);
        // 重新渲染,使样式生效
        $.parser.parse($('.dynamic-tr:last'));
        // 添加删除事件
        $('.condition_del_btn').on('click', function () {
            $(this).parent().parent().remove();
        });
        // 初始化下拉框及选中事件
        initSelect($('.dynamic-td-first:last'), window.data_first);
        initSelectAction(window.data_second, $('.dynamic-td-first:last'), $('.dynamic-td-second:last'), $('.dynamic-td-third:last'));
    }

    function initSelect(element, data) {
        element.combobox('clear');
        element.combobox('loadData', data);
    }
    
    function initSelectAction(data, element, elementNext, elementLast) {
        element.combobox({
            onSelect: function (record) {
                elementNext.combobox('clear');
                elementNext.combobox('loadData', data[record.value]);
                var indexs = window.data_third[0].DATA_INDEX;//索引
                var contents = window.data_third[1];//数据
                if (indexs.indexOf(record.value) != -1)
                    setThirdSelectAsyn(elementLast, contents[record.value]);
                else
                    setThirdSelect(elementLast);
            }
        })
    }
    function setThirdSelectAsyn(element, data) {
        $.ajax({
            url: data['url'],
            success: function (result) {
                result = window.data_first;
                var data_third = [];
                result.forEach(function (e) {
                    var option = {};
                    option['value'] = e[data['valueField']];
                    option['text'] = e[data['textField']];
                    data_third.push(option);
                });
                element.combobox('clear');
                element.combobox('loadData', data_third);
                element.combobox({
                    panelHeight: 200,
                    hasDownArrow: true,
                    editable: false
                });
            }
        })
    }
    function setThirdSelect(element) {
        element.combobox({
            panelHeight: 0,
            hasDownArrow: false,
            editable: true
        });
        element.combobox('clear');
    }
    function getConditions(url, queryParams) {
        resetConditions();
        var query = {};
        if (queryParams) {
            query = queryParams;
        } else {
            var preQuery = window.data_load_Construction.queryParam;
            preQuery.forEach(function (e) {
                query[e.key] = e.value;
            })
        }
        $.ajax({
            url: url || window.data_load_Construction.url,
            data: query,
            success: function (data) {
                loadConditions(data);
            }
        })
    }
    function resetConditions() {
        $('#form_condition').form('reset');
        $('.dynamic-tr').remove();
    }
    function loadConditions(data) {
        data.forEach(function (e, i) {
            var id = e[window.data_load_Construction.idField];
            var first = e[window.data_load_Construction.valueFieldFirst] || e[window.data_load_Construction.textFieldFirst];
            var second = e[window.data_load_Construction.valueFieldSecond] || e[window.data_load_Construction.textFieldSecond];
            var third = e[window.data_load_Construction.valueFieldThird] || e[window.data_load_Construction.textFieldThird];
            if (i === 0) {
                $('#id').val(id);
                $('#first_level').combobox('select', first);
                $('#second_level').combobox('select', second);
                if (window.data_third[0].DATA_INDEX.indexOf(first) != -1)
                    $('#third_level').combobox('setValue', third);
                else
                    $('#third_level').combobox('setText', third);
            } else {
                $('#condition_add_btn').click();
                $('.dynamic-id:last').val(id);
                $('.dynamic-td-first:last').combobox('select', first);
                $('.dynamic-td-second:last').combobox('select', second);
                if (window.data_third[0].DATA_INDEX.indexOf(first) != -1)
                    $('.dynamic-td-third:last').combobox('setValue', third);
                else
                    $('.dynamic-td-third:last').combobox('setText', third);
            }
        })
    }
    /************************************** end main **********************************/
</script>

© 著作权归作者所有

共有 人打赏支持
Geeyu
粉丝 2
博文 55
码字总数 29592
作品 0
昌平
EasyUI Combobox中getValue和getText

在组织部项目中使用的Combobox都是通过<input>标签实现的,如下: <input id="checkPlace" class="easyui-combobox" name="checkPlace" data-options="valueField:'id',textField:'text',ur......

霜叶情
04/12
0
0
EasyUI基础入门之Parser(解析器)

前言 JQuery EasyUI提供的组件包括功能强大的DataGrid,TreeGrid、面板、下拉组合等。用户可以组合使用这些组件,也可以单独使用其中一个。(使用的形式是以插件的方式提供的) EasyUI体系结构 ...

LCore
2014/07/11
0
9
jquery easyui日期控件中,在页面里用JS拿到设置的日期值的方法

有这样一个日期文本框: <input type="text" name="mdate" size="20" value="" id="mdate" class="easyui-datebox"/> 使用easyui给日期文本框选定一个日期值,然后,要在JS中拿到此日期框中...

Amamatthew
2014/09/18
0
0
如何用easyui动态加载表格标题

在最近做的项目中涉及到了需要加载大量表格的功能,采用了easyui的datagrid,但是发现datdagrid表格标题需要手动写,这在表格多的情况是一件很麻烦的事情。经过了long long time 终于研究出来...

MissGu
2015/03/28
0
0
jquery easyui 弹出消息框

<html> <head> <!-- 导入easyui插件的js和css样式; --> <link rel="stylesheet" type="text/css" href="/EasyuiDemo/scripts/jquery-easyui-1.1.1/themes/default/easyui.css"> <link rel="s......

一念三千
2012/11/01
0
0
AngularJS和EasyUI结合使用的注意点

最近在着手用angular重构一个项目,原来的前台是纯easyui做的,最近花了一周学了angular,决定把它们结合下,用纯html 和 暴露后台rest api搞起。结果在ng-view多页切换的时候遇到了一个问题...

Big_BoBo
2013/12/26
0
8
jQuery Easyui datagrid对可编辑列的级联操作 ..

jQuery Easyui datagrid对可编辑列的级联操作 .. 编辑行的级联操作,关键点是要获取到到当前编辑行需要级联的列的Editor对象。 获取级联列Editor对象的步骤: 获取当前编辑行(基本上就是grid当...

夏悸
2012/11/07
0
0
easyui之datagrid(combobox类型的editor)

easyui的datagrid使用combobox作为editor,从combobox的下拉列表选值并提交url。 比较简单,之前由于对easyui不熟,也没查到合适的教程,走了不少弯路,现终于实现,整理一下。 <script type...

一剑倾城
2015/10/28
0
0
JQuery EasyUi之界面设计——前言与界面效果(一)

如果冯巩的开场白是“观众朋友们,我想死你们了”,那么我的开场白是“最近一直很忙,很久没有发文了”。 前面说过了EXT.NET,这里顺便再说说JQuery EasyUI。为啥我会选择JQuery EasyUI呢?主...

易水寒丶开源
2015/10/27
0
0
Jquery插件--easyUI属性汇总

找了个时间看了下EasyUI插件,对它的插件感觉是很舒服,特地把Easy UI的大部分功能属性做了一下汇总。 此属性列表请对照jQuery EasyUI 1.0.5,关于它的更多资讯请猛击这里。 属性分为CSS片段...

kevin_pang
2012/03/14
0
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

about git flow

  昨天元芳做了git分支管理规范的分享,为了拓展大家关于git分支的认知,这里我特意再分享这两个关于git flow的链接,大家可以看一下。 Git 工作流程 Git分支管理策略   git flow本质上是...

qwfys
今天
1
0
Linux系统日志文件

/var/log/messages linux系统总日志 /etc/logrotate.conf 日志切割配置文件 参考https://my.oschina.net/u/2000675/blog/908189 dmesg命令 dmesg’命令显示linux内核的环形缓冲区信息,我们可...

chencheng-linux
今天
0
0
MacOS下给树莓派安装Raspbian系统

下载镜像 前往 树莓派官网 下载镜像。 点击 最新版Raspbian 下载最新版镜像。 下载后请,通过 访达 双击解压,或通过 unzip 命令解压。 检查下载的文件 ls -lh -rw-r--r-- 1 dingdayu s...

dingdayu
今天
0
0
spring boot使用通用mapper(tk.mapper) ,id自增和回显等问题

最近项目使用到tk.mapper设置id自增,数据库是mysql。在使用通用mapper主键生成过程中有一些问题,在总结一下。 1、UUID生成方式-字符串主键 在主键上增加注解 @Id @GeneratedValue...

北岩
今天
2
0
告警系统邮件引擎、运行告警系统

告警系统邮件引擎 cd mail vim mail.py #!/usr/bin/env python#-*- coding: UTF-8 -*-import os,sysreload(sys)sys.setdefaultencoding('utf8')import getoptimport smtplibfr......

Zhouliang6
今天
0
0
Java工具类—随机数

Java中常用的生成随机数有Math.random()方法及java.util.Random类.但他们生成的随机数都是伪随机的. Math.radom()方法 在jdk1.8的Math类中可以看到,Math.random()方法实际上就是调用Random类...

PrivateO2
今天
1
0
关于java内存模型、并发编程的好文

Java并发编程:volatile关键字解析    volatile这个关键字可能很多朋友都听说过,或许也都用过。在Java 5之前,它是一个备受争议的关键字,因为在程序中使用它往往会导致出人意料的结果。在...

DannyCoder
昨天
0
0
dubbo @Reference retries 重试次数 一个坑

在代码一中设置 成retries=0,也就是调用超时不用重试,结果DEBUG的时候总是重试,不是0吗,0就不用重试啊。为什么还是调用了多次呢? 结果在网上看到 这篇文章才明白 https://www.cnblogs....

奋斗的小牛
昨天
2
0
数据结构与算法3

要抓紧喽~~~~~~~放羊的孩纸回来喽 LowArray类和LowArrayApp类 程序将一个普通的Java数组封装在LowArray类中。类中的数组隐藏了起来,它是私有的,所以只有类自己的方法才能访问他。 LowArray...

沉迷于编程的小菜菜
昨天
0
0
spring boot应用测试框架介绍

一、spring boot应用测试存在的问题 官方提供的测试框架spring-boot-test-starter,虽然提供了很多功能(junit、spring test、assertj、hamcrest、mockito、jsonassert、jsonpath),但是在数...

yangjianzhou
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部