Easyui datagrid combobox输入框下拉(取消)选值和编辑已选值处理
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输入框下拉(取消)选值和编辑已选值处理的更多相关文章
- Easyui datagrid combobox输入框非法输入判断与事件总结
datagrid combobox输入框非法输入判断与事件总结 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 常见事件 onSelect // 选择下拉列表 ...
- 雷林鹏分享：jQuery EasyUI 表单 - 过滤下拉数据网格
jQuery EasyUI 表单 - 过滤下拉数据网格 下拉数据网格(Combogrid)组件和下拉框(Combobox)组件的共同点是,除了都具有下拉面板以外,它们都是基于数据网格(Datagrid ...
- 第二百一十二节，jQuery EasyUI，Combo(自定义下拉框)组件
jQuery EasyUI,Combo(自定义下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Combo(自定义下拉框)组件的使用方 ...
- 雷林鹏分享：jQuery EasyUI 表单 - 格式化下拉框
jQuery EasyUI 表单 - 格式化下拉框 本教程向您展示如何创建一个简单的下拉框(Combobox),让它在下拉框中显示图片项.您可以在下拉框(combobox)上使用 formatter ...
- 基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
基于jQuery的input输入框下拉提示层,方便用户输入邮箱时的提示信息,需要的朋友可以参考下 效果图 // JavaScript Document (function($){ $.fn ...
- Ionic-wechat项目边开发边学（四）:可伸缩输入框,下拉刷新, 置顶删除
摘要 上一篇文章主要介绍了ion-list的使用, ion-popup的使用, 通过sass自定义样式, localStorage的使用, 自定义指令和服务. 这篇文章实现的功能有消息的置顶与删除, ...
- 随手记一次用C#正则表达式获取下拉菜单html标签<select>以及相关属性值
随手记一次用C#正则表达式获取下拉菜单html标签<select>以及相关属性值 1:有如下html: .................. <select id="aaa ...
- select 下拉框 disabled 则 Form 获取不到值
select 下拉框 disabled 则 Form 获取不到值 有时候需要禁用 下拉框 , 但是表单又需要获取到 下拉框的值. 解决方案1: 使用文本框和隐藏域 来代替下拉框 disabled 解决 ...
- layui select 下拉框 级联 动态赋值 与获取选中值
//下拉框必须在 class="layui-form" 里 不然监听事件没有作用 <div class="layui-form" > <div ...
随机推荐
- jenkins + supervisor + ansible 实现netcore程序的多机一键部署
上一篇我们简单的说到了使用jenkins+supervisor实现了一个单机版的多副本部署,但是在更多的场景下还是需要netcore程序的多机一键部署,那么多 机器间如何分发呢? 肯定不能使用scp这 ...
- 如何在MySQL中查询每个分组的前几名【转】
问题 在工作中常会遇到将数据分组排序的问题,如在考试成绩中,找出每个班级的前五名等. 在orcale等数据库中可以使用partition语句来解决,但在mysql中就比较麻烦了.这次翻译的文章就是专门 ...
- 全球排名第一的开源ERP Odoo v12 最新一键安装体验版正式发布
引言 Odoo 12.0是目前全球Odoo社区最新推出的产品版本代号,该产品具有划时代的意义,增加了如互联网级的知识库网盘功能.工业互联网的IOT设备矩阵管控功能,全新的Python Sass前端引擎 ...
- python3 文件操作练习 r+ w+ a+ 的理解
突然来一句:“慨然有经略四方之志” 文件操作三部曲:1.先用open打开 2.再写关闭 3.再回到中间写操作 为啥要刚打开就关闭 那是很容易望,所以先写上... 基本格式 f = open( ...
- 细说 JavaScript 七种数据类型
在 JavaScript 规范中,共定义了七种数据类型,分为 “基本类型” 和 “引用类型” 两大类,如下所示: 基本类型:String.Number.Boolean.Symbol.Undefined ...
- 使用WSL吧
WSL(Windows Subsystem for Linux)已经装在电脑上好一阵子了,谁如果还没装的,可以看看本文,至少知道个大概,觉得有用的话知道该如何做. 简介 WSL简单说就是一个能让你在W ...
- PHP中$GLOBALS和global的区别
很多人都认为$GLOBALS['var']和global $var只是写法上不同,其实并不是这样 根据官方的解释是 $GLOBALS['var']是外部全局变量$var的本身, 而global $v ...
- 如何以编程方式签署应用程序包（C ++）
了解如何使用SignerSignEx2函数对应用包进行签名. 如果要使用Packaging API以编程方式创建Windows应用商店应用包,则还需要在部署之前对应用包进行签名.Packaging A ...
- shell read的用法
1. Read的一些选项 Read可以带有-a, -d, -e, -n, -p, -r, -t, 和 -s八个选项. -a :将内容读入到数值中 echo -n "Input muliple ...
- 用pyinstaller打包python程序，解决打包时的错误：Cannot find existing PyQt5 plugin directories
解决方法就是用everything搜索PyQt5,找到 /Library/plugins路径下的PyQt5文件夹,将里面的dll动态库pyqt5qmlplugin.dll复制出来 按照错误提示的路径, ...