返回介绍

jQuery EasyUI 扩展 – 数据网格行过滤

发布于 2018-05-28 02:45:06 字数 2978 浏览 1144 评论 0 收藏 0

用法

包含 '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)添加的属性。

名称类型描述默认值
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在指定的域上获取过滤组件。

下载 jQuery EasyUI 实例

jquery-easyui-datagrid-filter

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文