combobox和combotree,搜索和多选功能的实现

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/yequnat/article/details/78866542

在项目中遇到一个需求,在一个form表单中有两个下拉框,一个是树形的,另一个就是简单的下拉框;
分别使用EasyUI的combotree 和 combobox来实现
模糊查询的效果如下:

第一步

根据《easyUI Combobox自定义调整支持中文模糊查询》一文提供的解决方法,修改了两处easyUI的源码:

1. 调整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 行左右。
2. 调整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); 
   
   


  
  
  
  

   
           } 
   
   


  
  
  
  

   
       });