• 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应用程序[官网][下载]。
  • 相关阅读:
    1+X云计算(中级) 单节点部署应用商城系统(gpmall)
    1+X云计算 应用商城系统(gpmall)-遇到的问题以及解决办法
    1+X云计算平台运维与开发(中级)eNSP A~E卷 试题+答案
    vi&vim 基本使用方法
    yum针对软件包操作的常用命令
    本地yum源配置
    SpringCloud微服务初体验
    SpringBoot自定义注解拦截器,实现登录token验证
    MySQL建立SSL连接问题,设置useSSL=false显式禁用SSL,或者设置useSSL=true
    TPL事务
  • 原文地址:https://www.cnblogs.com/hualei/p/1804689.html
Copyright © 2020-2023  润新知