combobox和combotree,搜尋和多選功能的實現
阿新 • • 發佈:2018-11-12
在專案中遇到一個需求,在一個form表單中有兩個下拉框,一個是樹形的,另一個就是簡單的下拉框;
分別使用EasyUI的combotree 和 combobox來實現
模糊查詢的效果如下:
第一步
根據《easyUI Combobox自定義調整支援中文模糊查詢》一文提供的解決方法,修改了兩處easyUI的原始碼:
- 調整Combobox支援模糊查詢,並支援從任意位置開始匹配
解決方案:將字串的indexof匹配由原來的判定為頭部匹配,改為包含匹配
return row[opts.textField].toLowerCase().indexOf(q.toLowerCase())==0;
修改為return row[opts.textField].toLowerCase().indexOf(q.toLowerCase())>-1;
我用的是eaysUI 1.4版本,修改程式碼在 jquery.easyui.min.js 中大概 12140 行左右。- 調整Combobox,以支援搜尋時中文輸入結束不自動觸發查詢
解決方案:將觸發查詢執行的引起事件由keydown改成 keyup
$.fn.combo.defaults=$.extend({},$.fn.textbox.defaults,{
inputEvents:{
click :_8a2,
keydown:_8a6,
paste:_8a6,
drop:_8a6},
panelWidth:
null,
panelHeight:
200,
panelMinWidth:
null,
panelMaxWidth:
null,
panelMinHeight:
null,
panelMaxHeight:
null,
panelAlign:
"left",
multiple:
false,
selectOnNavigation:
true,
separator :
",",
hasDownArrow:
true,
delay:
200,
keyHandler:{
up:
function(e){
},
down:
function(e){
},
left:
function(e){
},
right:
function(e){
},
enter:
function(e){
},
query:
function(q,e){
}},
onShowPanel:
function(){
},
onHidePanel:
function(){
},
onChange:
function(_8d6,_8d7){
}});
修改為
$.fn.combo.defaults=$.extend({},$.fn.textbox.defaults,{
inputEvents:{
click:_8a2,
keyup:_8a6,
paste:_8a6,
drop:_8a6},
panelWidth:
null,
panelHeight:
200,
panelMinWidth:
null,
panelMaxWidth:
null,
panelMinHeight:
null,
panelMaxHeight:
null,
panelAlign:
"left",
multiple:
false,
selectOnNavigation:
true,
separator:
",",
hasDownArrow:
true,
delay:
200,
keyHandler:{
up:
function(e){
},
down:
function(e){
},
left:
function(e){
},
right:
function(e){
},
enter:
function(e){
},
query:
function(q,e){
}},
onShowPanel:
function(){
},
onHidePanel:
function(){
},
onChange:
function(_8d6,_8d7){
}});
我用的是eaysUI 1.4版本,修改程式碼在 jquery.easyui.min.js 中大概 11723 行左右。
完成以上步驟之後,設定easyUI的editable屬性(可編輯)為true,multiple(多選)屬性為:true;
現在就可以在下拉框中搜東西了,但是這個時候還有一個缺點,就是下拉框裡面可以任意輸入漢字,如果使用者不選擇,而是直接提交表單的話就會產生錯誤資料;
第二步
感謝一直程式緣在《easyui中combobox 驗證輸入的值必須為選項框中的資料》一文中提供的思路,我們可以新增一個事件,對使用者輸入的內容進行判斷,不合適的時候將其刪除;
下面是combotree的判斷思路:
$(
".easyui-combotree").combotree({
onHidePanel:
function() {
var _value = $(
this).combotree(
'getValues');
if(_value.length==
0){
$(
this).combotree(
'clear');
}
else{
$(
this).combotree(
'setValue',_value)
}
}
});
下面是combobox的判斷思路:
$(
".easyui-combobox").combobox({
onHidePanel :
function() {
var _values = $(
this).combobox(
'getValues');
var values =
new
Array();
var _options = $(
this).combobox(
'options');
var _data = $(
this).combobox(
'getData');
/* 下拉框所有選項 */
for(
var j =
0; j < _values.length; j++){
for (
var i =
0; i < _data.length; i++) {
if (_data[i][_options.valueField] == _values[j]) {
values.push(_values[j])
break;
}
}
}
$(
this).combobox(
'setValues',values);
},
onSelect:
function() {
var _values = $(
this).combobox(
'getValues');
var values =
new
Array();
var _options = $(
this).combobox(
'options');
var _data = $(
this).combobox(
'getData');
/* 下拉框所有選項 */
for(
var j =
0; j < _values.length; j++){
for (
var i =
0; i < _data.length; i++) {
if (_data[i][_options.valueField] == _values[j]) {
values.push(_values[j])
break;
}
}
}
$(
this).combobox(
'setValues',values);
}
});