dotNetFlexGrid-asp.net的异步表格控件 使用指南

dotNetFlexGrid-asp.net的异步表格控件 使用指南

author:hualei created by:2010-08-1719:36 saved by:2010-08-1721:35

 

修订历史

日期

人员

修订说明

2012-03-14

华磊

Created.

 

 

 

 

文档目录

dotNetFlexGrid-asp.net的异步表格控件 使用指南... 1

修订历史... 1

文档目录... 1

一、         简介... 1

二、         下载和配置... 1

1、            下载... 1

2、            配置在您的项目中... 2

三、         第一个Grid. 2

1、            标题2. 2

 

一、        简介

JQuery FlexiGrid的asp.net完美解决方案

dotNetFlexGrid是一款asp.net原生的异步表格控件，它的前身是Jquery FlexiGrid插件，我们重构了FlexiGrid的大部分Javascript代码，使其工作的更有效率，BUG更少；同时将其封装为asp.net 控件，提供了简单易用的使用方式。

dotNetFlexGrid作为一个轻量级的表格控件，同时提供了大量实用和高效的功能：

l  控件本身是全异步的工作模式，表格数据的刷新无需重新刷新整个页面。

l  我们提供了若干易用的客户端方法，让你的程序在添加、修改、删除表格数据时无需重新加载大量的表格数据，而仅需要更新客户端展现结果，这样使得程序的后台访问次数大大降低。

l  我们采用了类似AjaxPro的异步回调方式，使得您不必重新为异步请求单独开发页面，通过简单的数据提供函数，您能够在同一个页面中完成所有的表格异步操作。

l  dotNetFlexGrid提供了作为一个Grid应有的全部功能，包括表格排序、列拖动、首行的复选框、斑马色、快速查询、显示和隐藏列等等。

二、        下载和配置

1、  下载

您可以访问http://dotnetflexgrid.codeplex.com/ 下载控件的最新版本，包括最新的控件代码、演示项目和说明文档。

同时您可以访问http://www.cnblogs.com/hualei 获取控件的最新消息和使用指导，我们将为您提供最新的全中文的指导，同时我们欢迎您提供更好的建议和指正。

2、  配置在您的项目中

请检查您下载的文件中包含dotNetFlexGrid v1.1.rar（此处采用v1.1版进行演示），该压缩包包含dotNetFlexGrid的全部源码，请将压缩包中的所有文件解压缩到如dotNetFlexGridControl的目录（当然，您可以设定任意的文件夹名）。

根据您的项目情况，将dotNetFlexGridControl文件夹复制到您的asp.net站点目录的任意目录下，如果您使用的是Asp.net WebApplication，请在项目中至少包含如下文件：

l  dotNetFlexGridControl\dotNetFlexGrid.ascx

l  dotNetFlexGridControl\dotNetFlexGrid.ascx.cs

l  dotNetFlexGridControl\dotNetFlexGridAsyn.aspx

l  dotNetFlexGridControl\dotNetFlexGridAsyn.aspx.cs

请打开dotNetFlexGridControl\dotNetFlexGrid.ascx.cs文件，修改如下代码为您的项目中的控件路径。

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

   /// <summary>

   /// 配置点：根据控件的实际路径配置

   /// </summary>

   public stringControlCurrentPath

   {

       get

       {

            //TODO:ControlCurrentPath 配置点：根据控件的实际路径配置

            return"/dotNetFlexGridControl/";

       }

    }

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

同时，请在您的项目中引用Newtonsoft.Json.Net20.dll（该文件在Bin目录中提供）

一切完毕，现在您可以在您的项目中正式使用dotNetFlexGrid了。

Btw:似乎的确麻烦了点，现在dotNetFlexGrid是采用Asp.net用户控件的方式进行封装的，大多数的开发中测试均是使用的Asp.net网站项目；在发布的时候，我们考虑到易用性以及便于修改，故没有采用自定义控件的方式进行封装；不过，这样似乎对使用者更加有利。

三、        第一个Grid

好了，我们开始我们的第一个Gird，我们将实现演示项目中的FirstGrid.aspx的效果；这个例子展示一个模拟的用户列表。

首先，打开Visual Studio 2005/2008/2010；我们需要在页面中加入控件，将您的页面切换到设计视图（在源代码中复制粘贴也是不错的主意），从解决方案资源管理器找到控件目录下的dotNetFlexGrid.ascx，直接拖拽到页面上合适的位置，注意检查下你的控件ID（本例直接使用默认的“dotNetFlexGrid1”）。

其次，我们需要写一段代码初始化Grid，将如下代码复制到你的页面的Page_Load中。

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

this.dotNetFlexGrid1.InitConfig(

            newstring[]{

                "striped=true",//是否显示行交替色

                "selectedonclick=true",//是否点击行自动选中checkbox

                "usepager=true",//使用分页器

                "showcheckbox=true",//显示复选框

                "height=200",//高度，可为auto或具体px值

                "width=600"//宽度，可为auto或具体px值

            },

            newdotNetFlexGrid.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 = newdotNetFlexGrid.DataHandlerDelegate(DotNetFlexGrid1DataHandler); ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

dotNetFlexGrid1.InitConfig方法提供初始化表格主控参数、列配置的功能，例子中，我们设定表格宽600px，高200px，并绑定 “编号”“用户名”“地址”“创建时间”四个字段，自此，其实我们的Grid已经可以使用了，浏览该页面，我们看到了如下界面：

很简单，不是吗；我们看到了一个最简单的空表格，仔细看看，如此简单的表格其实拥有了如下强大的功能：

l  您可以点击其中一列将其拖放到合适的位置上（当然仅限表头）。

l  您可以将鼠标移动到列的分割线上，左右拖动来调整列宽。

l  你可以将鼠标移动到表头的列的分割线左边，点击出现的按钮来选择需要显示和隐藏的列。

l  您可以在表格的最左边和最下边拖动表格的大小。

l  在表头移动鼠标，你会发现字段排序的指示（虽然现在没用：-）后面我们将用到它）。

l  显示了内置的分页器和刷新按钮，当然，现在是无用的。

接下来，我们为表格填充数据，重新转到Page_Load中，我们增加一行，并在页面中增加一个提供数据的方法。

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

Page_Load中

this.dotNetFlexGrid1.DataHandler = newdotNetFlexGrid.DataHandlerDelegate(DotNetFlexGrid1DataHandler);  //提供数据的方法

新增方法

public dotNetFlexGrid.DataHandlerResult DotNetFlexGrid1DataHandler(dotNetFlexGrid.DataHandlerParamsp)

    {

        dotNetFlexGrid.DataHandlerResult result = new dotNetFlexGrid.DataHandlerResult();

        result.page = p.page;//设定当前返回的页号

        result.total = 100;//总计的数据条数，此处用100进行模拟

        result.table = dotNetFlexGrid.DemoMemoryTable(p.page * 100,p.rp);//调用演示的数据生成函数产生模拟数据

        returnresult;

    }

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

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.DataHandlerParamsp)

    {

        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();

        }

        returnresult;

}

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

好了，现在可以排序了，同时请原谅我又偷懒了，我们采用DataView.Sort功能模拟进行当前的数据集排序，实际上还是单页排序，但实际上，此处的数据处理逻辑是应该连接数据库执行实际的查询，排序是否应该交给数据库？的确，分页和排序是很普遍的问题，我们在dotNetFlexGrid的说明文档中同时提供了一个通用的分页、排序、查询的存储过程配套dotNetFlexGrid使用和参考，请大家自行下载。

最后，似乎还不够，一般我们的表格都会根据用户的条件更改查询结果，我们实现一个异步的查询效果。

我们在页面上增加一个id为”txtName”的文本框和id为”btnSubmit”的按钮以及一小段javascript，像下面这个样子。

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

    <script language="javascript">

        functiondoSearch() {

            vartxt = 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方法，让其支持查询。

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

    publicdotNetFlexGrid.DataHandlerResultDotNetFlexGrid1DataHandler(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();

        }

        returnresult;

}

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

我们通过p.extParam获取到Javascript送出的查询数据（注意之前的js代码中的赋值和刷新表格），然后进行查询并返回结果集；其实，我们通过这种方法，可以很简单的实现与其他各类控件的联动，甚至无数个dotNetFlexGrid。

Over，第一个例子到这里了，总结下：

l  我们需要直接将控件拖拽入页面。

l  在页面加载时调用InitConfig方法初始化Grid，我们在这里设置表格的宽、高、分页器等参数，同时设置表格需要展示的字段。

l  为Grid绑定一个类型为dotNetFlexGrid.DataHandlerDelegate的数据提供方法，我们在这个方法里响应Grid的动作并返回合适的结果。

l  我们还可以通过简单的js调用异步控制我们的表格，例子中演示了异步查询和刷新。

不知不觉，似乎写了很多，其实dotNetFlexGrid是非常易用的，3个简单的步骤即可完成一个完全异步的Grid，足以替换掉Asp.net自带的GridView了。

下一次，我们将演示快速查询的功能以及2个表格的联动功能，敬请期待。

BTW:本文的例子包含在整个演示项目中，不幸的是，演示项目的下载需要稍后提供，当然，看到此文的都是多年的ASP.NET老手，如此简单的例子，相信不会给大家带来过多的困惑。

dotNetFlexGrid dotNet表格控件说明文档

 

文档类别

技术文档

文档编号

T03-00001-YYMMDD

来源部门

技术部研发部门

应用范围

技术部

保密级别

★★★

修订历史记录

日期

版本

说明

作者

2010-8-2

1.0

Create

华磊

 

 

 

 

 

 

 

 

 

目    录

1、       目的..................................................................................................................................... 2

2、       版本历史.............................................................................................................................. 2

3、       简介..................................................................................................................................... 3

4、       服务端方法、属性................................................................................................................ 3

5、       客户端方法、事件................................................................................................................ 8

6、       快速开始............................................................................................................................ 11

7、       常用操作和问题说明........................................................................................................... 11

8、       已知BUG............................................................................................................................ 11

 

 

1、  目的

1.1         ；

2、  版本历史

2010-8-17 v1.1 稳定版

n         增加全客户端编辑模式，可在不加载任何数据的模式下进行表格数据的添加、删除、修改；通过该功能并结合服务端属性，即可完成将一或者多个动态表格包含在表单中整体提交；典型应用场景：进销存出入库单据、订单等。

n  调整客户端如下方法

getCellDatas，现在可以正确获取到客户端调整列顺序后的数据了，返回的数据总是以初始化时的列顺序为准，保证了前后逻辑的一致性。

updateRowData 新增方法，用于动态修改表格中的数据，提供的数据以初始化时的列顺序为准。

insertNewRow，调整提供的数据以初始化时的列顺序为准。

n  优化表格列手动调整顺序，可以让客户自己对表格的列顺序进行调整。

n  优化客户端呈现效率-调整多数行、列数据处理方式为字典模式，摒弃大部分原采用的根据dom结构操作数据的方法，提升了客户端的响应速度。

n  修复客户端新增行无法选中的BUG。

n  截止当前版本，与原生FlexiGrid和假正经哥哥的改进版本变化非常之大，基本核心代码进行过重构和改进，与上述控件已不存在兼容的可能。

2010-8-13 v1.0正式版

n         增加通用分页存储过程解决方案。

n         新增表格数据的字典模式处理，摒弃原rowbinddata的方式，提升了处理效率和DOM的简洁性，修改若干返回数据的方法应用字典模式。

n         原有的getSelectRows方法更名为getSelectedRowsIds，返回当前选择行的id数组；

n          新增方法getSelectedRows，返回当前选择行的数组，数组元素是列的字典；

2010-8-2v1.0beta

n  将样式表的加载改为JS动态加载。

n  采用类似于AJAX的反射模式调用数据提供函数，使得不必单独开发数据提供的页面或逻辑处理。

n  放弃原控件的Toolbar功能，我认为功能性操作应该与数据展示在表现形式和逻辑封装上分离开，比如操作权限控制应该有独立的逻辑处理。

n  新增若干客户端事件（单击行、双击行、选择行、加载等）。

n  新增服务端属性CheckedRows，整个控件可以作为表单的一部分提交，可在服务端直接获取当前选择的行的主键（ID）。

n  优化表格首行复选框的展示和处理，修复onrowchecked事件的若干BUG。

n  新增列参数checkField，第一个设为checkField的列通过绑定布尔值可以在加载数据时选择到需要被选择的行，该操作不会触发事件。

n  针对原有Javascript进行重新封装，提供单独的对象进行控件的处理。

n  修改数据提供模式固定为Json，本控件将只支持Json方式的异步数据提供。

n  修复多个控件存在时产生的若干BUG。

n  修复若干BUG，增加正则错误验证，各类数据null的验证。

 

3、  简介

致谢

       最初版本以Jquery Flexigrid(http://www.flexigrid.info/)为展现模型，并大量采用了国人假正经哥哥的改进版本）中的样式和大量代码。

功能特点

1、  原生dotNet WebForm用户控件（采用用户控件的主要原因是方便修改和二次开发，待版本稳定后将推出服务端控件版本）。

2、  采用类似于AjaxPro的异步模式，表格数据的绑定、刷新、排序、查询及表格操作（新增、修改、删除）均采用异步局部刷新模式，即数据的更改不会使得当前页面重新刷新。

3、  支持表格的列拖动调整展现顺序。

4、  支持表格的列排序功能。

5、  支持表格的标题功能。

6、  集成数据分页器，通过配置可让用户自行选择分页条数。

7、  支持列的显示隐藏，用户可自行选择显示和隐藏具体的列。

8、  支持首列复选框的展示。

9、  支持斑马色。

10、             集成快速查询的功能，可针对查询的输入进行正则验证。

11、             支持全客户端模式，结合表单提交和列的隐藏，实际可以将控件作为高级的listbox或listview，用作复杂二维数据的存储和提交（典型应用场景：进销存出入库单据、订单等）。

12、             支持若干客户端事件（行点击、双击、加载等）。

13、             支持异步的重新加载，通过此功能可实现与其他控件的客户端联动或者多个Grid的联动。

14、             其他Grid的若干标准功能，不再累述。

4、  服务端方法、属性

1          辅助类型

1.1         dotNetFlexGrid.ExtParamConfig

扩展的Post传递参数配置，用于InitConfig

1.2         dotNetFlexGrid.SerchParamConfigOperater

快速查询配置的查询操作定义，用于InitConfig

1.3         dotNetFlexGrid.SerchParamConfig

快速查询参数配置，用于InitConfig

1.4         dotNetFlexGrid.FieldConfigAlign

Grid字段配置的字段对齐配置，用于InitConfig

1.5         dotNetFlexGrid.FieldConfig

Grid字段配置，用于InitConfig

1.6         dotNetFlexGrid.DataHandlerResult

数据生成函数的返回结果

1.7         dotNetFlexGrid.DataHandlerParams

异步请求的参数信息

1.8         dotNetFlexGrid.delegate  DataHandlerDelegate

数据处理函数的委托定义

2          InitConfig初始化Grid配置方法

该方法为控件的核心方法(必须调用)，用于初始化Grid配置，函数定义：

---------------------------------------------------------------------------------------------------------------------

public void InitConfig(

        string[]gridparam,//表格主控参数，选填时将采用默认值

        FieldConfig[]fieldparam, //表格字段参数，不可选填

        SerchParamConfig[]serchParam, //快速查询参数，用于配置快速查询的项目和操作模式，选填时不显示快速查询

        ExtParamConfig[]postExtParam//附加的Post参数，用于额外的参数传递（用于DataHandler对应的方法）

        )

---------------------------------------------------------------------------------------------------------------------

Gridparam赋值（初始化时请将:更换为=），如

     this.DotNetFlexiGrid1.InitConfig(

            newstring[]{

                "title=标题",//标题

                "singleselected=false",//是否单选

         }

     )

---------------------------------------------------------------------------------------------------------------------

height: '240, //flexigrid插件的高度，单位为px，可设为auto

width: 'auto' //宽度值，单位为px，auto表示根据每列的宽度自动计算

striped: false //是否显示斑纹效果，默认是奇偶交互的形式

resizable: true //是否可调整表格打下

usepager: false //是否分页

nowrap: true //是否不换行

page: 1 //默认当前页

total: 1 //默认总页面数

useRp: true //是否可以动态设置每页显示的结果数

rp: 20 //每页默认的结果数

rpOptions: [10, 20, 30, 40, 50] //可选择设定的每页结果数

title: false //是否包含标题

query: '' //默认快速搜索查询的条件

qtype: '' //默认快速搜索查询的类别

qop: "Eq"//默认快速搜索的操作符

showcheckbox: false, //是否显示checkbox   

singleselected: true //是否单选

selectedonclick: true //点击行是否选中

sortname: ""

sortorder:"asc"

---------------------------------------------------------------------------------------------------------------------

3          DataHandler 异步处理的数据处理函数

核心属性，指定用作异步处理的数据处理函数，注意，此函数定义必须是public，并不能为static且必须在页面类中声明该函数。

函数定义

---------------------------------------------------------------------------------------------------------------------

public delegate DataHandlerResult DataHandlerDelegate(DataHandlerParams p);

---------------------------------------------------------------------------------------------------------------------

DataHandlerResult 类定义

---------------------------------------------------------------------------------------------------------------------

    publicclass DataHandlerResult

    {

        /// <summary>

        /// 返回的数据页号

        /// </summary>

        publicint page;

        /// <summary>

        /// 返回的总记录行数

        /// </summary>

        publicint total;

        /// <summary>

        /// 包含数据的DataTable

        /// </summary>

        publicDataTable table;

    }

---------------------------------------------------------------------------------------------------------------------

DataHandlerParams类定义

---------------------------------------------------------------------------------------------------------------------

    publicclass DataHandlerParams

    {

        /// <summary>

        /// 初始化时的默认查询条件

        /// </summary>

        publicDictionary<string,string> defaultSearch;

        /// <summary>

        /// 请求页，即为分页中需要到达的页

        /// </summary>

        publicint page;//请求页

        /// <summary>

        /// 需要返回的行数

        /// </summary>

        publicint rp;//行数

        /// <summary>

        /// 快速查询的操作符

        /// </summary>

        publicSerchParamConfigOperater qop;//查询操作符

        /// <summary>

        /// 快速查询的字段名

        /// </summary>

        publicstring qtype;

        /// <summary>

        /// 快速查询的字段值

        /// </summary>

        publicstring query;//搜索查询的条件

        /// <summary>

        /// 排序字段

        /// </summary>

        publicstring sortname;

        /// <summary>

        /// 排序方式,asc or desc

        /// </summary>

        publicstring sortorder;

        /// <summary>

        /// 附加的扩展参数，可以用作表单数据的传递

        /// </summary>

        publicDictionary<string,string> extParam;//扩展参数

    }

---------------------------------------------------------------------------------------------------------------------

调用范例

---------------------------------------------------------------------------------------------------------------------

Grid1.DataHandler= new dotNetFlexGrid.DataHandlerDelegate(DotNetFlexGrid1DataHandler);

public dotNetFlexGrid.DataHandlerResult DotNetFlexGrid1DataHandler(

dotNetFlexGrid.DataHandlerParamsp

)

{

      //p为传递的参数信息，你需要通过他组织你的查询和筛选逻辑

      //return为绑定在Grid中的数据

}

---------------------------------------------------------------------------------------------------------------------

4          ServerShow调用控件展示方法

该方法为控件的核心方法(必须调用)，用于服务器配置完毕，调用控件展示。

方法定义

---------------------------------------------------------------------------------------------------------------------

public void ServerShow()

{}

---------------------------------------------------------------------------------------------------------------------

5          EventOnClickFunc行单击事件的处理函数关联属性

该属性提供客户端的行单击事件的处理函数关联，属性给定的函数名决定客户端的单击事件调用的对应函数。

Javascript函数定义范例

---------------------------------------------------------------------------------------------------------------------

DotNetFlexiGrid_onClick = function(rowId){

        //alert(e);

};

---------------------------------------------------------------------------------------------------------------------

6          EventOnDbClickFunc行双击事件的处理函数关联属性

该属性提供客户端的行双击事件的处理函数关联，属性给定的函数名决定客户端的双击事件调用的对应函数。

Javascript函数定义范例

---------------------------------------------------------------------------------------------------------------------

DotNetFlexiGrid_onDbClick = function(rowId){

        alert(e);

};

---------------------------------------------------------------------------------------------------------------------

7          EventOnCheckedFunc行的复选框选择事件的处理函数关联属性

该属性提供客户端的行的复选框选择事件的处理函数关联，属性给定的函数名决定客户端的复选框选择事件调用的对应函数。

Javascript函数定义范例

---------------------------------------------------------------------------------------------------------------------

DotNetFlexiGrid_onChecked = function(rowId){

    alert("onChecked"+ e);

};

---------------------------------------------------------------------------------------------------------------------

8          EventOnUnCheckedFunc行复选框取消选择事件的处理函数关联属性

该属性提供客户端的行复选框取消选择事件的处理函数关联，属性给定的函数名决定客户端的行复选框取消选择事件调用的对应函数。

Javascript函数定义范例

---------------------------------------------------------------------------------------------------------------------

DotNetFlexiGrid_onUnChecked = function(e){

alert("onUnChecked"+ e);

};

---------------------------------------------------------------------------------------------------------------------

9          EventOnLoadFuncGrid加载成功事件的处理函数关联属性

该属性提供客户端的Grid加载成功事件的处理函数关联，属性给定的函数名决定客户端的Grid加载成功事件调用的对应函数。

Javascript函数定义范例

---------------------------------------------------------------------------------------------------------------------

    DotNetFlexiGrid_onLoad = function() {

        alert('onLoad');

};

---------------------------------------------------------------------------------------------------------------------

10      EventOnSelectedFunc属性

暂时不提供

11      DefaultSearch 定Grid的默认查询参数

可选参数，用作指定Grid的默认查询参数，DataHandler中可以接收到此参数用作默认（如主表单的筛选逻辑）的查询参数。

该属性为一个数组，可以增加任意名值对行的数据。

使用范例

---------------------------------------------------------------------------------------------------------------------

页面初始化时调用

this.dotNetFlexGrid1.DefaultSearch.Add("默认查询条件","中文的值");

DataHandler方法的处理

public dotNetFlexGrid.DataHandlerResult DotNetFlexGrid1DataHandler(

dotNetFlexGrid.DataHandlerParamsp

)

{

     …//获取数据的方法，产生了result.table中的数据

if (p.defaultSearch.ContainsKey("默认查询条件"))

{

         //此处使用DataView的过滤功能进行模拟查询

          DataViewdv = result.table.DefaultView;

          dv.RowFilter = "默认查询条件Like '%" + p.defaultSearch["默认查询条件"] + "%'";

          result.table =dv.ToTable();

}

     …//后续操作

};

---------------------------------------------------------------------------------------------------------------------

12      CheckedRows 表格选定值属性

该属性用于PostBack时的当前表格选定值的处理，该属性只读，并返回一个主键（主键根据DataHandler方法中table的主键决定）数组。

使用范例

---------------------------------------------------------------------------------------------------------------------

        if(IsPostBack)

        {

            this.ListBox1.Items.Clear();

            foreach(string s indotNetFlexGrid1.CheckedRows)

                this.ListBox1.Items.Add(s);

        }

---------------------------------------------------------------------------------------------------------------------

5、  客户端方法、事件

控件提供封装好的的Grid操作对象，当前页的Dom 对象名为控件ID，即为如下示中的ID="dotNetFlexGrid1"，即为dotNetFlexGrid1。

<uc1:dotNetFlexGrid ID="dotNetFlexGrid1" runat="server" />

1    getSelectedRows()获取当前选中行的字典数组

使用范例

---------------------------------------------------------------------------------------------------------------------

获取第一行的代码

vardic=dotNetFlexGrid1.getSelectedRows();

if(dic&&dic.length>0)

alert("第一行数据InfoId="+dic[0].item("InfoId")+";");

遍历演示

    function getRows()

    {

       var dic=dotNetFlexGrid1.getSelectedRows();

       alert("选择了"+dic.length+"行");

       $(dic).each(function(){

           var row=this;

           var text='';

           text+="id:"+this.item("id")+"\r\n";

           $(this.keys()).each(function(){

               text+=this+"="+row.item(this)+"\r\n";

           });

           alert(text);

           

       });

       alert("第一行数据InfoId="+dic[0].item("InfoId")+";");

    }

---------------------------------------------------------------------------------------------------------------------

2          getSelectedRowsIds()获取当前选中行的主键

使用范例

---------------------------------------------------------------------------------------------------------------------

        varrows = DotNetFlexiGrid1.getSelectedRowsIds();

        for(var i = 0; i < rows.length; i++) {

            alert(rows[i]);

        }

---------------------------------------------------------------------------------------------------------------------

3          reflashData()重新加载Grid

---------------------------------------------------------------------------------------------------------------------

DotNetFlexiGrid1.reflashData();

---------------------------------------------------------------------------------------------------------------------

4          deleteRows()删除指定主键的行

---------------------------------------------------------------------------------------------------------------------

DotNetFlexiGrid1.deleteRows(DotNetFlexiGrid1.getSelectedRowsIds());

---------------------------------------------------------------------------------------------------------------------

5          getCellDatas()获取指定行的表格数据(按表格当的排序，不依赖数据排序)

---------------------------------------------------------------------------------------------------------------------

       //演示获取第一行的全部数据（包括被隐藏的列）

        varid = DotNetFlexiGrid1.getSelectedRowsIds()[0];

        if(id) {

            vararray = DotNetFlexiGrid1.getCellDatas(id);

            if(array) {

                for (var i = 0; i< array.length; i++) {

                    alert(array[i]);

                }

            }

       }                                                         

---------------------------------------------------------------------------------------------------------------------

6          applyQueryReload()应用新的ExtParam重新加载Grid

---------------------------------------------------------------------------------------------------------------------

//演示模拟的双表格联动

    functionGrid1Onclick(id) {

        //传递给Grid2一个查询选项数组并让其刷新

        varp = [

            { name: "MasterTableId", value:dotNetFlexGrid1.getCellDatas(id)[5] },

            { name: "用于测试的", value: "测试的值" + id }

        ];

       dotNetFlexGrid2.applyQueryReload(p);

}

---------------------------------------------------------------------------------------------------------------------

7          insertNewRow ()根据传递参数插入新行

---------------------------------------------------------------------------------------------------------------------

    functionInsertNewRows() {

       DotNetFlexiGrid1.insertNewRow({

            id: 'newid', //行的ID，后台绑定的是主键

            cell: [

            "列1",

            "列2",

            "列3",

            "列4",

            "列5",

            '列6',

            '列7'

            ]

        });

   }

---------------------------------------------------------------------------------------------------------------------

 

8          updateRowData()根据传递参数更改指定的行的数据

---------------------------------------------------------------------------------------------------------------------

    functionEditRows() {

         varid = dotNetFlexGrid1.getSelectedRowsIds()[0];

         if(id) {

            dotNetFlexGrid1.updateRowData({

                 id: id,

                 cell: [

                    "edt_guid" + Math.round(Math.random() *10000),

                    "e_f1",

                    "e_f2",

                    "e_f3",

                    "e_f4",

                    'e_f5',

                    'e_f6',

                    'e_f7'

                    ]

             });

         }

    }

---------------------------------------------------------------------------------------------------------------------

6、  快速开始

7、  常用操作和问题说明

1          什么是行的主键（ID）

dotNetFlexGrid实际在页面中展示标准的HTML TABLE,其中，Table Row将分配一个唯一的ID，该ID取值为DataHandler方法返回的表格中第一个为PrimaryKey的列对应的数据，如果表格中没有有效的PrimaryKey，则取第一个数据列的值作为Table Row ID。

Table Row ID用于dotNetFlexGrid大多数的行的操作，如客户端getSelectedRowsIds方法即返回Table Row ID的数组，服务端CheckedRows属性也是返回此类数组。

2          强调DataHandler函数

DataHandler采用的异步调用的方式，实际是针对当前页重新实例化了一个新的对象，故DataHandler指定的方法务必需要在当前页中声明，并且该方法必须是public的。

DataHandler中无论如何不要访问Page中的任何数据或控件值，这是没有意义的，如果需要传参，请使用DefaultSearch或初始化时的ExtParam进行参数传递。

再次强调，同Ajax一样，表格获取数据的请求是完全异步的，页面本身的处理逻辑和数据请求是2次不同的请求，他们之间没有上下文的关系。

8、  已知BUG