easyui datagridfilter插件的用法

用法

包含 'datagrid-filter.js' 文件

 
 
<script type="text/javascript" src="datagrid-filter.js"></script>

启用过滤（Filter）

 
 
var dg = $('#dg');
dg.datagrid();	// create datagrid
dg.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	在指定的域上获取过滤组件。

示例

$("#detailedmappingGrid").datagrid({
		pagination:true,
		fit:true,
		fitColumns:true,
		toolbar:'#detailedmappingToolbar',
		singleSelect:true,
		checkOnSelect:true,
		selectOnCheck:true,
		pageNumber:1,
		pageSize:15,
		pageList:[10,15,20,50,100], // 可选翻页列表
		singleSelect:true,
		remoteSort:false,
		sortName:'',
		sortOrder:'asc',
		remoteFilter: false,
	    	filterDelay: 400,
	   	filterRules: [],
		columns:[[{field:"id",hidden:true},
			{field:'mappingTypeId',hidden:true},
			{field:'tableInId',hidden:true},
			{field:'tableOutId',hidden:true},
			{field:'',title:'',checkbox:true},
			{field:'tableInCode',title:"内部字典DIC码",width:100,align:'center'},
			{field:'tableInName',title:"内部字典名称",width:200,align:'center'},
			{field:"tableOutName",title:"外部字典名称",width:200,align:'center'},
			{field:"tableOutCode",title:"外部字典DIC码",width:100,align:'center'},
			{field:"operation",title:'操作',width:50,align:'center',formatter:
				function(value,row,index){
					return "<a  href='#' οnclick='detailed("+index+")'>详细映射</a>";
			 	}}
			]]
});

$("#detailedmappingGrid").datagrid('enableFilter');

添加一个过虑条件

//添加过滤器
$('#detailedmappingGrid').datagrid('addFilterRule', {
					        	field: 'tableInCode',
					        	op: 'contains',
					        	value: '入院途径'
					        });
//执行过滤
$('#detailedmappingGrid').datagrid('doFilter');

设置过滤框为下拉框

默认情况下所有的过虑框都是文本框，但有些情况下我们需要下拉框、数字框、日期框等组件作为过滤条件，那么该怎么处理呢？

组件本身并没有提供属性可以支持其他类型的过滤框，但它提供了一个方法，enableFilter方法，该方法创建并启用过滤功能，其参数可以指定列的过滤框特征。

例如：指定上面的内部字典为下拉框过滤：

$('#detailedmappingGrid').datagrid('enableFilter', [{
	field:'tableInName',
	type:'combobox',
	options:{data:[{'id':'1','text':'测试'},{'id':'2','text':'测试'1}]},
	op:['contains']
}]);

注意：在IE浏览器下，所有hidden隐藏的列会影响显示的列的宽度，导致没吃刷新datagrid表格，表格都会变形，所以即便是hidden的列也应指定宽度，这样，每次刷新都会根据计算重新划分每列宽度。例如：

columns:[[
		{field:"id",hidden:true,width:100},
	  	{field:'mappingTypeId',hidden:true,width:100},
          	{field:'tableInId',hidden:true,width:100},
	 	{field:'tableOutId',hidden:true,width:100},
	 	{field:'',title:'',checkbox:true},
		{field:'tableInCode',title:"内部字典DIC码",width:100,align:'center'},
		{field:'tableInName',title:"内部字典名称",width:200,align:'center'},
		{field:"tableOutName",title:"外部字典名称",width:200,align:'center'},
		{field:"tableOutCode",title:"外部字典DIC码",width:100,align:'center'},
		{field:"operation",title:'操作',width:50,align:'center',formatter:
			function(value,row,index){
				return "<a  href='#' οnclick='detailed("+index+")'>详细映射</a>";
			 }}
	]]