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了,然而在实际操作 ...
随机推荐
- [Swift]LeetCode47. 全排列 II | Permutations II
Given a collection of numbers that might contain duplicates, return all possible unique permutations ...
- [Swift]LeetCode317. 建筑物的最短距离 $ Shortest Distance from All Buildings
You want to build a house on an empty land which reaches all buildings in the shortest amount of dis ...
- php 168任意代码执行漏洞之php的Complex (curly) syntax
今天了解了php 168的任意代码执行漏洞,Poc: http://192.168.6.128/pentest/cms/php168/member/post.php?only=1&showHt ...
- java中过多if-else分支语句的优化方案
利用Map优化过的的if-else分支 package com.taiping.test; import java.util.HashMap;import java.util.Map; public ...
- Python内置函数(58)——slice
英文文档: class slice(stop) class slice(start, stop[, step]) Return a slice object representing the set ...
- 听说,霸都.NET技术社区准备搞线下聚会了?
嗨,你听说了没有?霸都.NET技术社区准备搞线下聚会了! 啥时候的事情啊? 最近才知道的消息啊! 那你是从哪里知道的消息呢? .NET Core项目实战交流群(637326624)啊! 那这次合肥.N ...
- spark在idea中本地如何运行?(处理问题NoSuchFieldException: SHUTDOWN_HOOK_PRIORITY)
spark在idea中本地如何运行? 前几天尝试使用idea在本地运行spark+scala的程序,出现了问题,http://www.cnblogs.com/yjf512/p/7662105.html ...
- 【Maven】---坐标与依赖
Maven坐标与依赖 最近想深度学习下maven,找到一本书叫<Maven实战>,这本书讲的确实很好,唯一遗憾的是当时maven教学版本是3.0.0的,而目前已经到了3.5.4了,版本存在 ...
- VS 2013 professional版在win10上安装出错的解决方法
VS 2013 professional版在win10上安装出错的解决方法 win10上安装完VS 2012 professional和VS 2017 professional后,由于项目的需要,要在 ...
- 【Python3爬虫】selenium入门
selenium 是一个用于Web应用程序测试的工具.Selenium测试直接运行在浏览器中,就像真正的用户在操作一样.支持的浏览器包括IE(7, 8, 9, 10, 11),Mozilla Fire ...