用法
包含 '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）添加的属性。
| 名称 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| 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 | 在指定的域上获取过滤组件。 |
$('#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(){......})
