用法

包含 'datagrid-filter.js' 文件

启用过滤（Filter）

var dg = $('#dg');dg.datagrid();	// create datagriddg.datagrid('enableFilter');	// enable filter

属性

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

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

方法

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

名称 参数 描述
enableFilter filters 创建并启用过滤功能。
'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']}]);
addFilterRule param 添加一个过滤规则。
$('#dg').datagrid('addFilterRule', {	field: 'desp',	op: 'contains',	value: 'easyui'});
removeFilterRule field 移除过滤规则。
如果 'field' 参数未指定，移除所有的过滤规则。
doFilter none 基于过滤规则执行过滤。
getFilterComponent field 在指定的域上获取过滤组件。

示例

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(){......})