EasyUI 實現級聯下拉框可複用靜態或動態

時間 2019-11-21

原文原文鏈接

效果

經過一個按鈕打開窗口，初始界面以下

能夠增刪，第三級會根據第一級的選擇，顯示爲輸入或者下拉，二者都爲combobox

問題及解決

選擇器獲取不到JQuery對象

// EasyUI會改變其DOM結構（理所固然），因此應該優先使用EasyUI提供的API
$('#first_level').combobox('select', first);

新添加的行沒有樣式

// 從新渲染，使樣式生效
$.parser.parse($('.dynamic-tr:last'));

關鍵方法

// 設置選中事件
element.combobox({
    onSelect: function (record) {
        // 初始化下拉框的內容
        element.combobox('loadData', data);
    }
})

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>