文档章节

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

Geeyu
 Geeyu
发布于 2017/08/29 12:28
字数 1154
阅读 41
收藏 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
博文 56
码字总数 30168
作品 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

没有更多内容

加载失败,请刷新页面

加载更多

聊聊redisson的DelayedQueue

序 本文主要研究一下redisson的DelayedQueue maven <dependency><groupId>org.redisson</groupId><artifactId>redisson</artifactId><version>3.8.1</version></dependenc......

go4it
13分钟前
1
0
一张图看懂JVM

JVM结构示意图 JVM总体概述 JVM总体上是由类装载子系统(ClassLoader)、运行时数据区、执行引擎、内存回收这四个部分组成。其中我们最为关注的运行时数据区,也就是JVM的内存部分则是由方法...

小致dad
14分钟前
0
0
安全管理标准

安全生产严重等级分类: 故障频次: 风险等级矩阵:

乔老哥
45分钟前
2
0
数据结构“树”的相关微视频

今天在腾讯视频上闲逛,然後发现一个叫“岚人”的用户上传了几段小视频,基本上都在5分钟以内,讲解了关于树的一些结构和算法。零代码,非常适合初学者入门。不过,对于老鸟来说,这也是非常...

Iridium
57分钟前
1
0
10-利用思维导图梳理JavaSE-Java 集合

10-利用思维导图梳理JavaSE-Java 集合 主要内容 1.Collection接口 2.Set接口 2.1.Set接口概述 2.2.HashSet类 2.3.TreeSet类 2.4.SortedSet接口 3.List接口 3.1.List接口概述 3.2.ArrayList类...

飞鱼说编程
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部