扩展 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);
})
}
}
});

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

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

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

示例DEMO 完整代码