首页 > 代码库 > EasyUI 数据网格行过滤（DataGrid Filter Row）

EasyUI 数据网格行过滤（DataGrid Filter Row）

2024-08-13 21:58:13   217人阅读

http://www.jeasyui.net/extension/192.html 原版

技术分享

用法

包含 ‘datagrid-filter.js‘ 文件

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

启用过滤（Filter）

  1. var dg = $(‘#dg‘);
  2. dg.datagrid(); // create datagrid
  3. dg.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把过滤规则字符串化的函数。
  1. function(data){
  2. return JSON.stringify(data);
  3. }

方法

下面的方法扩展自数据网格（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。

代码实例：

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

EasyUI 数据网格行过滤（DataGrid Filter Row）


联系
我们