欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-12 20:02:08
datagrid combobox输入框下拉(取消)选值和编辑已选值处理 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 需求场景 如下,在datagrid中新增、编辑记录: 新增时通过点选指定combobox下拉列表项来实现选择、取消选择所点项(多选com ......

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

by:授客 qq:1033553122

 

测试环境

jquery-easyui-1.5.3

 

需求场景

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

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

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

 Easyui datagrid 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>