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 &#19979;&#25289;&#26694; disabled &#21017; Form &#33719;&#21462;&#19981;&#21040;&#20540;
select 下拉框 disabled 则 Form 获取不到值 有时候需要禁用 下拉框 , 但是表单又需要获取到 下拉框的值. 解决方案1: 使用文本框和隐藏域 来代替下拉框 disabled 解决 ...
-
layui select 下拉框 级联 动态赋值 与获取选中值
//下拉框必须在 class="layui-form" 里 不然监听事件没有作用 <div class="layui-form" > <div ...
随机推荐
-
Windows和Windows Phone应用终于可以使用FFmpeg了
(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:曾经在Windows Phone上想开发一个支持多种格式的媒体播放器是比较困难的一件事 ...
-
【java】：解析xml
==========================================xml文件<?xml version="1.0" encoding="GB231 ...
-
算法导论----VLSI芯片测试； n个手机中过半是好的，找出哪些是好手机
对于分治(Divide and Conquer)的题目,最重要是 1.如何将原问题分解为若干个子问题, 2.子问题中是所有的都需要求解,还是选择一部分子问题即可. 还有一点其实非常关键,但是往往会被忽 ...
-
【转帖】ios上取得设备唯一标志的解决方案
原文地址:http://lqzit.iteye.com/blog/2070306 注意:keychina设置完之后,项目目录里的“项目名.entitlements”文件不是手动创建出的,而是在按照如下 ...
-
html背景为灰色 不能操作,中间div可以操作
<container style="position: absolute; top: 0px; left: 0px; width: 0px; height: 0px; z-index: ...
-
收藏了4年的Android 源码分享
Android 超过2个G的源代码集合~~几乎涵盖了所有功能效果的实现,一应俱全~~应有尽有~~ 360云盘地址:Android 各类源码集合汇总 (提取码:f930) 另外,附上Github上及自己 ...
-
SASS 中变量的默认值
SASS 中定义的变量,后设置的值会覆盖旧的值. $color: red; $color: blue; .btn { color: $color; } 编译后为: .btn { color: blue ...
-
api跨域
1.找方法名称是get开头的2.找get请求类型的 自定义webapi的路由规则,控制到action 1.跨域设置:(服务端)webconfig文件中,system.webServer节点下添加 &l ...
-
Yii1打印当前请求所有执行的SQL及耗时
我们在熟悉新的项目了解业务的时候,可以有很多方式.看项目文档说明:和了解项目身边的人沟通:通过自己度代码调试,但是一步步调试打印语句或许有点慢,如果可以调出当前请求的所有语句,那么很快可以熟悉他的业务 ...
-
AVD启动报错：Running an x86 based Android Virtual Device (AVD) is 10x faster
1.cmd窗口中输入emulator -avd test 启动AVD时报错: Running an x86 based Android Virtual Device (AVD) is 10x fast ...