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="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',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="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',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;
}