Ext.Net学习笔记12:Ext.Net GridPanel Filter用法
Ext.Net学习笔记12:Ext.Net GridPanel Filter用法
Ext.Net GridPanel的用法在上一篇中已经介绍过,这篇笔记讲介绍Filter的用法。
Filter是用来过滤数据的,效果如图:
数据过滤分为两种:本地Filter和远程Filter,默认为远程过滤,也就是将查询条件拿到服务器进行查询并得到返回结果。
本地Filter
直接上代码,还是我们上一篇中的GridPanel,加入了Filter功能:
<ext:GridPanel runat="server" ID="grid" ColumnLines="true" Width="500" Height="200">
<Store>
<ext:Store runat="server" ID="storeUserInfo" PageSize="5" >
<Model>
<ext:Model ID="UserInfoModel" runat="server" IDProperty="ID">
<Fields>
<ext:ModelField Name="ID" Type="Int"></ext:ModelField>
<ext:ModelField Name="Name" Type="String"></ext:ModelField>
<ext:ModelField Name="Gender" Type="String"></ext:ModelField>
<ext:ModelField Name="Age" Type="Int"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:RowNumbererColumn ID="RowNumbererColumn1" runat="server"></ext:RowNumbererColumn>
<ext:Column runat="server" ID="columnID" Width="100" Text="ID" DataIndex="ID"></ext:Column>
<ext:Column runat="server" ID="columnName" Width="200" Text="姓名" DataIndex="Name"></ext:Column>
<ext:Column runat="server" ID="columnGender" Width="50" Text="性别" DataIndex="Gender"></ext:Column>
<ext:NumberColumn runat="server" ID="columnAge" Width="60" Text="年龄" DataIndex="Age"></ext:NumberColumn>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server" Mode="Simple"></ext:CheckboxSelectionModel>
</SelectionModel>
<BottomBar>
<ext:PagingToolbar runat="server" ID="gridPaging" StoreID="storeUserInfo"></ext:PagingToolbar>
</BottomBar>
<Features>
<ext:GridFilters ID="GridFilters1" runat="server" Local="true">
<Filters>
<ext:StringFilter DataIndex="Name"></ext:StringFilter>
<ext:NumericFilter DataIndex="Age"></ext:NumericFilter>
</Filters>
</ext:GridFilters>
</Features>
</ext:GridPanel>
Filter是GridPanel的一个功能,所以放在Features标签内。
GridFilters的属性Local="true"说明要使用的过滤方式为本地,不进行服务器请求。
StringFilter 和 NumericFilter是两个过滤条件,它将过滤不同数据类型(字符串和数字)的字段。DataIndex对应GridPanel Column中的DataIndex。
姓名过滤:
年龄过滤:
远程Filter
远程过滤的过程是在用户输入过滤条件之后,客户端将用户的输入构造成查询条件,并通过ajax的方式请求服务器,服务器则会根据传入的Filters参数过滤到相应的数据,然后返回给客户端。
为了能够进行远程Filter,我们首先要将GridFilters 的属性Local改为"false",或删除掉Local属性(因为默认进行远程Filter)
<Features>
<ext:GridFilters ID="GridFilters1" runat="server" Local="false">
<Filters>
<ext:StringFilter DataIndex="Name"></ext:StringFilter>
<ext:NumericFilter DataIndex="Age"></ext:NumericFilter>
</Filters>
</ext:GridFilters>
</Features>
然后,我们需要让Store支持远程异步加载数据,我们这里使用PageProxy和OnReadData来完成:
<ext:Store runat="server" ID="storeUserInfo" PageSize="5" OnReadData="storeUserInfo_ReadData">
<Model>
<ext:Model ID="UserInfoModel" runat="server" IDProperty="ID">
<Fields>
<ext:ModelField Name="ID" Type="Int"></ext:ModelField>
<ext:ModelField Name="Name" Type="String"></ext:ModelField>
<ext:ModelField Name="Gender" Type="String"></ext:ModelField>
<ext:ModelField Name="Age" Type="Int"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
<Proxy>
<ext:PageProxy></ext:PageProxy>
</Proxy>
</ext:Store>
服务器端的storeUserInfo_ReadData代码如下:
protected void storeUserInfo_ReadData(object sender, Ext.Net.StoreReadDataEventArgs e)
{
int start = e.Start;
int limit = e.Limit; var userInfoList = UserInfo.GetData();
e.Total = userInfoList.Count; storeUserInfo.DataSource = userInfoList.Skip(start).Take(limit).ToList();
storeUserInfo.DataBind();
}
完成上面的修改以后,我们只是将原来的一次加载数据改成了异步加载数据,接下来我们来修改storeUserInfo方法,使它支持Filter过滤条件:
首先要构造查询条件集合:
//如果是ashx或mvc页面,可以使用context.Request["filter"];
string filters = e.Parameters["filter"];
FilterConditions conditions = null;
然后根据条件查询,下面是一个简单的示例:
if (!string.IsNullOrWhiteSpace(filters))
{
conditions = new FilterConditions(filters); foreach (var item in conditions.Conditions)
{
switch (item.Field)
{
case "Name":
{
string value = item.Value<string>();
userInfoList = userInfoList.FindAll(m => m.Name.Contains(value));
}
break;
case "Age":
{
int value = item.Value<int>();
switch (item.Comparison)
{
case Comparison.Gt:
userInfoList = userInfoList.FindAll(m => m.Age >= value);
break;
case Comparison.Lt:
userInfoList = userInfoList.FindAll(m => m.Age <= value);
break;
case Comparison.Eq:
userInfoList = userInfoList.FindAll(m => m.Age == value);
break;
}
}
break;
}
}
}
这里面的item就是一个查询条件,Field是字段,表示要过滤的字段;
item中有一个比较重要的属性Comparison,它是一个枚举类型:
- Gt:大于
- Lt:小于
- Eq:等于
另外,Value<T>()方法可以获取查询条件的值,泛型T是我们需要是类型
Ext.Net学习笔记12:Ext.Net GridPanel Filter用法的更多相关文章
- 【Ext.Net学习笔记】05:Ext.Net GridPanel的用法(包含Filter、Sorter、Grouping、汇总(Summary)的用法)
GridPanel是用来显示数据的表格,与ASP.NET中的GridView类似. GridPanel用法 直接看代码: <ext:GridPanel runat="server&qu ...
- 【Ext.Net学习笔记】06:Ext.Net GridPanel的用法(GridPanel 折叠/展开行、GridPanel Selection、 可编辑的GridPanel)
GridPanel 折叠/展开行 Ext.Net GridPanel的行支持折叠/展开功能,这个功能个人觉得还说很有用处的,尤其是数据中包含图片等内容的时候. 下面来看看效果: 使用行折叠/展开功能之 ...
- Ext.Net学习笔记18:Ext.Net 可编辑的GridPanel
Ext.Net学习笔记18:Ext.Net 可编辑的GridPanel Ext.Net GridPanel 有两种编辑模式:编辑单元格和编辑行. 单元格编辑: 行编辑: 可以看出,单元格编辑的时候,只 ...
- Ext.Net学习笔记16:Ext.Net GridPanel 折叠/展开行
Ext.Net学习笔记16:Ext.Net GridPanel 折叠/展开行 Ext.Net GridPanel的行支持折叠/展开功能,这个功能个人觉得还说很有用处的,尤其是数据中包含图片等内容的时候 ...
- Ext.Net学习笔记17:Ext.Net GridPanel Selection
Ext.Net学习笔记17:Ext.Net GridPanel Selection 接下来是Ext.Net的GridPanel的另外一个功能:选择. 我们在GridPanel最开始的用法中已经见识过如 ...
- Ext.Net学习笔记15:Ext.Net GridPanel 汇总(Summary)用法
Ext.Net学习笔记15:Ext.Net GridPanel 汇总(Summary)用法 Summary的用法和Group一样简单,分为两步: 启用Summary功能 在Feature标签内,添加如 ...
- Ext.Net学习笔记13:Ext.Net GridPanel Sorter用法
Ext.Net学习笔记13:Ext.Net GridPanel Sorter用法 这篇笔记将介绍如何使用Ext.Net GridPanel 中使用Sorter. 默认情况下,Ext.Net GridP ...
- Ext.Net学习笔记14:Ext.Net GridPanel Grouping用法
Ext.Net学习笔记14:Ext.Net GridPanel Grouping用法 Ext.Net GridPanel可以进行Group操作,例如: 如何启用Grouping功能呢?只需要在Grid ...
- Ext.Net学习笔记11:Ext.Net GridPanel的用法
Ext.Net学习笔记11:Ext.Net GridPanel的用法 GridPanel是用来显示数据的表格,与ASP.NET中的GridView类似. GridPanel用法 直接看代码: < ...
随机推荐
- 2015年10月15日学习html基础笔记
一个互联网公司的分工,小公司要求全能,拿一个项目全部做出来.大公司分工明细,主要步奏为策划人员策划方案,美工人员设计图有.psd.rp等,前端人员做静态页面,后台人员获取数据java php .net ...
- classLoader (一)
不说废话,上代码吧. 随便写一个类,他是由appclassLoader加载的 package classLoaderExample; class Bean { public void test() { ...
- oracle 创建索引思考(转)
在Oracle数据库中,创建索引虽然比较简单.但是要合理的创建索引则比较困难了. 笔者认为,在创建索引时要做到三个适当,即在适当的表上.适当的列上创建适当数量的索引.虽然这可以通过一句话来概括优化的索 ...
- Weka 入门1
本人也是借鉴网上他人资料.主要介绍使用java调用Weka库. 首先介绍weka,Weka的全名是怀卡托智能分析环境,是基于开源环境的机器学习和数据挖掘软件.我们可以去weka官网下载最新的Weka软 ...
- HIVE中查询FAILED: Error in metadata: javax.jdo.JDOFatalDataStoreException: Communications link failure
有一天早上到公司用hive中查询数据,发现报错不能连接.通过检查发现mysql服务器没有启动,开启mysql服务器后查询正常.
- Ant执行一个含有main方法的class文件
目前需要使用ant来执行一个含有main方法的class文件,并且需要通过命令来行传两个参数(start和end)到main方法. <target name="gsp" de ...
- JavaScript- The Good Parts function Curry
Functions are values, and we can manipulate function values in interesting ways.Currying allows us t ...
- Centos6.3建立FTP
2014年2月22日 16:54:20 1. 安装ftp yum install vsftpd ftp 2. 编辑/etc/vsftpd/vsftpd.conf chroot_list ...
- ip头、tcp头、udp头详解及定义,结合Wireshark抓包看实际情况
公司的同事们在分析网页加载慢的问题,忽然使用到了Wireshark工具,我就像发现新大陆一样好奇,赶紧看了看,顺便复习了一下相关协议.上学时学的忘的差不多了,汗颜啊! 报文封装整体结构 mac帧头定义 ...
- WPF-21:WPF实现仿安卓的图案密码键盘(改进)
前面写了个简单的实现( http://blog.csdn.net/yysyangyangyangshan/article/details/9280439),不过效果不太好,各个点之间没有连接起来.这里 ...