dotNetFlexGrid-asp.net的异步表格控件
来源:互联网 发布:网络增值服务登录 编辑:程序博客网 时间:2024/04/29 18:15
dotNetFlexGrid-asp.net的异步表格控件 使用指南 JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid是一款asp.net原生的异步表格控件,它的前身是Jquery FlexiGrid插件,我们重构了FlexiGrid的大部分Javascript代码,使其工作的更有效率,BUG更少;同时将其封装为asp.net 控件,提供了简单易用的使用方式。 dotNetFlexGrid作为一个轻量级的表格控件,同时提供了大量实用和高效的功能: 您可以访问http://dotnetflexgrid.codeplex.com/ 下载控件的最新版本,包括最新的控件代码、演示项目和说明文档。 同时您可以访问http://www.cnblogs.com/hualei 获取控件的最新消息和使用指导,我们将为您提供最新的全中文的指导,同时我们欢迎您提供更好的建议和指正。 请检查您下载的文件中包含dotNetFlexGrid v1.1.rar(此处采用v1.1版进行演示),该压缩包包含dotNetFlexGrid的全部源码,请将压缩包中的所有文件解压缩到如dotNetFlexGridControl的目录(当然,您可以设定任意的文件夹名)。 根据您的项目情况,将dotNetFlexGridControl文件夹复制到您的asp.net站点目录的任意目录下,如果您使用的是Asp.net WebApplication,请在项目中至少包含如下文件: 请打开dotNetFlexGridControl/dotNetFlexGrid.ascx.cs文件,修改如下代码为您的项目中的控件路径。 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// /// <summary> /// 配置点:根据控件的实际路径配置 /// </summary> public string ControlCurrentPath { get { // TODO:ControlCurrentPath 配置点:根据控件的实际路径配置 return "/dotNetFlexGridControl/"; } } //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// 同时,请在您的项目中引用Newtonsoft.Json.Net20.dll(该文件在Bin目录中提供) 一切完毕,现在您可以在您的项目中正式使用dotNetFlexGrid了。 Btw:似乎的确麻烦了点,现在dotNetFlexGrid是采用Asp.net用户控件的方式进行封装的,大多数的开发中测试均是使用的Asp.net网站项目;在发布的时候,我们考虑到易用性以及便于修改,故没有采用自定义控件的方式进行封装;不过,这样似乎对使用者更加有利。 好了,我们开始我们的第一个Gird,我们将实现演示项目中的FirstGrid.aspx的效果;这个例子展示一个模拟的用户列表。 首先,打开Visual Studio 2005/2008/2010;我们需要在页面中加入控件,将您的页面切换到设计视图(在源代码中复制粘贴也是不错的主意),从解决方案资源管理器找到控件目录下的dotNetFlexGrid.ascx,直接拖拽到页面上合适的位置,注意检查下你的控件ID(本例直接使用默认的"dotNetFlexGrid1")。 其次,我们需要写一段代码初始化Grid,将如下代码复制到你的页面的Page_Load中。 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// this.dotNetFlexGrid1.InitConfig( new string[]{ "striped=true",//是否显示行交替色 "selectedonclick=true",//是否点击行自动选中checkbox "usepager=true",//使用分页器 "showcheckbox=true",//显示复选框 "height=200",//高度,可为auto或具体px值 "width=600"//宽度,可为auto或具体px值 }, new dotNetFlexGrid.FieldConfig[]{ new dotNetFlexGrid.FieldConfig("Guid","编号",60,true,dotNetFlexGrid.FieldConfigAlign.Left), new dotNetFlexGrid.FieldConfig("String1","用户名",120,true,dotNetFlexGrid.FieldConfigAlign.Right), new dotNetFlexGrid.FieldConfig("String2","地址",60,true,dotNetFlexGrid.FieldConfigAlign.Left), new dotNetFlexGrid.FieldConfig("String3","创建时间",60,true,dotNetFlexGrid.FieldConfigAlign.Left) } ); //this.dotNetFlexGrid1.DataHandler = new dotNetFlexGrid.DataHandlerDelegate(DotNetFlexGrid1DataHandler);//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// dotNetFlexGrid1.InitConfig方法提供初始化表格主控参数、列配置的功能,例子中,我们设定表格宽600px,高200px,并绑定 "编号""用户名""地址""创建时间"四个字段,自此,其实我们的Grid已经可以使用了,浏览该页面,我们看到了如下界面: 很简单,不是吗;我们看到了一个最简单的空表格,仔细看看,如此简单的表格其实拥有了如下强大的功能: 接下来,我们为表格填充数据,重新转到Page_Load中,我们增加一行,并在页面中增加一个提供数据的方法。 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// Page_Load中 this.dotNetFlexGrid1.DataHandler = new dotNetFlexGrid.DataHandlerDelegate(DotNetFlexGrid1DataHandler); //提供数据的方法 新增方法 public dotNetFlexGrid.DataHandlerResult DotNetFlexGrid1DataHandler(dotNetFlexGrid.DataHandlerParams p) { dotNetFlexGrid.DataHandlerResult result = new dotNetFlexGrid.DataHandlerResult(); result.page = p.page;//设定当前返回的页号 result.total = 100;//总计的数据条数,此处用100进行模拟 result.table = dotNetFlexGrid.DemoMemoryTable(p.page * 100, p.rp);//调用演示的数据生成函数产生模拟数据 return result; } //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// DotNetFlexGrid1DataHandler方法接收一个类型为dotNetFlexGrid.DataHandlerParams的参数,该参数提供控件的动作所产生的所有参数,如p.page(当前请求的页号)、p.rp(当前请求所希望返回的行数)等等,实际上,该参数包含众多的属性,具体请查看控件说明文档中的详细描述。 DotNetFlexGrid1DataHandler方法需要返回一个类型为dotNetFlexGrid.DataHandlerResult的对象,该对象必须提供属性page(当前返回的页号)、属性total(总共的数据条数)、属性table(包含数据的DataTable)。 在这里,我们模拟为Grid提供数据,我们使用控件内置的DemoMemoryTable()产生一个虚拟的DataTable,实际应用中,您需要根据您的需求构建储存数据的DataTable。 我们再次浏览页面,您会发现表格中填充了一些模拟的数据,同时分页器、排序功能、刷新功能均能正常使用了。 其实,我们会发现排序功能似乎无效,表格刷新后但并没有按照我们预期的进行排序,实际上,与其他控件不同,dotNetFlexGrid建议使用服务端排序,大多数需求中,我们期望的排序功能是针对整个数据库查询的结果集进行排序,而大多数控件或JS 插件提供的仅仅是单页的客户端排序;既然这样,我们为这个例子增加排序处理,请修改你的DotNetFlexGrid1DataHandler方法。 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// public dotNetFlexGrid.DataHandlerResult DotNetFlexGrid1DataHandler(dotNetFlexGrid.DataHandlerParams p) { dotNetFlexGrid.DataHandlerResult result = new dotNetFlexGrid.DataHandlerResult(); result.page = p.page;//设定当前返回的页号 result.total = 100;//总计的数据条数,此处用100进行模拟 result.table = dotNetFlexGrid.DemoMemoryTable(p.page * 100, p.rp);//调用演示的数据生成函数产生模拟数据 //如果传递的参数包含排序设置的话,通过DataView.Sort功能模拟进行当页排序 if (p.sortname.Length > 0 && p.sortorder.Length > 0) { System.Data.DataView dv = result.table.DefaultView; dv.Sort = (p.sortname + " " + p.sortorder); result.table = dv.ToTable(); } return result; } //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// 好了,现在可以排序了,同时请原谅我又偷懒了,我们采用DataView.Sort功能模拟进行当前的数据集排序,实际上还是单页排序,但实际上,此处的数据处理逻辑是应该连接数据库执行实际的查询,排序是否应该交给数据库?的确,分页和排序是很普遍的问题,我们在dotNetFlexGrid的说明文档中同时提供了一个通用的分页、排序、查询的存储过程配套dotNetFlexGrid使用和参考,请大家自行下载。 最后,似乎还不够,一般我们的表格都会根据用户的条件更改查询结果,我们实现一个异步的查询效果。 我们在页面上增加一个id为"txtName"的文本框和id为"btnSubmit"的按钮以及一小段javascript,像下面这个样子。 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// <script language="javascript"> function doSearch() { var txt = document.getElementById("txtName").value; if (txt) { var extP = [{ name: "String1", value: txt}]; dotNetFlexGrid1.applyQueryReload(extP); } } </script> <div> <input id="txtName" type="text" /> <input id="btnSubmit" type="button" value="查询" onclick="doSearch();"/> </div>//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// 更改下DotNetFlexGrid1DataHandler方法,让其支持查询。 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// public dotNetFlexGrid.DataHandlerResult DotNetFlexGrid1DataHandler(dotNetFlexGrid.DataHandlerParams p) { dotNetFlexGrid.DataHandlerResult result = new dotNetFlexGrid.DataHandlerResult(); result.page = p.page;//设定当前返回的页号 result.total = 100;//总计的数据条数,此处用100进行模拟 result.table = dotNetFlexGrid.DemoMemoryTable(p.page * 100, p.rp);//调用演示的数据生成函数产生模拟数据 //如果传递的参数包含排序设置的话,通过DataView.Sort功能模拟进行当页排序 if (p.sortname.Length > 0 && p.sortorder.Length > 0) { System.Data.DataView dv = result.table.DefaultView; dv.Sort = (p.sortname + " " + p.sortorder); result.table = dv.ToTable(); } //如果传递的参数包含附加参数的话,再来模拟查询,原谅我真的很懒。 if (p.extParam.ContainsKey("String1")) { System.Data.DataView dv = result.table.DefaultView; dv.RowFilter = "String1 Like '%" + p.extParam["String1"]+"%'"; result.table = dv.ToTable(); } return result; } //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// 我们通过p.extParam获取到Javascript送出的查询数据(注意之前的js代码中的赋值和刷新表格),然后进行查询并返回结果集;其实,我们通过这种方法,可以很简单的实现与其他各类控件的联动,甚至无数个dotNetFlexGrid。 Over,第一个例子到这里了,总结下: 不知不觉,似乎写了很多,其实dotNetFlexGrid是非常易用的,3个简单的步骤即可完成一个完全异步的Grid,足以替换掉Asp.net自带的GridView了。 下一次,我们将演示快速查询的功能以及2个表格的联动功能,敬请期待。 BTW:本文的例子包含在整个演示项目中,不幸的是,演示项目的下载需要稍后提供,当然,看到此文的都是多年的ASP.NET老手,如此简单的例子,相信不会给大家带来过多的困惑。 我们继续开始,这一次我们完善我们的FirstGrid,为其添加服务端查询的效果和快速查询。 一般而言,.net程序员更善于在界面中设定一个数据的筛选条件,然后通过PostBack在后台生成数据集并展示,上一章节我们演示了如何进行客户端的查询,这里,我们回归传统,使用服务端查询来实现筛选功能。 最简单的,我们为页面添加一个TextBox和Button,像下面这样: ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:Button ID="Button1" runat="server" Text="服务端查询演示" OnClick="Button1_Click" /></fieldset> //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// 我们为按钮添加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字段的值。 本文转自http://dotnetflexgrid.codeplex.com/documentation
- dotNetFlexGrid-asp.net的异步表格控件
- dotNetFlexGrid-asp.net的异步表格控件 使用指南
- JQuery FlexiGrid的asp.net完美解决方案:dotNetFlexGrid-.Net原生的异步表格控件 简介和应用效果截图
- JQuery FlexiGrid的asp.net完美解决方案:dotNetFlexGrid 源码下载
- 新增格式化单元格数据功能-dotNetFlexGrid更新1.24版本,快速的设置您的表格数据的不同样式;现在开始扔掉你的Asp.net GridView吧。
- asp.net控件的异步刷新
- JQuery FlexiGrid的asp.net完美解决方案-dotNetFlexGrid使用指南(一)
- JQuery FlexiGrid的asp.net完美解决方案-dotNetFlexGrid使用指南(二)服务端查询、快速查询和Html模板
- ASP.NET异步发送updatepanel控件
- dotNetFlexGrid 控件Api说明文档
- ASP.NET - 将表格控件绑定到 XmlDataSource 控件
- ASP.NET的控件
- 一个超强的ASP表格控件
- Tree控件的异步加载方案的选择建议(C#,ASP.NET 2.0)
- [A1.ASP-NET]DayPilot Calendar控件异步更新的Drag和Drop实验
- ASP.NET : 为服务器控件或者页面添加异步行为
- ASP.NET 异步更新UI控件问题---待解
- ASP.NET中表格的灵活使用
- [教程]逆向反汇编第十课
- 难得清闲
- 写代码要仔细测试
- C反汇编实例(详细注解版)(一)
- 中国象棋基本规则
- dotNetFlexGrid-asp.net的异步表格控件
- public void startManagingCursor (Cursor c)的作用
- C# 参考之转换关键字:operator、explicit与implicit
- 选择排序 ruby
- C反汇编实例(详细注解版)(二)
- C反汇编实例(详细注解版)(三)
- window 安装android
- zoj 1874 || poj 1562 Primary Arithmetic(水题。)
- js中innerHTML与innerText的用法与区别