zoukankan      html  css  js  c++  java
  • 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"提些宝贵的建议。

    本文作者:华磊 出处:http://www.cnblogs.com/hualei/
    本文版权归华磊和博客园、CSDN共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。该文章也同时发布在我的独立博客中-博客园-华磊CSDN-华磊
    特别授权:敏捷开发(SCRUM)系列文章特授权上海火速转载使用并应用到研发项目“火速智卓-用心连接企业员工的微信企业号应用平台”的管理中。
    小规模研发团队的敏捷开发(SCRUM)全集
    JQuery+FlexiGrid+asp.net完美解决方案-开源项目dotNetFlexGrid,构建快速的Ajax应用程序[官网][下载]。
  • 相关阅读:
    如何在iTerm2中配置oh my zsh?
    sublime中格式化jsx文件
    ES6 new syntax of Literal
    ES6 new syntax of Rest and Spread Operators
    How to preview html file in our browser at sublime text?
    ES6 new syntax of Default Function Parameters
    ES6 new syntax of Arrow Function
    七牛云2018春招笔试题
    Spring-使用注解开发(十二)
    Spring-声明式事物(十一)
  • 原文地址:https://www.cnblogs.com/hualei/p/1804689.html
Copyright © 2011-2022 走看看