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 ...
随机推荐
- HttpClient Received an unexpected EOF or 0 bytes from the transport stream
请求https链接时报错,奇怪的是pc1正常,pc2异常 Unhandled Exception: System.AggregateException: One or more errors occu ...
- 20180726 - Windows 10 Pro 下远程桌面连接提示“出现身份验证错误”
问题:Windows 10 Pro 下远程桌面连接提示“出现身份验证错误” [Window Title]远程桌面连接 [Content]出现身份验证错误.要求的函数不受支持 远程计算机: 192.16 ...
- Java中char,short,int,long占几个字节和多少位
1.字节:byte:用来计量存储容量的一种计量单位:位:bit 2.一个字节等于8位 1byte = 8bit char占用的是2个字节 16位,所以一个char类型的可以存储一个汉字. 整型: b ...
- hexo 报错 Cannot read property 'replace' of null
详细错误信息: FATAL Cannot read property 'replace' of null TypeError: Cannot read property 'replace' of nu ...
- Scala设计模式
尽管Scala还有一些基于语言特性的设计模式,单本文还是着重于介绍大家所周知的经典设计模式,因为这些设计模式被认为是开发者之间交流的工具. 创建型设计模式 1.工厂方法模式 2.延迟加载模式 3.单例 ...
- 解决Ajax请求时无法重定向的问题
今天发现,当使用Ajax请求时,如果后台进行重定向到其他页面时是无法成功的,只能在浏览器地址栏输入才能够实现重定向. Ajax默认就是不支持重定向的,它是局部刷新,不重新加载页面. 需要实现的功能是, ...
- 详细介绍Spring Boot 2.0的那些新特性与增强
以Java 8 为基准 Spring Boot 2.0 要求Java 版本必须8以上, Java 6 和 7 不再支持. 内嵌容器包结构调整 为了支持reactive使用场景,内嵌的容器包结构被重构了 ...
- Docker & ASP.NET Core (1)：把代码连接到容器
和这种蛋糕一样,Docker的容器和镜像也是使用类似的分层文件系统构建而成的. 这样做的好处就是可以节省硬盘空间,也利于复用等等.因为Docker基于镜像创建容器的时候,其镜像是共享的:而且镜像里面的 ...
- 【Caffe篇】--Caffe从入门到初始及各层介绍
一.前述 Caffe,全称Convolutional Architecture for Fast Feature Embedding.是一种常用的深度学习框架,主要应用在视频.图像处理方面的应用上.c ...
- springboot~configserver里对重要信息进行RSA加密
简介 参考:https://springcloud.cc/spring-cloud-dalston.html#_encryption_and_decryption_2 RSA非对称加密有着非常强大的安 ...