EasyUI 数据网格行过滤(DataGrid Filter Row)

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

名称 类型 描述 默认值
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 把过滤规则字符串化的函数。
  1. function(data){
  2. return JSON.stringify(data);
  3. }

方法

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

代码实例:

  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. }]);
addFilterRule param 添加一个过滤规则。

  1. $(‘#dg‘).datagrid(‘addFilterRule‘, {
  2. field: ‘desp‘,
  3. op: ‘contains‘,
  4. value: ‘easyui‘
  5. });
removeFilterRule field 移除过滤规则。
如果 ‘field‘ 参数未指定,移除所有的过滤规则。
doFilter none 基于过滤规则执行过滤。
getFilterComponent field 在指定的域上获取过滤组件。
时间: 2024-08-29 02:45:50

EasyUI 数据网格行过滤(DataGrid Filter Row)的相关文章

easyui数据网格视图(Datagrid View)的简单应用

下面介绍datagrid的数据网格详细视图和数据网格的分组视图 1.先引用的js和css文件 1)包含eauyui必备的四个文件easyui.css,icon.css, jquery-min.js.jquery-easyui.min.js 和详细视图需要的detailview.js 和 分组视图groupview.js <link rel="stylesheet" type="text/css" href="js/easyui.css"&g

雷林鹏分享:jQuery EasyUI 数据网格 - 条件设置行背景颜色

jQuery EasyUI 数据网格 - 条件设置行背景颜色 本教程将向您展示如何根据一些条件改变数据网格(datagrid)组件的行样式.当 listprice 值大于 50 时,我们将为该行设置不同的颜色. 数据网格(datagrid)的 rowStyler 函数的设计目的是允许您自定义行样式.以下代码展示如何改变行样式: url="data/datagrid_data.json" singleSelect="true" fitColumns="tru

雷林鹏分享:jQuery EasyUI 数据网格 - 添加查询功能

jQuery EasyUI 数据网格 - 添加查询功能 本实例演示如何从数据库得到数据,并将它们显示在数据网格(datagrid)中.然后演示如何根据用户输入的搜索关键词搜寻显示结果. 创建数据网格(DataGrid) 创建带有分页功能的数据网格(datagrid),然后添加工具栏到其中. url="datagrid24_getdata.php" toolbar="#tb" title="Load Data" iconCls="icon

雷林鹏分享:jQuery EasyUI 数据网格 - 创建属性网格

jQuery EasyUI 数据网格 - 创建属性网格 属性网格(property grid)带有一个内置的 expand(展开)/collapse(合并) 按钮,可以简单地为行分组.您可以简单地创建一个可编辑属性的分层(hierarchical)列表. 设置 HTML url="propertygrid_data.json" showGroup="true" scrollbarSize="0" > 准备 json 数据 [ {"

雷林鹏分享:jQuery EasyUI 数据网格 - 列运算

jQuery EasyUI 数据网格 - 列运算 在本教程中,您将学习如何在可编辑的数据网格(datagrid)中包含一个运算的列.一个运算列通常包含一些从一个或多个其他列运算的值. 首先,创建一个可编辑的数据网格(datagrid).这里我们创建了一些可编辑列,'listprice'.'amount' 和 'unitcost' 列定义为 numberbox 编辑类型.运算列是 'unitcost' 字段,将是 listprice 乘以 amount 列的结果. title="Editable

雷林鹏分享jQuery EasyUI 数据网格 - 动态改变列

数据网格(DataGrid)列可以使用 'columns' 属性简单地定义.如果您想动态地改变列,那根本没有问题.为了改变列,您可以重新调用datagrid 方法,并传递一个新的 columns 属性. 创建数据网格(DataGrid) url="data/datagrid_data.json" singleSelect="true" iconCls="icon-save"> $('#tt').datagrid({ columns:[[ {

雷林鹏分享:jQuery EasyUI 应用 - 创建 CRUD 数据网格(DataGrid)

在上一章节中,我们使用对话框(dialog)组件创建了 CRUD 应用来创建和编辑用户信息.本教程我们将告诉您如何创建一个 CRUD 数据网格(DataGrid). 我们将使用 可编辑的数据网格(DataGrid)插件 来完成这些 CRUD 操作动作. 步骤 1:在 HTML 标签中定义数据网格(DataGrid) toolbar="#toolbar" idField="id" rownumbers="true" fitColumns="

jQuery EasyUI 应用 - 创建 CRUD 数据网格(DataGrid)

在上一章节中,我们使用对话框(dialog)组件创建了 CRUD 应用来创建和编辑用户信息.本教程我们将告诉您如何创建一个 CRUD 数据网格(DataGrid). 我们将使用 可编辑的数据网格(DataGrid)插件 来完成这些 CRUD 操作动作. 步骤 1:在 HTML 标签中定义数据网格(DataGrid) <table id="dg" title="My Users" style="width:550px;height:250px"

jQuery EasyUI - 数据表格(DataGrid)

由于工作需要,项目使用前端 jQuery EasyUI - DataGrid 来控制数据表格. 1.加载相关js和css,因为easyui依赖jquery,所有加载easyui前要先加载jquery,否则为提示找不到datagrid <!-- 加载jquery --> <script type="text/javascript" src="plugins/jquery/jquery-1.4.2.min.js"></script>