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>

Easyui datagrid combobox输入框下拉(取消)选值和编辑已选值处理的更多相关文章

  1. Easyui datagrid combobox输入框非法输入判断与事件总结

    datagrid combobox输入框非法输入判断与事件总结 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 常见事件 onSelect // 选择下拉列表 ...

  2. 雷林鹏分享：jQuery EasyUI 表单 - 过滤下拉数据网格

    jQuery EasyUI 表单 - 过滤下拉数据网格 下拉数据网格(Combogrid)组件和下拉框(Combobox)组件的共同点是,除了都具有下拉面板以外,它们都是基于数据网格(Datagrid ...

  3. 第二百一十二节，jQuery EasyUI，Combo(自定义下拉框)组件

    jQuery EasyUI,Combo(自定义下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Combo(自定义下拉框)组件的使用方 ...

  4. 雷林鹏分享：jQuery EasyUI 表单 - 格式化下拉框

    jQuery EasyUI 表单 - 格式化下拉框 本教程向您展示如何创建一个简单的下拉框(Combobox),让它在下拉框中显示图片项.您可以在下拉框(combobox)上使用 formatter ...

  5. 基于jQuery的input输入框下拉提示层(自动邮箱后缀名)

    基于jQuery的input输入框下拉提示层,方便用户输入邮箱时的提示信息,需要的朋友可以参考下     效果图   // JavaScript Document (function($){ $.fn ...

  6. Ionic-wechat项目边开发边学（四）:可伸缩输入框,下拉刷新, 置顶删除

    摘要 上一篇文章主要介绍了ion-list的使用, ion-popup的使用, 通过sass自定义样式, localStorage的使用, 自定义指令和服务. 这篇文章实现的功能有消息的置顶与删除, ...

  7. 随手记一次用C#正则表达式获取下拉菜单html标签<select>以及相关属性值

    随手记一次用C#正则表达式获取下拉菜单html标签<select>以及相关属性值 1:有如下html: .................. <select id="aaa ...

  8. select 下拉框 disabled 则 Form 获取不到值

    select 下拉框 disabled 则 Form 获取不到值 有时候需要禁用 下拉框 , 但是表单又需要获取到 下拉框的值. 解决方案1: 使用文本框和隐藏域 来代替下拉框 disabled 解决 ...

  9. layui select 下拉框 级联 动态赋值 与获取选中值

    //下拉框必须在 class="layui-form" 里 不然监听事件没有作用 <div class="layui-form" > <div ...

随机推荐

  1. 基于Win10极简SonarQube C#代码质量分析

    博客有些好些时间未更新了,这几个月的时间里,离开了实习的公司.大学毕了业.来了新公司.转了户口,有点忙,最近总算稍微闲下来了,打算重新拾起博客,坚持写下去. 言归正转,什么是SonarQube ? S ...

  2. “==”、“equals()”、“hashcode()”之间的秘密

    前言 万丈高楼平地起,今天的聊点基础而又经常让人忽视的话题,比如“==”与“equals()”区别?为何当我们重写完"equals()"后也要有必要去重写"hashcod ...

  3. kubernetes实践之四：深入理解控制器（workload）

    一．Pod与controllers的关系 controllers:在集群上管理和运行容器的对象 通过label-selector相关联 Pod通过控制器实现应用的运维,如伸缩,升级等 二．Deploy ...

  4. Java之品优购课程讲义_day06（7）

    商品录入[SKU 商品信息]5.1 需求分析 基于上一步我们完成的规格选择,根据选择的规格录入商品的 SKU 信息,当用户选择相应的规格,下面的 SKU 列表就会自动生成,如下图:实现思路:实现思路: ...

  5. 基于geoserver的REST服务完成mysql数据源动态发布

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1. 背景 在之前的<简析GeoServer服务的内部文件组织以及 ...

  6. android---动画入门(一)

    android 动画分为两类,View Animation(视图动画)和property Animation(属性动画),View Animation(视图动画)包含了Tween Animation和 ...

  7. 在Salesforce成长：需要好奇心

    今天的正题,今天谈谈好奇心和技术.这两天北大学霸Cherry分两次问了我两个问题,都触发了很好的结果和思考,让大家都受益. 第一天是她在做Salesforce和Flexible Report集成项目中 ...

  8. SQLsever存储过程分页查询

    使用存储过程实现分页查询,SQL语句如下: USE [DatebaseName] --数据库名 GO /****** Object: StoredProcedure [dbo].[Pagination ...

  9. Powershell-查询当前文件目录层级结构

    日常工作中我们往往有需要导出当前共享环境或磁盘文件目录层级结构等的需求,最早在目录少的情况下我们使用CMD下tree 命令可以很清晰的看到目录.文件层级结构,那么我们又如何通过powershell直观 ...

  10. java的poi技术读取和导入Excel实例

    本篇文章主要介绍了java的poi技术读取和导入Excel实例,报表输出是Java应用开发中经常涉及的内容,有需要的可以了解一下. 报表输出是Java应用开发中经常涉及的内容,而一般的报表往往缺乏通用 ...