Ext.Net 1.2.0_Ext.Net.GridPanel 实现多级Grid

实现多级 Grid 在 Ext.Net Demo 里有，本文旨在进一步说明它的实现，以及在此基础上，说明如何在多级Grid上，进行增删改等操作。

本文内容

多级 Grid 概述
实现多级 Grid

多级 Grid 概述

有这样一个实现：Grid 数据的某行下，也包含数据，单击或双击时，需要展开。默认情况，Grid 只显示第一级，当点击某行记录最前边的“+”，或双击某行记录时，展开与该记录相关的数据。对于数据库来说，最一般的是——自连表。

在暂不考虑数据分页的前提下，问问自己：

首先，假设我们处于 Ajax 时代之前，没有任何三方组件可以提供这个功能，你对 JavaScript 只有一定的了解，但是对 C# 或是 Java 很熟练，那么若想实现这个功能你能想到什么？
其次，假设我们处于 Ajax 时代之前，没有任何三方组件可以提供这个功能，但你已经对 JSON 和 JavaScript 都很熟悉，那么若想实现这个功能你能想到什么？
最后，假设我们已经处于 Ajax 时代，没有现成的三方组件可以很好地提供这个功能，但是你对 JSON 和 jQuery 很熟悉，那么若想实现这个功能你能想到什么？

对于第一个假设，因为没有异步、没有局部刷新，我们只能将数据全部从数据库读出来，因为你对JavaScript 还不甚了解，所以只能利用 C# 或 JavaScrit 在服务器端创建嵌套的 <div> 或是 <table>（这需要一个相对复杂的逻辑），还要为 Grid 的展开创建客户端代码，绝大多数操作都在服务器端——这个实现绝不简单。要命的是，效率实在太低，暂且不说它完全需要回发，用户体验也差到极致。

对于第二个假设，没有异步、没有局部刷新，更没有现成三方组件可用，但是你已对 JSON 和 JavaScrit 有很好的了解，此时，你能想到的，也许是，从服务器端把数据全部读出来，因为数据库表本身就是自连表（比如，有 ID，有 PARENTID），无需进行复杂的业务处理，只需要将数据转换成 JSON 格式，剩下的工作，完全在客户端完成（利用 JavaScript 解析 JSON）——这个也不大容易。但至少比第一个强，客户端完成绝大多数操作。

对于第三个假设，有异步、有局部刷新，更关键的是你对 JSON 和 jQuery 都很熟悉，那完全可以从数据库先获得第一级的数据，当用户单击或双击时，利用 jQuery，发出 Ajax 请求，从数据库获得指定记录下的相关数据，然后在回调成功时，添加到指定记录下……——这个思路不仅清晰，而且实现相对简单，用户体验也好，都是局部刷新，效率也高。

其实，说了这么多，仅仅是锻炼你的思维。因为现在很多三方组件都提供这个功能。如果你能体会人家的设计思想，以及实现一个功能时的思路，使用三方组件其实很容易，虽然看上去很复杂。

实现多级 Grid

首先看看，客户端代码都有什么，如下所示：

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />

    <script type="text/javascript">>


     


    </head>


    <body>


        <form id="form1" runat="server">


        <ext:ResourceManager ID="ResourceManager1" runat="server" />


        <ext:Toolbar ID="Toolbar1" runat="server">


            <Items>


                <ext:Toolbar ID="Toolbar2" runat="server">


                    <Items>


                        <ext:Button ID="Button1" runat="server" Text="添加">


                            <Listeners>


                                <Click Handler="setAction('add',#{Params});" />


                            </Listeners>


                            <DirectEvents>


                                <Click OnEvent="btn_action_Click">


                                    <ExtraParams>


                                        <ext:Parameter Name="action" Value="Ext.decode(#{Params}.getValue()).action" Mode="Raw">


                                        </ext:Parameter>


                                        <ext:Parameter Name="id" Value="Ext.decode(#{Params}.getValue()).ui.id" Mode="Raw">


                                        </ext:Parameter>


                                    </ExtraParams>


                                </Click>


                            </DirectEvents>


                        </ext:Button>


                        <ext:Button ID="Button2" runat="server" Text="修改">


                            <Listeners>


                                <Click Handler="setAction('edit',#{Params});" />


                            </Listeners>


                            <DirectEvents>


                                <Click OnEvent="btn_action_Click">


                                    <ExtraParams>


                                        <ext:Parameter Name="action" Value="Ext.decode(#{Params}.getValue()).action" Mode="Raw">


                                        </ext:Parameter>


                                        <ext:Parameter Name="id" Value="Ext.decode(#{Params}.getValue()).ui.id" Mode="Raw">


                                        </ext:Parameter>


                                    </ExtraParams>


                                </Click>


                            </DirectEvents>


                        </ext:Button>


                        <ext:Button ID="Button3" runat="server" Text="删除">


                            <Listeners>


                                <Click Handler="setAction('del',#{Params});" />


                            </Listeners>


                            <DirectEvents>


                                <Click OnEvent="btn_action_Click">


                                    <ExtraParams>


                                        <ext:Parameter Name="action" Value="Ext.decode(#{Params}.getValue()).action" Mode="Raw">


                                        </ext:Parameter>


                                        <ext:Parameter Name="id" Value="Ext.decode(#{Params}.getValue()).ui.id" Mode="Raw">


                                        </ext:Parameter>


                                    </ExtraParams>


                                </Click>


                            </DirectEvents>


                        </ext:Button>


                    </Items>


                </ext:Toolbar>


            </Items>


        </ext:Toolbar>


        <ext:Hidden ID="Params" runat="server" Text="">


        </ext:Hidden>


        </form>


    </body>


    </html>