用法

包含 'datagrid-filter.js' 文件
<script type="text/javascript" src="datagrid-filter.js"></script>
启用过滤（Filter）
var dg = $('#dg');dg.datagrid();	// create datagriddg.datagrid('enableFilter');	// enable filter

属性


该属性扩展自数据网格（datagrid），下面是为数据网格（datagrid）添加的属性。

名称类型描述默认值
filterMenuIconClsstring过滤菜单项（指示要使用的项目）的图标 class。icon-ok
filterBtnIconClsstring过滤按钮的图标 class。icon-filter
filterBtnPositionstring过滤按钮的位置。可能的值是 'left' 和 'right'。right
filterPositionstring过滤栏相对于列的位置。可能的值是 'top' 和 'bottom'。bottom
remoteFilterboolean设置为 true 则执行远程过滤。
当启用时，'filterRules' 参数将发送到远程服务器。
'filterRules' 参数的值由 'filterStringify' 函数获得。		false
filterDelaynumber从 'text' 过滤组件中最后一个键输入事件起，延迟执行过滤的时间。400
filterRulesarray过滤规则的定义。每个规则包含 'field'、'op' 和 'value' 属性。[]
filterStringifyfunction把过滤规则字符串化的函数。
function(data){	return JSON.stringify(data);}

方法

下面的方法扩展自数据网格（datagrid）。

名称参数描述
enableFilterfilters创建并启用过滤功能。
'filters' 参数是一个过滤配置的数组。
每一项包含下列属性：
1) field：需要定义规则的域。
2) type：过滤类型，可能的值：label、text、textarea、checkbox、numberbox、validatebox、datebox、combobox、combotree。
3) options：过滤类型的选项。
4) op：过滤操作，可能的值：contains、equal、notequal、beginwith、endwith、less、lessorequal、greater、greaterorequal。

代码实例：

$('#dg').datagrid('enableFilter');$('#dg').datagrid('enableFilter', [{	field:'listprice',	type:'numberbox',	options:{precision:1},	op:['equal','notequal','less','greater']}]);
addFilterRuleparam添加一个过滤规则。
$('#dg').datagrid('addFilterRule', {	field: 'desp',	op: 'contains',	value: 'easyui'});
removeFilterRulefield移除过滤规则。
如果 'field' 参数未指定，移除所有的过滤规则。
doFilternone基于过滤规则执行过滤。
getFilterComponentfield在指定的域上获取过滤组件。

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
  $( '#calllist' ).datagrid({
                 filterBtnIconCls: 'icon-filter' ,
                 iconCls: 'icon-files' ,
                 url:  'getMyCallList.asp' ,
                 //width: ($(window).width() * 0.9),
                 height: ($(window).height() * 0.8),
                 fitColumns:  true ,  //列自适应
                 nowrap:  false ,
                 rownumbers: true ,
                 loadMsg:  '正在加载信息...' ,
                 pagination:  true , //是否有分页
                 loadFilter:pagerFilter,
                 //singleSelect: false,//是否单行选择
                 pageSize: 10, //每页多少条数据
                 pageNumber: 1, //默认的页
                 pageList: [10, 20, 30],
                 queryParams: pars, //往后台传递参数
                 //onLoadSuccess: onLoadSuccess,//加载完毕后执行计算
                 columns: [[
                     { field:  'phone' , title:  '电话号码' , align:  'center' , width: 100 },
                     { field:  'names' , title:  '姓名' , align:  'center' , width: 100 },
                     { field:  'sex' , title:  '性别' , align:  'center' , width: 100 },
                     { field:  'age' , title:  '年龄' , align:  'center' , width: 100 },
                     { field:  'Education' , title:  '教育程度' , align:  'center' , width: 100 },
      { field:  'applyposition' , title:  '应聘职位' , align:  'center' , width: 100 },
                     { field:  'source' , title:  '来源' , align:  'center' , width: 100 },
                     { field:  'connectType' , title:  '接通类型' , align:  'center' , width: 100 },
                     { field:  'connectedStatus' , title:  '接通状态' , align:  'center' , width: 100 },
                     { field:  'NotConnectedStatus' , title:  '未接通状态' , align:  'center' , width: 100 },
      { field:  'calldate' , title:  '联系时间' , align:  'center' , width: 100 },
                     { field:  'operation' , title:  '操作' , align:  'center' , width: 100,
                           formatter:  function  (rowIndex,row) {
                               var  str =  "" ;
                               str +=  '<a href="javascript:OpenInfo(\''  + row.id +  '\');" class="easyui-linkbutton c4" tyle="width:50px" >面试</a>' ;
                               str +=  '<a href="deleteInfo.asp?id=' +row.id+ '" class="easyui-linkbutton c5" tyle="width:50px">删除</a>' ;
                               return  str;
                           }
                       }
                 ]],
                 toolbar:  '#sec' ,
             });
   
    $( '#calllist' ).datagrid( 'enableFilter' );

需要注意的是， $('#calllist').datagrid('enableFilter');激活过滤功能需要在数据加载完成之后同步执行，不能单独放到$(function(){......})