扩展 easyui 控件系列：为datagrid 增加过滤行

本文主要是介绍扩展 easyui 控件系列：为datagrid 增加过滤行，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

此功能还为真正完成，起到抛砖引玉的效果，发动大家的力量把这个功能完善起来，效果图如下：

基本上就是扩展了 datagrid.view 中的onAfterRender 这个事件，具体代码如下：

$.extend($.fn.datagrid.defaults.view,{onAfterRender:function(target){var dc = $.data(target,'datagrid').dc;if(dc.header2.find('[filter="true"]').length == 0){var header = dc.header1; //固定列表头var header2 = dc.header2; // 常规列表头var filterRow = $('<tr></tr>');var opts = $.data(target,'datagrid').options;var columns = opts.columns;var frozenColumns = opts.frozenColumns;$.each(frozenColumns[0],function(){if(!this.checkbox){var w = header.find('[field="'+this.field+'"] > div').width();filterRow.append('<td><input style="width:'+w+'px"/></td>');}else{header.find('.datagrid-header-check').parent().attr('rowspan',2)}});header.find('tbody').append(filterRow);filterRow = $('<tr filter="true"></tr>');$.each(columns[0],function(){var w = header2.find('[field="'+this.field+'"] > div').width();if(this.hfilter){var a = $('<input field="'+this.field+'" class="easyui-combobox" style="width:'+w+'px" />');filterRow.append($('<td></td>').append(a));a.data('options',this.hfilter);}else{filterRow.append('<td><input style="width:'+w+'px"/></td>');}});header2.find('tbody').append(filterRow);var dgData = $(target).datagrid('getData').rows;header2.find('input[field]').each(function(){var opts = $(this).data('options');var field = $(this).attr('field');$.extend(opts.options,{onSelect:function(item){var d = _.filter(dgData,function(row){return row[field].indexOf(item[opts.options.textField]) > -1;});$(target).datagrid('loadData',d);}});$(this)[opts.type](opts.options);})}}});

在定义列时，我们加上个自定义的属性

  { title:  '部门名称' , field:  'depname' , width: 120,<span style= "color: #ff0000;" >hfilter:{type: 'combobox' ,options:{data:roleData,valueField: 'KeyId' ,textField: 'RoleName' }}</span> } 
 

红色字体就是自定义的属性，用来定义过滤行中的控件的

在使用的时候，扩展的代码要放到Datagrid 初始化的前边！

示例DEMO 完整代码

  <!DOCTYPE html> 
 <html> 
 <head> 
      <title></title> 
      <link rel= "stylesheet"  type= "text/css"  href= "../../jquery-easyui-1.3.3/themes/2013/easyui.css" > 
      <link rel= "stylesheet"  type= "text/css"  href= "../../jquery-easyui-1.3.3/themes/icon.css" > 
      <link rel= "stylesheet"  type= "text/css"  href= "../../jquery-easyui-1.3.3/themes/default/lookup.css" > 
      <script type= "text/javascript"  src= "../../jquery-easyui-1.3.3/jquery-1.10.2.min.js" ></script> 
      <script type= "text/javascript"  src= "../../jquery-easyui-1.3.3/jquery-migrate-1.2.1.min.js" ></script> 
      <script type= "text/javascript"  src= "../../jquery-easyui-1.3.3/jquery.easyui.min.js" ></script> 
      <script src= "../../jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js" ></script> 
      <script src= "../../jquery-easyui-1.3.3/underscore-min.js" ></script> 
 </head> 
 <body> 
      <table id=userlist></table> 
      <script> 
          
          var  userData ={ "total" :6, "rows" :[{ "KeyId" :1, "UserName" : "admin2" , "Password" : "93BCC5699183BED3AD5E3C050ADEF183" , "PassSalt" : "K6FqbXXK" , "Email" : "hxl_apple@163.com" , "IsAdmin" : false , "IsDisabled" : false , "TrueName" : "疯狂秀才" , "DepartmentId" :4, "Mobile" : "" , "QQ" : "" , "Remark" : "" , "AddTime" : null , "MenusJson" : null , "ConfigJson" : "{\"theme\":{\"title\":\"默认皮肤\",\"name\":\"default\"},\"showType\":\"menubutton\",\"gridRows\":\"40\"}" , "depname" : "生产部" , "Departments" : "4,15" },{ "KeyId" :9, "UserName" : "admin" , "Password" : "7D34608F3723F586DC28FC5D88BCECC6" , "PassSalt" : "ZWvu4jSn" , "Email" : "hxl_apple@163.com" , "IsAdmin" : true , "IsDisabled" : false , "TrueName" : "疯狂秀才" , "DepartmentId" :3, "Mobile" : "18668088525" , "QQ" : "1055818239" , "Remark" : "系统默认帐号，不可删除" , "AddTime" : null , "MenusJson" : null , "ConfigJson" : "{\"theme\":{\"title\":\"流行灰\",\"name\":\"gray\"},\"showType\":\"Accordion2\",\"gridRows\":\"20\",\"showValidateCode\":false}" , "depname" : "综合办公室" , "Departments" : "3,15" },{ "KeyId" :10, "UserName" : "test" , "Password" : "5C7E95836A99FB74723F54C43511154A" , "PassSalt" : "RGVJejaR" , "Email" : "" , "IsAdmin" : false , "IsDisabled" : false , "TrueName" : "Test1" , "DepartmentId" :1, "Mobile" : "" , "QQ" : "" , "Remark" : "" , "AddTime" : null , "MenusJson" : null , "ConfigJson" : null , "depname" : "幸福集团" , "Departments" : "3,4,15,5" },{ "KeyId" :12, "UserName" : "ddd" , "Password" : "7A3C56FA5A59953C058E7525FA0F754F" , "PassSalt" : "O8RnCnaH" , "Email" : "" , "IsAdmin" : false , "IsDisabled" : false , "TrueName" : "ddd" , "DepartmentId" :0, "Mobile" : "" , "QQ" : "" , "Remark" : "" , "AddTime" : null , "MenusJson" : null , "ConfigJson" : null , "depname" : "" , "Departments" : "" },{ "KeyId" :13, "UserName" : "eee" , "Password" : "2FE5DFAE3F8AC41F907FCF8B1C1579D7" , "PassSalt" : "vKbkyBib" , "Email" : "" , "IsAdmin" : false , "IsDisabled" : false , "TrueName" : "eeee" , "DepartmentId" :3, "Mobile" : "" , "QQ" : "" , "Remark" : "" , "AddTime" : null , "MenusJson" : null , "ConfigJson" : null , "depname" : "综合办公室" , "Departments" : "" },{ "KeyId" :15, "UserName" : "007" , "Password" : "9E704A8699D72ADA11A7EB7BF07739FA" , "PassSalt" : "bcLJiqHB" , "Email" : "" , "IsAdmin" : false , "IsDisabled" : false , "TrueName" : "007" , "DepartmentId" :1, "Mobile" : "" , "QQ" : "" , "Remark" : "" , "AddTime" : null , "MenusJson" : null , "ConfigJson" : null , "depname" : "幸福集团" , "Departments" : "" }]} 
          var  roleData = [{ "KeyId" :2, "RoleName" : "生产部" , "Sortnum" :2, "Remark" : "工程师" , "IsDefault" :0, "Navigations" : null , "Users" : null , "Departments" : "" }, 
              { "KeyId" :3, "RoleName" : "幸福集团" , "Sortnum" :1, "Remark" : "6666" , "IsDefault" :0, "Navigations" : null , "Users" : null , 
                  "Departments" : "1,3,4,15,5,9,10,11,12,13,14,8" }, 
              { "KeyId" :17, "RoleName" : "综合办公室" , "Sortnum" :1, "Remark" : "" , "IsDefault" :1, "Navigations" : null , "Users" : null , "Departments" : "1,4,15" },{ "KeyId" :20, "RoleName" : "普通用户" , "Sortnum" :3, "Remark" : "" , "IsDefault" :0, "Navigations" : null , "Users" : null , "Departments" : "1,3,4,15,5,9,10,11,12,13,14,8" }] 
          $.extend($.fn.datagrid.defaults.view,{ 
              onAfterRender: function (target){ 
                  var  dc = $.data(target, 'datagrid' ).dc; 
                  if (dc.header2.find( '[filter="true"]' ).length == 0){ 
                      var  header = dc.header1;  //固定列表头 
                      var  header2 = dc.header2;  // 常规列表头 
                      var  filterRow = $( '<tr></tr>' ); 
                      var  opts = $.data(target, 'datagrid' ).options; 
                      var  columns = opts.columns; 
                      var  frozenColumns = opts.frozenColumns; 
                      $.each(frozenColumns[0], function (){ 
                          if (! this .checkbox){ 
                              var  w = header.find( '[field="' + this .field+ '"] > div' ).width(); 
                              filterRow.append( '<td><input style="width:' +w+ 'px"/></td>' ); 
                          } 
                          else { 
                              header.find( '.datagrid-header-check' ).parent().attr( 'rowspan' ,2) 
                          } 
                      }); 
                      header.find( 'tbody' ).append(filterRow); 
                      filterRow = $( '<tr filter="true"></tr>' ); 
                      $.each(columns[0], function (){ 
                          var  w = header2.find( '[field="' + this .field+ '"] > div' ).width(); 
                          if ( this .hfilter){ 
                              var  a = $( '<input field="' + this .field+ '" class="easyui-combobox" style="width:' +w+ 'px" />' ); 
                              filterRow.append($( '<td></td>' ).append(a)); 
                              a.data( 'options' , this .hfilter); 
                          } else { 
                              filterRow.append( '<td><input style="width:' +w+ 'px"/></td>' ); 
                          } 
                      }); 
                      header2.find( 'tbody' ).append(filterRow); 
                      var  dgData = $(target).datagrid( 'getData' ).rows; 
                      header2.find( 'input[field]' ).each( function (){ 
                          var  opts = $( this ).data( 'options' ); 
                          var  field = $( this ).attr( 'field' ); 
                          $.extend(opts.options,{ 
                              onSelect: function (item){ 
                                  var  d = _.filter(dgData, function (row){ 
                                      return  row[field].indexOf(item[opts.options.textField]) > -1; 
                                  }); 
                                  $(target).datagrid( 'loadData' ,d); 
                              } 
                          }); 
                          $( this )[opts.type](opts.options); 
                      }) 
                  } 
              } 
          }); 
          $( function (){ 
              $( '#userlist' ).datagrid({ 
                  toolbar: '#toolbar' , 
                  data:userData, 
                  fit: true , 
                  title: '用户列表' , 
                  selectOnCheck: false , 
                  checkOnSelect: true , 
                  singleSelect: true , 
                  //tools:[{iconCls:'icon-add'}], 
                  frozenColumns:[[ 
                      {checkbox: true }, 
                      { title:  'ID' , field:  'KeyId' , width: 40, sortable:  true  }, 
                      { title:  '用户名' , field:  'UserName' , width: 100, sortable:  true  } 
                  ]], 
                  columns:[[ 
                      { title:  '真实姓名' , field:  'TrueName' , width: 100, sortable:  true  }, 
                      { title:  '部门名称' , field:  'depname' , width: 120,hfilter:{type: 'combobox' ,options:{data:roleData,valueField: 'KeyId' ,textField: 'RoleName' }} }, 
                      { title:  '邮箱' , field:  'Email' , width: 100, sortable:  true  }, 
                      { 
                          title:  '超管' , 
                          field:  'IsAdmin' , 
                          width: 60, 
                          align:  'center' , 
                          formatter:  function  (v, d, i) { 
                              if  (d.UserName ==  "admin" ) 
                                  return  '' ; 
                              return  v ?  '√' : 'x' 
                          } 
                      }, 
                      { 
                          title:  '状态' , 
                          field:  'IsDisabled' , 
                          width: 60, 
                          align:  'center' , 
                          formatter:  function  (v, d, i) { 
                              if  (d.UserName ==  "admin" ) 
                                  return  '' ; 
                              return  v ?  '√' : 'x' 
                          } 
                      },{title: '描述' ,field: 'Remark' ,width:160} 
                  ]], 
                  pagination:  true , 
                  pageSize:20, 
                  rowStyler:  function  (index, row, css) { 
                      if  (row.UserName== "admin" ) { 
                          return  'font-weight:bold;' ; 
                      } 
                  } 
              }); 
          }); 
      </script> 
 </body> 
 </html> 
 