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;
}