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 ...
随机推荐
- Caffe源码理解3：Layer基类与template method设计模式
目录 写在前面 template method设计模式 Layer 基类 Layer成员变量 构造与析构 SetUp成员函数 前向传播与反向传播 其他成员函数 参考 博客:blog.shinelee. ...
- 女朋友也能看懂的Zookeeper分布式锁原理
前言 关于分布式锁,在互联网行业的使用场景还是比较多的,比如电商的库存扣减,秒杀活动,集群定时任务执行等需要进程互斥的场景.而实现分布式锁的手段也很多,大家比较常见的就是redis跟zookeep ...
- 对.NET Core未来发展趋势的浅层判断
经常听到园里.NET开发人员在抱怨生态不如JAVA,想要转JAVA,所谓打不过你,我就加入你!杜兰特的思维方式固然是获取总冠军的一种方式,但是我们要关起门来问自己有没有杜兰特的实力. 用开发生态来类比 ...
- 如何在ASP.NET Core中自定义Azure Storage File Provider
文章标题:如何在ASP.NET Core中自定义Azure Storage File Provider 作者:Lamond Lu 地址:https://www.cnblogs.com/lwqlun/p ...
- cesium 之加载地形图 Terrain 篇（附源码下载）
前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...
- .NET Framework和 .Net Core实现不一致的API之 `EmailAddressAttribute`
.NET Framework和 .Net Core实现不一致的API之 EmailAddressAttribute Intro 现在我们的类库项目大多是 NETStandard2.0 项目,但是 ne ...
- 神奇的选择器 :focus-within
CSS 的伪类选择器和伪元素选择器,让 CSS 有了更为强大的功能. 伪类大家听的多了,伪元素可能听到的不是那么频繁,其实 CSS 对这两个是有区分的. 有个错误有必要每次讲到伪类都提一下,有时你会发 ...
- [Swift-2019力扣杯春季决赛]4. 有效子数组的数目
给定一个整数数组 A,返回满足下面条件的 非空.连续 子数组的数目: 子数组中,最左侧的元素不大于其他元素. 示例 1: 输入:[1,4,2,5,3] 输出:11 解释:有 11 个有效子数组,分别是 ...
- [Err] 1055 - Expression #1 of ORDER BY clause is not in GROUP BY clause 的问题 MySQL
问题:[Err] 1055 - Expression #1 of ORDER BY clause is not in GROUP BY clause and contains nonaggregate ...
- 【TensorFlow篇】--Tensorflow框架可视化之Tensorboard
一.前述 TensorBoard是tensorFlow中的可视化界面,可以清楚的看到数据的流向以及各种参数的变化,本文基于一个案例讲解TensorBoard的用法. 二.代码 设计一个MLP多层神经网 ...