Easyui datagrid combobox输入框非法输入判断与…
2019-01-08 08:23:46来源：博客园 阅读 ()
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;
}
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
- jQuery EasyUI tree增加搜索功能的实现方法 2019-12-17
- TopJUI可编辑表格的列根据返回数据判断是使用 combobox 还是 2019-05-24
- Easyui datagrid 实现表格记录拖拽 2019-01-21
- Easyui datagrid 设置内容超过单元格宽度时自动换行显示 2019-01-16
- easyui 前端实现分页 复制就能用 2019-01-15
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
