jQuery EasyUI editor擴展,使其支持combo多選下拉列表

   在使用EasyUI treeGrid的editor進行行編輯的時候需要使用到combo多選下拉列表，通過查詢API和源碼后發現它并不支持combo,于是決定自己擴展，自定義一個combo Editor;

   通過查看源代碼發現，定義一個editor，需要實現四個方法（init，getValue,setValue,resize)

這里一般注意init，getValue和setValue這三個方法，需要注意的是，這里的setValue和getValue方法都是針對于editor的，是給editor設值和獲取值的。

定義combo:

$.extend($.fn.datagrid.defaults.editors, {

   combo: {

       init: function(container, options){

           var input = $('<select id="cc"></select>').appendTo(container);

           input.combo(options);

           var html = "";

           html+='<div id="sp">';

           html+='<div >'+options.title+'</div>';

           for(var i=0;i<options.data.length;i++){

           html+='<input type="checkbox" name="lang" value="'+options.data[i].id+'"><span>'+options.data[i].name+'</span><br/>';

       }

       html+='</div>';

       $(html).appendTo($('#cc').combo('panel'));

       $('#sp input').click(function(){

           var _value="";

           var _text="";

           $("[name=lang]:input:checked").each(function(){

               _value+=$(this).val()+",";

               _text+=$(this).next("span").text()+",";

           });

           if(_value.length>0){

               _value=_value.substring(0,_value.length-1);

           }

           if(_text.length>0){

               _text=_text.substring(0,_text.length-1);

           }

               $('#cc').combo('setValue',_value).combo('setText', _text);

           });

           return input;

       },

       destroy: function(target){

           $(target).combo('destroy');

       },

       getValue: function(target){

       return $(target).combo('getValue');

       },

       setValue: function(target, value){

           $(target).combo('setValue', value);

       },

       resize: function(target, width){

           $(target).combo('resize',width);

       }

   }

});

使用：

頁面展示效果：