非常教程

jQuery EasyUI 教程教程

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

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

jQuery EasyUI 扩展 - 数据网格行过滤(DataGrid Filter Row)


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

jQuery EasyUI 扩展

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

用法

包含 '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 在指定的域上获取过滤组件。

下载 jQuery EasyUI 实例

jquery-easyui-datagrid-filter.zip


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

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

jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件。jQuery EasyUI 框架提供了创建网页所需的一切,帮助您轻松建立站点。

jQuery EasyUI 教程目录

1.jQuery EasyUI 教程
2.jQuery EasyUI 基础插件 – Draggable 可拖拽
3.jQuery EasyUI 基础插件 – Easyloader 加载器
4.jQuery EasyUI 基础插件 – Parser 解析器
5.jQuery EasyUI 布局插件 – Tabs 标签页/选项卡
6.jQuery EasyUI 布局插件 – Panel 面板
7.jQuery EasyUI 基础插件 – Tooltip 提示框
8.jQuery EasyUI 基础插件 – Progressbar 进度条
9.jQuery EasyUI 基础插件 – Searchbox 搜索框
10.jQuery EasyUI 基础插件 – Pagination 分页
11.jQuery EasyUI 基础插件 – Resizable 可调整尺寸
12.jQuery EasyUI 基础插件 – Droppable 可释放
13.jQuery EasyUI 菜单与按钮插件 – Linkbutton 链接按钮
14.jQuery EasyUI 菜单与按钮插件 – Menu 菜单
15.jQuery EasyUI 布局插件 – Layout 布局
16.jQuery EasyUI 布局插件 – Accordion 折叠面板
17.jQuery EasyUI 菜单与按钮插件 – Splitbutton 分割按钮
18.jQuery EasyUI 菜单与按钮插件 – Menubutton 菜单按钮
19.jQuery EasyUI 表单插件 – Datebox 日期框
20.jQuery EasyUI 表单插件 – Numberbox 数字框
21.jQuery EasyUI 表单插件 – Combogrid 组合网格
22.jQuery EasyUI 表单插件 – Combotree 组合树
23.jQuery EasyUI 表单插件 – Combobox 组合框
24.jQuery EasyUI 表单插件 – Combo 组合
25.jQuery EasyUI 表单插件 – Validatebox 验证框
26.jQuery EasyUI 表单插件 – Form 表单
27.jQuery EasyUI 数据网格与树插件 – Datagrid 数据网格
28.jQuery EasyUI 窗口插件 – Messager 消息框
29.jQuery EasyUI 窗口插件 – Dialog 对话框
30.jQuery EasyUI 窗口插件 – Window 窗口
31.jQuery EasyUI 表单插件 – Slider 滑块
32.jQuery EasyUI 表单插件 – Timespinner 时间微调器
33.jQuery EasyUI 表单插件 – Numberspinner 数值微调器
34.jQuery EasyUI 表单插件 – Spinner 微调器
35.jQuery EasyUI 表单插件 – Calendar 日历
36.jQuery EasyUI 表单插件 – Datetimebox 日期时间框
37.jQuery EasyUI 扩展 – 可编辑的树
38.jQuery EasyUI 扩展 – 可编辑的数据网格
39.jQuery EasyUI 扩展 – 数据网格视图
40.jQuery EasyUI 扩展 – Portal
41.jQuery EasyUI 插件
42.jQuery EasyUI 数据网格与树插件 – Treegrid 树形网格
43.jQuery EasyUI 数据网格与树插件 – Tree 树
44.jQuery EasyUI 数据网格与树插件 – Propertygrid 属性网格
45.jQuery EasyUI 扩展 – RTL 支持
46.jQuery EasyUI 扩展 – DWR 加载器
47.jQuery EasyUI 扩展 – 主题
48.jQuery EasyUI 扩展 – 树形网格行拖放
49.jQuery EasyUI 扩展 – 数据网格行拖放
50.jQuery EasyUI 扩展 – 数据网格行过滤
51.jQuery EasyUI 扩展 – Ribbon