- 开始之前,看下最新的v1.2版本有些什么
-
修复快速查询时的键盘回车事件与控件外围事件的冲突的问题。
-
修复快速查询时设置正则表达式时可能导致的语法错误的问题。
-
数据提供方法 DataHandler 将不再强制要求与列的绑定顺序一致,现在通过返回的 DataTable 中的 ColumnName 自动绑定到合适的列,所以,请保证您的 DataTable 和控件中的列名一致(区分大小写)。
-
增加展现模板的功能,现 InitConfig 初始化时针对列配置增加了一个 itemTemplate 属性,该属性提供了当前列的展现模板设定。
-
演示项目中 FirstGrid.aspx 增加了客户端刷新、服务端刷新和快速查询功能的演示。
-
演示项目中 TestTemplate.aspx 提供了使用展现模板的演示。
最主要的,通过template,可以随意定制每个格子的展现内容,比如说在表格中显示文本框、单选按钮、图片等,相信很多朋友会感兴趣吧。
- 快速查询和服务端查询还有Template
我们继续开始,这一次我们完善我们的FirstGrid,为其添加服务端查询的效果和快速查询。
一般而言,.net程序员更善于在界面中设定一个数据的筛选条件,然后通过PostBack在后台生成数据集并展示,上一章节我们演示了如何进行客户端的查询,这里,我们回归传统,使用服务端查询来实现筛选功能。
最简单的,我们为页面添加一个TextBox和Button,像下面这样:
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:Button ID="Button1" runat="server" Text="服务端查询演示" OnClick="Button1_Click" />
我们为按钮添加OnClick事件Button1_Click,完善事件代码和dotNetFlexGrid数据提供方法:
/
protected void Button1_Click(object sender, EventArgs e)
{
dotNetFlexGrid1.DefaultSearch.Add("String1", TextBox1.Text);//使用String1这个字段进行查询
}
DotNetFlexGrid1DataHandler中新增的代码:
//处理默认查询,即Button1_Click中指定的DefaultSearch查询参数
if (p.defaultSearch.ContainsKey("String1"))
{
System.Data.DataView dv = result.table.DefaultView;
dv.RowFilter = "String1 Like '%" + p.defaultSearch["String1"] + "%'";
result.table = dv.ToTable();
}
为什么不在Button1_Click执行查询操作呢,大家回顾下,我们的控件实际上是一个全异步的(Ajax)工作方式,实际上我们也希望数据的更新能够最小化,最轻量级;与知名的AjaxPro一样,我们在异步请求时完全没有实例化整个页面,而仅仅针对数据提供方法DataHandler进行调用,这样回避了Asp.net Form的大量的模型构建的逻辑,只是需要返回表格数据而已;这样做,导致了一个问题,如何给DataHandler提供参数;我们通过defaultSearch和extParam来解决它。
这里例子中,我们在按钮点击时提供了一个名为String1的DefaultSearch,在DataHandler中检测这个参数并执行合适的查询;如之前一样,还是用DataView进行模拟,实际应用中,您需要根据您的需求执行数据查询的操作。
好了,服务端查询每次都会刷新页面重新加载数据,而客户端查询则不需要这样。
我们在应用场景中,一般会提供一个数据的范围筛选,您可以使用上述的方法实现,有时候还会在上述的筛选范围内进行快速的定位或再一次筛选,比如说我们提供日期范围筛选数据,然后提供在这个范围内定位某一个地址的需求。
dotNetGrid提供了继承自Jquery FlexiGrid的快速查询的功能,如下演示:
其实很简单,重新找到您的初始化表格InitConfig的代码,改成下面这样
/
this.dotNetFlexGrid1.InitConfig(
new string[]{
"selectedοnclick=true",//是否点击行自动选中checkbox
"usepager=true",//使用分页器
"showcheckbox=false",//显示复选框
"height=200",//高度,可为auto或具体px值
"width=600"//宽度,可为auto或具体px值
},
new dotNetFlexGrid.FieldConfig[]{
new dotNetFlexGrid.FieldConfig("Guid","编号",60,true,dotNetFlexGrid.FieldConfigAlign.Left),
new dotNetFlexGrid.FieldConfig("String1","用户名",180,true,dotNetFlexGrid.FieldConfigAlign.Right),
new dotNetFlexGrid.FieldConfig("String2","地址",180,true,dotNetFlexGrid.FieldConfigAlign.Left),
new dotNetFlexGrid.FieldConfig("String3","创建时间",60,true,dotNetFlexGrid.FieldConfigAlign.Left)
},
new dotNetFlexGrid.SerchParamConfig[]{
new dotNetFlexGrid.SerchParamConfig("用户名","String1",true, dotNetFlexGrid.SerchParamConfigOperater.Eq,null),//通过String1进行相等查询,不绑定正则表达式
new dotNetFlexGrid.SerchParamConfig("地址","String2",false, dotNetFlexGrid.SerchParamConfigOperater.Like,@"^[\d]+$")//通过String2进行近似查询,绑定必须输入数字
},
null
);
我们在InitConfig使用了第三个参数serchParam,指定了显示名为"用户名",绑定字段String1的相等查询和显示名为"地址",绑定字段为String2的近似查询,同时,为地址的查询约束为只能输入数字。
再次浏览页面,界面正确的展示了查询面板,输入数据并回车,表格展现了刷新动画,但实际并没有数据的变化。
很简单,我们再为数据提供方法DataHandler增加快速查询的处理。
/
DotNetFlexGrid1DataHandler中新增的代码:
//如果传递的参数包含快速查询参数,则进行快速查询
if (p.qop != dotNetFlexGrid.SerchParamConfigOperater.None && p.qtype.Length > 0 && p.query.Length > 0)
{
System.Data.DataView dv = result.table.DefaultView;
if(p.qop== dotNetFlexGrid.SerchParamConfigOperater.Like)
dv.RowFilter = p.qtype+ " Like '%" + p.query + "%'";
else
dv.RowFilter = p.qtype + " = '" + p.query + "'";
result.table = dv.ToTable();
}
现在正常了,查询后显示了我们期望的数据;这里p.qop提供快速查询的操作符(等于还是近似),p.qtype提供了查询的字段,即之前初始化时的绑定字段,p.query提供了用户输入的条件。
最后,FirstGrid.aspx这个例子增加1.2版新增的功能Template,我们要在地址这一栏显示一个可以点击的链接访问谷歌进行查询,再增加一列图片,显示cnblogs的logo。
同样很简单,找到初始化表格的代码,新增一个图片列和增加template的设定。
/
this.dotNetFlexGrid1.InitConfig(
new string[]{
"selectedοnclick=true",//是否点击行自动选中checkbox
"usepager=true",//使用分页器
"showcheckbox=false",//显示复选框
"height=200",//高度,可为auto或具体px值
"width=600"//宽度,可为auto或具体px值
},
new dotNetFlexGrid.FieldConfig[]{
new dotNetFlexGrid.FieldConfig("Guid","编号",60,true,dotNetFlexGrid.FieldConfigAlign.Left),
new dotNetFlexGrid.FieldConfig("String1","用户名",180,true,dotNetFlexGrid.FieldConfigAlign.Right),
new dotNetFlexGrid.FieldConfig("String2","地址",180,true,dotNetFlexGrid.FieldConfigAlign.Left,false,false,true,"<a href='http://www.google.com.hk/search?q=[@String2]'>访问[@String1]的地址</a>"),
new dotNetFlexGrid.FieldConfig("String3","创建时间",60,true,dotNetFlexGrid.FieldConfigAlign.Left),
new dotNetFlexGrid.FieldConfig("DateTime","照片",60,true,dotNetFlexGrid.FieldConfigAlign.Left,false,false,true,"<img src='http://images.cnblogs.com/logo_small.gif'/>")
},
new dotNetFlexGrid.SerchParamConfig[]{
new dotNetFlexGrid.SerchParamConfig("用户名","String1",true, dotNetFlexGrid.SerchParamConfigOperater.Eq,null),//通过String1进行相等查询,不绑定正则表达式
new dotNetFlexGrid.SerchParamConfig("地址","String2",false, dotNetFlexGrid.SerchParamConfigOperater.Like,@"^[\d]+$")//通过String2进行近似查询,绑定必须输入数字
},
null
);
this.dotNetFlexGrid1.DataHandler = new dotNetFlexGrid.DataHandlerDelegate(DotNetFlexGrid1DataHandler); //提供数据的方法
InitConfig初始化时针对列配置增加了一个itemTemplate属性,该属性提供了当前列的展现模板设定,您可以在该属性中提供几乎任何Html内容(当然,请保证不会破坏表格结构),使用简单的模板语法"[@字段名]"来展现您所希望的格式,比如说:
"<input id=' [@Guid]' type='text' value='[@String1]' />"
上述语法将在指定的列展现一个以该行的Guid字段的值给出的Id的文本框,该文本框将展示String1字段的值。
这个FirstGrid.aspx就到这里了,最新的 dotnetFlexGrid 1.2请访问http://dotnetflexgrid.codeplex.com/ 下载,同时也请多多访问我的blog "http://www.cnblogs.com/hualei"提些宝贵的建议。