Easyui datagrid combobox输入框非法输入判断与事件总结
datagrid combobox输入框非法输入判断与事件总结
by:授客 QQ:1033553122
测试环境
jquery-easyui-1.5.3
常见事件
onSelect // 选择下拉列表项时触发的事件
onHidePanel // 收起下拉列表时触发的事件
onChange // commbox输入框的值改变时触发事件
单选Combobox
针对单选Combobox
1、点选
通过点选下拉列表中可选项,并自动收起下拉列表
如果选取项和当前输入框的值不一样,会先后触发事件:onSelect -> onChange -> onHidePanel;
如果选取项和当前输入框的值一样,仅会触发事件:onHidePanel
2、输入
通过在Combobox输入框中手动输入数据
如果停止输入后的数据和输入前的值不一样,则触发事件:onChange
连续不停的输入(时间间隔够短)只能算一次输入,只会触发一次onChange事件,收起下拉框时自动触发onHidePanel事件。
根据以上规律,我们可以通过是否触发onSelect来区分是否是“手动”输入还是“点选”输入,进而判断输入是否合法:如果是“手动”输入,那就判断输入值是否在下拉列表里,否则判断选取值是否和当前combobox输入框的一致。
关键代码
<script type="text/javascript">
var textChanged=false; // 用于判断是否combobox选取、输入的内容是否改变
var rowsSelected=undefined; // 用于记录选取的行
// 选择下拉列表项时触发的事件
function onSelect(row) {
rowsSelected = row;
}
// commbox输入框的值改变时触发事件
textChanged = true;
}
// 收起下拉列表时触发的事件
function onHidePanel() {
var text = $(this).combobox('getText'); // 获取输入的值
if (textChanged) {
if (rowsSelected == undefined) { // 表明是手动输入的值
// 循环遍历下拉列表框的选项,判断输入值是否存在选项中,否则清空
// getData none 返回加载的数据。
var comboboxData = $(this).combobox('getData');
var if_found = false; // 用于标记输入值是否在选项中
for (var j=0; j<comboboxData.length; j++) {
var dataObj = comboboxData[j];
if (dataObj.productname == text) {
if_found = true;
break;
} else {
if_found = false;
}
}
if (!if_found) {
$(this).combobox('clear'); // clear none 清除组合框(combobox)的值。
$.messager.alert('提示', '请选择现有项', 'warning');
}
} else {
if (text != rowsSelected.productname) {
$(this).combobox('clear');
$.messager.alert('提示', '请选择现有项', 'warning'); }
}
textChanged = false;
}
rowsSelected = undefined;
}
</script>
<table id="dg" class="easyui-datagrid" title="Row Editing in DataGrid" style="width:1000px;height:auto"
data-options="
iconCls: 'icon-edit',
singleSelect: false,
toolbar: '#tb',
url: 'datagrid_data1.json',
method: 'get',
......
">
<thead>
<tr>
<th data-options="field:'productid',width:100,
formatter:function(value,row){
return row.productname;
},
editor:{
type:'combobox',
options:{
valueField:'productid',
textField:'productname',
method:'get',
url:'products.json',
required:true,
onSelect:onSelect,
onHidePanel:onHidePanel,
onChange:onChange
}
}">Product</th>
......
</tr>
</thead>
</table>
多选Combobox
1、点选
新增未选:点选还没有被选中的选项,先后触发事件: onSelect -> onChange
取消已选:点选已经被选中的选项,先后触发事件:onUnselect -> onChange
收起下拉列表时,触发事件: onHidePanel
2、输入
新增未选:输入值如果匹配到下拉列表中的某个未选项,则自动选中该项,先后触发事件: onSelect -> onChange
取消已选:修改已经输入且有匹配项的值,修改成无匹配项的值,则自动取消已选中的对应项,先后触发事件:onUnselect -> onChange
如果停止输入的值和输入前的不一样,则一定会触发onChange,但是不一定触发onSelect,onUnselect事件,仅上述的情况才会触发
另外,调用clear方法清空输入框导致和清空前的不一样,也会调用onChange;调用clear方法清空输入框导致发生取消选中已选项,也会调用onUnselect事件。
收起下拉列表时,触发事件: onHidePanel
通过以上规律,我们可以在触发onSelect事件时,存储选取的值,在触发onUnselect事件时,移除取消选中的值,然后在收起下拉列表时,获取输入框的值和存储的值,转为字符串数组,进行比较,进而判断输入是否合法。
关键代码
<script type="text/javascript">
var textChanged=false; // 用于判断是否combobox选取、输入的内容是否改变
var item_list = []; // 用于存储选取的值
// 选择下拉列表项时触发的事件
function onSelect(row) {
item_list.push(row.productname);
}
function onUnselect(row) {
var index = item_list.indexOf(row.productname);
if(index != -1) {
item_list.splice(index, 1);
}
}
// commbox输入框的值改变时触发事件
function onChange(newValue, oldValue) {
textChanged = true;
}
// 注意,这里,收起下拉列表时,会自动设置newValue为[],oldValue设置为最新的值
// 收起下拉列表时触发的事件
function onHidePanel() {
var text = $(this).combobox('getText'); // 获取输入的值
if (textChanged) {
if (JSON.stringify(text.split(',')) != JSON.stringify(value_list)) {
$(this).combobox('clear');
$.messager.alert('提示', '请选择现有项', 'warning');
}
textChanged = false;
}
textChanged = false;
}
}
</script>
注意:这里使用了JSON.stringify进行转换:数组转成字符串类型的数组,如果选项或者输入值等有不支持字符,可能报错,不够严谨。
<table id="dg" class="easyui-datagrid" title="Row Editing in DataGrid" style="width:1000px;height:auto"
data-options="
iconCls: 'icon-edit',
singleSelect: false,
toolbar: '#tb',
url: 'datagrid_data1.json',
method: 'get',
......
">
<thead>
<tr>
<th data-options="field:'productid',width:100,
formatter:function(value,row){
return row.productname;
},
editor:{
type:'combobox',
options:{
valueField:'productid',
textField:'productname',
method:'get',
url:'products.json',
required:true,
multiple:'true',
onSelect:onSelect,
onHidePanel:onHidePanel,
onChange:onChange
}
}">Product</th>
......
</tr>
</thead>
</table>
说明:
multiple:'true', 设置combobox支持多选。
附:我早些前的做法,如下,获取输入框的值,然后遍历逗号分隔的每项是否在下拉列表中,是的话停止遍历,进行下一个项的检测,只要有一项不符则判断为非法输入。
// 收起多选combobox下拉列表时触发事件
function onHidePanelForCombobox(){
var text = $(this).combobox('getText');
text = text.split(',');
var list = [];
var json = {};
var res = '';
// 去除重复数据
for(var i = 0; i < text.length; i++){
if(!json[text[i]]) {
list.push(text[i]);
res = res + text[i] + ','
json[text[i]] = true;
}
}
res = res.substring(0,res.length-1); // 删除最右侧逗号
if(textChanged) {
var mark = false;
var comboboxData = $(this).combobox('getData');
outerBlock:{
for (var i=0; i<list.length; i++) {
var item = list[i];
innerBlock:{
for (var j=0; j<comboboxData.length; j++) {
var dataObj = comboboxData[j];
if(dataObj.productname == item) {
mark = true; //用户输入项,存在下拉列表选项中,停止查找
break innerBlock;
}else{ //遍历完内存循环还没找到,标记false
mark = false;
}
}
if(!mark) {
break outerBlock;
}
}
}
}
if(!mark) {
$(this).combobox('clear');
$.messager.alert('告警', '请通过下拉列表择现有项', 'warning');
} else {
$(this).combobox('clear');
$(this).combobox('setText', res);
}
}
textChanged = false;
}
Easyui datagrid combobox输入框非法输入判断与事件总结的更多相关文章
- Easyui datagrid combobox输入框下拉(取消)选值和编辑已选值处理
datagrid combobox输入框下拉(取消)选值和编辑已选值处理 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 需求场景 如下,在datagri ...
- 【EasyUI】Combobox的联动和onChange/onSelect事件绑定
[效果图] (1)当选择“产品名称”这个查询项目时,运算条件只有“等于”和“不等于”,如下图所示. (2)当用户选择可以进行数值计算的查询项目时,运算条件就会有很多,如下图所示. [实现代码] 1.H ...
- EasyUI 中 Combobox里的onChange和onSelect事件的区别
EasyUI 中 Combobox 选项发生改变时会触发 onChange,onSelect,onClick 3 个事件. 最近要做一个级联的 Combo 菜单,类似于选择地址时让用户填写省,市,区的 ...
- easyui datagrid combobox下拉框获取数据问题
最近在使用easyui的datagrid,在可编辑表格中添加一个下拉框,查了下API,可以设置type : 'combobox',来做下拉框,这下拉框是有了,可是这后台数据怎么传过来呢,通过查API可 ...
- easyui datagrid取消点击行的选中事件
http://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=material&dir=ltr&pitem= ...
- EasyUI——DataGrid的自定义单元格点击事件
1.当点击的单元格需要传递参数,并且传递的是row的值时,需要进行转义 function initCompareTable(){ $("#deviceCompareTable"). ...
- easyui datagrid 自定义单元格单击与双击事件(Day_38)
$(function(){ $('#tableId').datagrid({//单击事件 onClickRow:function(rowIndex,rowData){ alert("单 ...
- JQ 输入框控制输入 - 键盘上事件
<li style="width: 480px">限购数量 <input type="number" name="limitNum ...
- EasyUI/TopJUI之如何动态改变下拉列表框ComboBox输入框的背景颜色
简单记录一下 前段时间接到客户需求:动态改变下拉列表框ComboBox输入框的背景颜色. 刚开始想的很简单在用户选择列表项的时候,判断一下列表框的value值添加相应的背景颜色就OK了,然而在实际操作 ...
随机推荐
- 作为小白,如何学习Web前端开发?
作为一个已经写码这么多年的人,我不会告诉你我最初的时候是自学的,因为刚开始自己学真的特别无聊枯燥,实在学不下去,所以就自己报了一个培训(上元教育)的地方,毕竟是交了钱的,本着不服气的精神,硬是把自己生 ...
- FFmpeg命令行工具学习(三):媒体文件转换工具ffmpeg
一.简述 ffmpeg是一个非常强大的工具,它可以转换任何格式的媒体文件,并且还可以用自己的AudioFilter以及VideoFilter进行处理和编辑.有了它,我们就可以对媒体文件做很多我们想做的 ...
- [Swift]LeetCode118. 杨辉三角 | Pascal's Triangle
Given a non-negative integer numRows, generate the first numRows of Pascal's triangle. In Pascal's t ...
- [Swift]LeetCode724. 寻找数组的中心索引 | Find Pivot Index
Given an array of integers nums, write a method that returns the "pivot" index of this arr ...
- [Swift]LeetCode783. 二叉搜索树结点最小距离 | Minimum Distance Between BST Nodes
Given a Binary Search Tree (BST) with the root node root, return the minimum difference between the ...
- HBase之CF持久化系列(续3——完结篇)
相信大家在看了该系列的前两篇文章就已经对其中的持久化有比较深入的了解.相对而言,本节内容只是对前两节的一个巩固.与持久化相对应的是打开文件并将其内容读入到内存变量中.而在本节,我就来介绍这一点. 本节 ...
- VS 2013 professional版在win10上安装出错的解决方法
VS 2013 professional版在win10上安装出错的解决方法 win10上安装完VS 2012 professional和VS 2017 professional后,由于项目的需要,要在 ...
- [深度思考]·为什么CNN是同步(并行)而RNN是异步(串行)的呢?
为什么CNN是同步(并行)而RNN是异步(串行)的呢? 个人主页--> https://xiaosongshine.github.io/ 1.问题引出 CNN与RNN都是采用parameter ...
- springboot+mybatis+dubbo+aop日志第二篇
本篇主要介绍dubbo-demo-api接口层和dubbo-demo-service层,以及如何通过dubbo把服务发布出去,介绍代码前,咱们先来回顾一下整个demo工程的结构,如下图所示: 1.du ...
- 探索Windows命令行系列(1):导航目录
探索Windows命令行系列(1):导航目录 探索Windows命令行系列(2):命令行工具入门 探索Windows命令行系列(3):命令行脚本基础 探索Windows命令行系列(4):通过命令操作文 ...