Easyui datagrid combobox输入框下拉(取消)选值和编辑已选值处理

发布时间:2019-03-31 06:00:17发布者:Mr.Zhang阅读(543)

datagrid combobox输入框下拉(取消)选值和编辑已选值处理

by:授客 QQ:1033553122

 

测试环境

jquery-easyui-1.5.3

 

需求场景

如下,在datagrid中新增、编辑记录:

新增时通过点选指定combobox下拉列表项来实现选择、取消选择所点项(多选combobx:如果输入框中没有该选项,则选中该项,并自动显示在combobox输入框中,否则取消选中该项,并自动去除combobox中对应的项;)

编辑时,点击下拉三角,打开下拉列表,列表中自动选中同输入框中的值对应的列表项;另外,输入框支持手动输入,如果手动输入的值不在下拉列表中,则收起下拉框时,自动去除不在下拉列表项中的值

 

 

 

 

实现思路和解决方案

这里新增时利用combobox自带的特性就可以满足需求,问题在于编辑时,怎么让combobox自动识别输入框中的值,即自动让输入框中的已选值和下拉列表项关联。(记录刚进入编辑时,这里的已有值是纯文本,和下拉列表是没有关联的。)

 

出解决方案之前得先认识下combobox特性

1)如果combobox输入框当前valueField属性和 textField属性值可以在下拉列表即通过loadData获取的选项中找到匹配,则才会产生关联。

2)调用setText设置textField属性值,然后调用setValue设置valueField属性值时,最后执行combobox 的loadData方法时(如果combobox还没有加载数据的情况下),就等同于未选中选项的情况下,手动点选下拉列表项,会自动触发onSelect事件

3)多选combobox,如果点选下拉列表项,如果点击之前选项已选中,则会取消选中该选项,并去掉combobox中对应项,自动触发onSelect事件,onSelect事件处理函数携带一个参数,接收被点击项目相关信息(包括text和value信息),同时这会自动触发onUnSelect事件,onUnselect事件处理函数携带一个参数,用于接收被点击项相关信息(包括text和value信息)

如果点击之前选项未选中,则选中该选项,自动触发onSelect事件,并自动在combobx输入框中输入被选项

4)单选combobox(设置combobox为不可编辑,只可点选的情况下做的验证)

如果点击之前选项未选中,则选中该选项,自动触发onSelect事件,onSelect事件处理函数携带一个参数,接收被点击项目相关信息(包括text和value信息),并自动在combobx输入框中输入被选项,否则不会触发该事件函数。

5)隐藏、收起combobox下拉列表框时,会自动触发onHidePannel事件,该事件处理函数不携带参数

 

解决方案:

1)设置所属项目combobox多选,可编辑,为其添加onSelect,onUnSelect,OnHidePannel事件处理函数

设置全局变量project_id_list 初始化值为 [],执行onSelect事件函数时,判断点选项的value值是否存在project_id_list中,如果存在则移除,否则添加到project_id_list中,当执行onUnSelect事件函数时,判断点选项的value值是否在project_id_list中,如果已存在,则移除,执行OnHidePannel事件函数时,设置combobox的value值为project_id_list;

提交保存记录请求前,转project_id_list为字符串,提交后存储到mysql数据库,获取记录时,返回该值

初始化编辑时,获取所属项目combobox当前text对应的value,转为list形式后(setValue参数类型要求如此),并调用setValue函数为combobox赋值,然后调用loadData函数加载数据,让已选项和下拉列表关联

 

2)设置所属环境combobox单选,不可编辑,为其添加onSelect事件处理函数

设置全局变量envronment_id 初始化值为null,执行onSelect事件函数时,保存点选项给 获取所属环境对应的value值为envronment_id

请求保存记录后存储到mysql数据库,获取记录时,返回该值

 

初始化编辑时,获取所属环境combobox当前text对应的value,调用setValue函数为combobox赋值,然后调用loadData函数加载数据,让已选项和下拉列表关联

 

 

代码实现(片段)

 

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    ……略

    <script>

 

     ……略

        var environment = undefined;  // 所属环境

        var environment_id = null; // 记录所属环境id

        var project_id_list = [];      // 所属项目id list

        var order = undefined; // 顺序

 

        ……略

 

        // 点击 保存 按钮的函数实现

        function saveRow(){

                ……略

                project_id_list = project_id_list.toString();

                if (ifInsert == true) { // 新增

                    var url = '/action/addDatabaseSetting';

                    var params = {

                        ……略

                        environment:environment,

                        environment_id:environment_id,

                        ……略

                        project_name:project_name,

                        project_id:project_id_list,

                        ……略

                    };

                } else if (ifInsert == false) { // 修改

                    var url = '/action/editDatabaseSetting';

                    var params = {

                        ……略

                        environment:environment,

                        environment_id:environment_id,

                        ……略

                        project_name:project_name,

                        project_id:project_id_list

                    };

                }

 

                $.post(url, params, function(data,status){

                            if (data == 'success') {

                                $.messager.alert('提示','保存成功', 'info');

                            } else {

                                $.messager.alert('错误', '保存失败: ' + data, 'error');

                            }

                            $('#Database_setting').datagrid('reload');

                        }

                );

            } else {

                $.messager.alert('告警', '保存失败,请检查是否设置必填(必选)项', 'error');

                $('#Database_setting').datagrid('reload');

            }

 

            ……略

            project_id_list = [];

            ……略

        }

 

        // 点击 取消 按钮的函数实现

        function cancelEditRow() {

            ……略

            project_id_list = [];

            ……略

        }

 

        // 点击表格 修改 按钮的函数实现

        function editRow(rowID, index){

               ……略

                var projectType = rowsSelected[0].project_type;

                var projectIDList = rowsSelected[0].project_id.split(',');

                var envIDList = rowsSelected[0].environment_id.toString().split(',');

 

 

                // 初始化行组件的值

                initDataForRowComponets(projectType, '修改', projectIDList, envIDList);

                ifInsert = false;

            }

        }

 

 

        // 初始化行记录组件值

        function initDataForRowComponets(projectType, opType, projectIDList, envIDList) {

            var environmentEditor =  $('#Database_setting').datagrid('getEditor', {index: editIndex, field: 'environment'});

            var projectEditor =  $('#Database_setting').datagrid('getEditor', {index: editIndex, field: 'project_name'});

 

            if (opType == '新增') {

                 ……略

            } else if (opType == '修改') {

                // 做这一步是为了让项目名称、环境名称已选文本值和下拉列表中的选项关联

                $(projectEditor.target).combobox('setValues', projectIDList);

                $(environmentEditor.target).combobox('setValues', envIDList);

 

                // 请求所属环境下拉列表数据

                $.get('/action/getEnvs', function(data,status) {

                    var jsonData = JSON.parse(data);

                    if (jsonData['result'] == 'success') {

                        $(environmentEditor.target).combobox('loadData', jsonData['data']);

 

                    } else {

                        $.messager.alert('错误信息', '获取可用环境列表出错: ' + jsonData['data'], 'error');

                    }

                });

 

            }

            ……略

 

        }

 

 

        // 下拉点选所属项目列表选项时触发的事件

        function onSelectForProjectCombobox(row) {

            var index = project_id_list.indexOf(row.id2);

 

            // 如果不存在,则添加记录id属性值到数组,否则移除数组

            if(index != -1) {

                project_id_list.splice(index, 1);

            } else {

                project_id_list.push(row.id2);

            }

        }

 

        //取消所属项目列表项时触发事件

        function onUnselectForProjectCombobox(row) {

            var index = project_id_list.indexOf(row.id2.toString());

            if(index != -1) { // 如果被取消项的id值存在数组中,则移除对应id

                project_id_list.splice(index, 1);

            }

        }

 

        // 收起 所属项目 下拉列表框时触发的事件

        function onHidePanelForProjectCombobox(row){

            // 设置commbox输入框的文本值

            var projectNameEditor = $('#Database_setting').datagrid('getEditor', {index: editIndex, field:'project_name'});

            $(projectNameEditor.target).combobox('setValue', project_id_list);

        }

 

 

        //选择所属环境下拉列表项时触发事件

        function onSelectForEnvCombobox(row) {

            environment_id = row.id

        }

 

    </script>

</head>

<body>

<table class="easyui-datagrid" rownumbers="true" pagination="true"    ……略>

    <thead>

    <tr>

       ……略

        <th data-options="field:'project_name', align: 'left', editor:{

                        type:'combobox',

                        options:{

                            valueField:'id2',

                            textField:'choice',

                            required:true,

                            editable:true,

                            multiple:true,

                            panelHeight:'auto',

                            onSelect: onSelectForProjectCombobox,

                            onUnselect:onUnselectForProjectCombobox,

                            onHidePanel:onHidePanelForProjectCombobox,

                        }}" width="400px">所属项目</th>

        <th data-options="field:'environment', align: 'center', editor:{

                        type:'combobox',

                        options:{

                            valueField:'id',

                            textField:'choice',

                            required:true,

                            editable:false,

                            panelHeight:'auto',

                            onSelect:onSelectForEnvCombobox

                        }}" width="130px">所属环境</th>

                        ……略

    </tr>

    </thead>

</table>

 

……略

</body>

</html>

 





本文转自博客园,原文地址:https://www.cnblogs.com/shouke/p/10629652.html