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输入框非法输入判断与事件总结的更多相关文章

  1. Easyui datagrid combobox输入框下拉(取消)选值和编辑已选值处理

    datagrid combobox输入框下拉(取消)选值和编辑已选值处理 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3   需求场景 如下,在datagri ...

  2. 【EasyUI】Combobox的联动和onChange/onSelect事件绑定

    [效果图] (1)当选择“产品名称”这个查询项目时,运算条件只有“等于”和“不等于”,如下图所示. (2)当用户选择可以进行数值计算的查询项目时,运算条件就会有很多,如下图所示. [实现代码] 1.H ...

  3. EasyUI 中 Combobox里的onChange和onSelect事件的区别

    EasyUI 中 Combobox 选项发生改变时会触发 onChange,onSelect,onClick 3 个事件. 最近要做一个级联的 Combo 菜单,类似于选择地址时让用户填写省,市,区的 ...

  4. easyui datagrid combobox下拉框获取数据问题

    最近在使用easyui的datagrid,在可编辑表格中添加一个下拉框,查了下API,可以设置type : 'combobox',来做下拉框,这下拉框是有了,可是这后台数据怎么传过来呢,通过查API可 ...

  5. easyui datagrid取消点击行的选中事件

    http://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=material&dir=ltr&pitem= ...

  6. EasyUI——DataGrid的自定义单元格点击事件

    1.当点击的单元格需要传递参数,并且传递的是row的值时,需要进行转义 function initCompareTable(){ $("#deviceCompareTable"). ...

  7. easyui datagrid 自定义单元格单击与双击事件(Day_38)

    $(function(){ $('#tableId').datagrid({//单击事件   onClickRow:function(rowIndex,rowData){  alert("单 ...

  8. JQ 输入框控制输入 - 键盘上事件

    <li style="width: 480px">限购数量  <input type="number" name="limitNum ...

  9. EasyUI/TopJUI之如何动态改变下拉列表框ComboBox输入框的背景颜色

    简单记录一下 前段时间接到客户需求:动态改变下拉列表框ComboBox输入框的背景颜色. 刚开始想的很简单在用户选择列表项的时候,判断一下列表框的value值添加相应的背景颜色就OK了,然而在实际操作 ...

随机推荐

  1. 判断二叉树是否BST

    一.问题: 请实现一个函数,检查一棵二叉树是否为二叉查找树.给定树的根结点指针TreeNode* root,请返回一个bool,代表该树是否为二叉查找树. 二.思路: 解法一:从根节点开始遍历二叉树, ...

  2. 多媒体文件格式(四):TS 格式

    一.TS 格式标准介绍 TS是一种音视频封装格式,全称为MPEG2-TS.其中TS即"Transport Stream"的缩写. 先简要介绍一下什么是MPEG2-TS: DVD的音 ...

  3. [Swift]LeetCode971.翻转二叉树以匹配先序遍历 | Flip Binary Tree To Match Preorder Traversal

    Given a binary tree with N nodes, each node has a different value from {1, ..., N}. A node in this b ...

  4. WebWorker与WebSocket实现前端消息总线

    Web Worker让JS有了多线程的能力,可以将复杂耗时的操作都交付给Worker线程处理.WebSocket让web端与服务端维持一个有效的长连接,实现服务端主动推送数据.将二者一结合,业务系统信 ...

  5. MySQL查看表占用空间大小

    需求:我们在选购服务器硬盘时,通常需要先估算一下数据量.比如我们现在做的项目,百万级用户,然后在现有的数据结构中插入一万条数据,然后根据相应的需求去计算出实际生产中的数据量. 前言:在mysql中有一 ...

  6. spark调用hdfsAPI

    spark 调用 hdfs API 查询文件名字.删除文件: 获取HDFS上面某个路径下的所有文件的名字 import org.apache.hadoop.conf.Configuration imp ...

  7. 【Spark篇】---SparkSQL初始和创建DataFrame的几种方式

    一.前述       1.SparkSQL介绍 Hive是Shark的前身,Shark是SparkSQL的前身,SparkSQL产生的根本原因是其完全脱离了Hive的限制. SparkSQL支持查询原 ...

  8. 微信小程序代码构成

    一.小程序代码 app.json 是当前小程序的全局配置,包括了小程序的所有页面路径.界面表现.网络超时时间.底部tab等. { "pages":[ "pages/ind ...

  9. 将Maple输出的LaTex导出到txt文件

    将Maple输出的LaTex导出到txt文件 1. 生成LATEX Maple可以把它的表达式转换成LATEX, 使用latex命令即可: > latex(x^2+y^2=z^2); {x}^{ ...

  10. [SQL]SQL 执行顺序

    这个文章主要是防止我忘了 SQL 的执行顺序,解释的东西我都没怎么看懂.数据库渣如我- 逻辑查询处理阶段简介 FROM:对FROM子句中的前两个表执行笛卡尔积(Cartesian product)(交 ...