Question

在vb.net asp.net webforms项目中，我需要将一个记录列表加载到gridview＆amp;一旦用户点击了一行，就需要展开一个面板，该面板显示该行记录的详细信息。我需要在选择记录时加载记录的详细信息。实现这一目标的最佳方法是什么？我可以将jQuery可折叠面板插件与gridview一起使用，并仅在选择行时加载数据吗？或者我应该使用ajax CollapsiblePanel？

Answer 1

你的问题是缺乏细节，答案取决于＆＃34;详细信息和＃34;可能会显示每行。

但是，我会使用jquery和asp.net ajax处理程序来获取数据（按需）并将其注入新的gridview行。

点击事件导致您的行进入＆＃34;已选择＆＃34;模式，我会启动一个jquery函数。

这个jquery函数会触发对GrabRowDetails.aspx的ajax命中。

GrabRowDetails.aspx会在查询字符串中输入。

根据此输入，它将查询数据库。

最终，GrowRowDetails.aspx必须将相关数据打包成JSON，然后将其呈现给客户端。

Response.ContentType = "application/json"
Response.Write(SB.ToString()) 'emits the JSON

最后，你的ajax-success处理程序将负责创建一个新的表行并将相关数据插入到新行中。

如何知道新行的位置？顶部提到的点击处理程序应该传递对控件触发点击事件的引用。

使用此参考，您可以使用nearest功能。 this.nearest("tr").after(..new_row_with_max_colspan_cell..)。

after函数将在所选元素后面插入一个元素。因此，您只需要插入一个具有最大colspan的单个TD的新TR。然后，您可以在该区域内工作。

当谈到这样的事情时，我更幸运使用原始jquery而不是ASP.NET控件。

注释

.ashx在处理ajax请求方面比.aspx更高效，但是我遇到了一些使用http处理程序的调试问题。所以，我使用了一个完整的.aspx。如果速度是个问题，我肯定会使用ashx。
您的jquery函数还应删除以前打开的所有详细信息行。这可以通过在详细信息行（例如details）上设置特定的css类，然后使用remove函数来删除任何持久性详细信息行来完成。

Answer 2

如果要使用gridview，则需要使用单个项目模板来绑定所有字段，并且可以为要折叠和展开的任何字段指定正确的类名。然后你可以使用slideToggle函数来显示/隐藏包含所选记录细节的下一个元素。请查看以下示例。

 <asp:GridView ID="GridView1"
 runat="server" AutoGenerateColumns="False" dataSourceID="ObjectDataSource1"> 
 <Columns>

<asp:TemplateField HeaderText="columname" >

<ItemTemplate>
    <asp:Label ID="Label1" runat="server" cssclass="expand"
        Text='<%# Bind("fieldname") %>'></asp:Label>
 <div class="details">
 your detail binding
 </div>
</ItemTemplate>
</asp:TemplateField>
</Columns> 
</asp:GridView>

--------------- jquery崩溃/扩展---------------

$(".expand").click(function () {
        if ($(this).attr("class") == "collapse") {
            $(this).attr("class", "expand")
        }
        else {
            $(this).attr("class", "collapse")
        }
        $(this).next(".details").slideToggle();

    })

    $(".collapse").click(function () {
        if ($(this).attr("class") == "collapse") {
            $(this).attr("class", "expand")
        }
        else {
            $(this).attr("class", "collapse")
        }

        $(this).next(".details").slideToggle()

    })

ASP.NET GridView延迟加载可折叠面板数据

2 个答案: