JQuery FlexiGrid的asp.net完美解决方案-dotNetFlexGrid使用指南(二）服务端查询、快速查询和Html模板

1. 开始之前，看下最新的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[]{

"selectedonclick=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[]{

"selectedonclick=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"提些宝贵的建议。