现在的位置: 首页 > easyui > Form > combobox > 正文
combobox扩展:增加追加数据和删除数据的方法
2015年05月08日 combobox ⁄ 共 6511字 评论数 4 ⁄ 被围观 6,028 views+

有不少人抱怨jQuery Easyui的combobox组件只有loadData和reload方法,没有只追加或者删除一条下拉选项的接口,花了点时间写了两个扩展方法,实现了这两个功能,废话不说了,直接上代码:

  1. /**
  2.  * mail:caoguanghuicgh@163.com
  3.  * Page:http://www.easyui.info
  4.  * 如有疑问请在本页留言交流
  5.  * 
  6.  * 扩展combobox方法集合
  7.  */
  8. $.extend($.fn.combobox.methods, {
  9.     /**
  10.      * 版本要求1.3.4+
  11.      * 向combobox的下拉列表中追加一项数据
  12.      * 带分组的话,会到对应分组最后追加,如果是新分组,则追加到最后
  13.      */
  14.     appendRow: function(jq,param) {
  15.         return jq.each(function() {
  16.             var state = $.data(this, 'combobox');
  17.             var opts = state.options;
  18.             var data = state.data;
  19.             var groups = state.groups || [];
  20.             var panel = $(this).combo('panel');
  21.             var g = param[opts.groupField];
  22.             var s = param[opts.textField];
  23.             var v = param[opts.valueField] + '';
  24.             var groupExist = false;
  25.             var insertPos = 0;
  26.             var selected = $(this).combobox('getValues');
  27.             for(var i=0; i<data.length; i++){
  28.                 // value is exist ,do nothing, just return
  29.                 if(data[i][[opts.valueField]]===v) return
  30.             }
  31.             if(g!=null){
  32.                 if($.inArray(g, groups)!=-1){
  33.                     var getted = false;
  34.                     for(var i=0; i<data.length; i++){
  35.                         var rowGroup = data[i][opts.groupField];
  36.                         if(rowGroup==g){
  37.                             getted = true;
  38.                         }else{
  39.                             if(getted){
  40.                                 data.splice(i,0,param);
  41.                                 insertPos = i;
  42.                                 break;
  43.                             }
  44.                         }
  45.                     }
  46.                     insertRow(this,insertPos,g,s);
  47.                 }else{
  48.                     groups.push(g);
  49.                     insertRow(this,data.length,g,s,true);
  50.                     data.push(param);
  51.                 }
  52.             }else{
  53.                 insertRow(this,data.length,g,s);
  54.                 data.push(param);
  55.             }
  56.             if (param['selected'] && $.inArray(v, selected) == -1){
  57.                 selected.push(v);
  58.             }
  59.             if (opts.multiple){
  60.                 $(this).combobox('setValues', selected);
  61.             } else {
  62.                 $(this).combobox('setValues', selected.length ? [selected[selected.length-1]] : []);
  63.             }
  64.             function insertRow(target,pos,group,text,gi){
  65.                 panel.children().each(function(){
  66.                     if($(this).hasClass('combobox-group')) return true;
  67.                     var id = this.id;
  68.                     var idx = parseInt(id.substring(state.itemIdPrefix.length+1));
  69.                     if(idx>=pos){
  70.                         $(this).attr('id', state.itemIdPrefix + '_' + (idx+1));
  71.                     }
  72.                 });
  73.                 var dd = [];
  74.                 if(gi){
  75.                     dd.push('<div id="' + (state.groupIdPrefix+'_'+(state.groups.length-1)) + '" class="combobox-group">');
  76.                     dd.push(opts.groupFormatter ? opts.groupFormatter.call(target, group) : group);
  77.                     dd.push('</div>');
  78.                 }
  79.                 var cls = 'combobox-item' + (param.disabled ? ' combobox-item-disabled' : '') + (group ? ' combobox-gitem' : '');
  80.                 dd.push('<div id="' + (state.itemIdPrefix+'_' + pos) + '" class="' + cls + '">');
  81.                 dd.push(opts.formatter ? opts.formatter.call(target, param) : text);
  82.                 dd.push('</div>');
  83.                 $(dd.join('')).insertAfter(panel.find('>div#' + state.itemIdPrefix + '_' + (pos-1)));
  84.             }
  85.         });
  86.     },
  87.     /**
  88.      * 版本要求1.3.4+
  89.      * 根据valueFiled的值删除combobox下拉列表某一项
  90.      */
  91.     deleteRow: function(jq,param){
  92.         return jq.each(function() {
  93.             var state = $.data(this, 'combobox');
  94.             var opts = state.options;
  95.             var data = state.data;
  96.             var groups = state.groups || [];
  97.             var panel = $(this).combo('panel');
  98.             var selected = $(this).combobox('getValues');
  99.             var len = data.length;
  100.             var idx = -1;
  101.             while(len--){
  102.                 var row = data[len];
  103.                 if(param==row[opts.valueField]){
  104.                     idx = len;
  105.                     break;
  106.                 }
  107.             }
  108.             if(idx==-1) return;
  109.             var deleteGroup = false;
  110.             if(data[idx][opts.groupField]){
  111.                 len = data.length;
  112.                 var gCount = 0;
  113.                 while(len--){
  114.                     var row = data[len];
  115.                     if(data[idx][opts.groupField]==row[opts.groupField]){
  116.                         gCount++;
  117.                     }
  118.                 }
  119.                 if(gCount==1){
  120.                     var glen = groups.length;
  121.                     while(glen--){
  122.                         if(data[idx][opts.groupField]==groups[glen]){
  123.                             groups.splice(glen,1);
  124.                         }
  125.                     }
  126.                     deleteGroup = true;
  127.                 }
  128.             }
  129.             data.splice(idx,1);
  130.             var item = panel.find('>div#' + state.itemIdPrefix + '_' + idx);
  131.             if(deleteGroup) item.prev().remove();
  132.             item.remove();
  133.             var isSelected = false;
  134.             for(var i=0; i<selected.length; i++){
  135.                 if(selected[i]==param){
  136.                     isSelected = true;
  137.                     selected.splice(i,1);
  138.                 }
  139.             }
  140.             if(isSelected){
  141.                 if(opts.multiple){
  142.                     $(this).combobox('setValues', selected);
  143.                 }else{
  144.                     $(this).combobox('clear');
  145.                 }
  146.             }
  147.             panel.children().each(function(){
  148.                 if($(this).hasClass('combobox-group')) return true;
  149.                 var id = this.id;
  150.                 var _idx = parseInt(id.substring(state.itemIdPrefix.length+1));
  151.                 if(_idx>idx){
  152.                     $(this).attr('id', state.itemIdPrefix + '_' + (idx-1));
  153.                 }
  154.             });
  155.         });
  156.     }
  157. });

使用方法:

  1. $(function() {
  2.     $('#addBtn').linkbutton({
  3.         onClick : function() {
  4.             $('#combobox').combobox('appendRow', {
  5.                 "value" : "chrome42",
  6.                 "text" : "Chrome 42.0.2311.90",
  7.                 "group" : "Chrome",
  8.                 "selected" : true
  9.             });
  10.         }
  11.     });
  12.     $('#delBtn').linkbutton({
  13.         onClick : function() {
  14.             $('#combobox').combobox('deleteRow', "chrome42");
  15.         }
  16.     });
  17. });

万众瞩目的Demo在下面

http://www.easyui.info/easyui/demo/combobox/appendRow.html

注意,本人只测试了1.4.2版本,应该是兼容1.3.4+版本的,如有问题,请留言交流

目前有 4 条留言 其中:访客:2 条, 博主:2 条

  1. 木子 : 2016年09月02日15:54:06  -49楼 @回复 回复

    我试了试Demo,好像追加有问题,为什么只能追加最后一条数据,不能再第二次追加,而且和我想要的效果完全不相同,我是想在下拉列表中追加数据,而不是在文本框中追加数据。还有就是,我使用的是easyui的combobox


    • 管理员
      世纪之光 : 2016年09月03日00:07:56  地下1层 @回复 回复

      你看看我绑定在 appendRow按钮上面的事件就明白了,Demo里面是写死的,相同的value当然不会重复追加:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      
      $(function() {
          $('#addBtn').linkbutton({
              onClick: function() {
                  $('#combobox').combobox('appendRow', {
                      "value": "chrome42",
                      "text": "Chrome 42.0.2311.90",
                      "group": "Chrome",
                      "selected": true
                  });
              }
          });
       
          $('#delBtn').linkbutton({
              onClick: function() {
                  $('#combobox').combobox('deleteRow', "chrome42");
              }
          });
      });

      代码写的很清楚,追加的value是写死的”chrome42″,同时设置为选中项,所以追加的”chrome42″会出现在文本框中,你把下拉框拉到底就能发现在下拉列表中有你追加的”Chrome 42.0.2311.90″了。

      还有就是我给的demo也是combobox,无须怀疑。

  2. 123 : 2017年08月31日08:52:26  -48楼 @回复 回复

    删除中有一个小错误 就是如果删除的是第一个选项就会出现无法选择剩余选项,修改方式就是把最后一行代码的idx-1改成_idx-1 就好了


    • 管理员
      世纪之光 : 2017年09月26日09:15:20  地下1层 @回复 回复

      多谢指正,可能是版本不一样造成的。

给我留言

留言无头像?


×