具有延迟加载可折叠面板数据的ASP.NET GridView
在vb.net asp.net webforms项目中，我需要将记录列表加载到网格视图中&一旦用户单击中的某一行，就需要在该行下方展开一个面板，其中显示记录的详细信息。在那里，我只需要在选择记录时加载记录的详细信息。实现这一目标的最好方法是什么？我是否可以将jQuery可折叠面板插件与网格视图一起使用，并仅在选中行时加载数据？或者我应该使用ajax CollapsiblePanel？
回答 2
Stack Overflow用户
发布于 2013-02-11 11:35:30
你的问题缺乏细节，答案取决于每行可能显示的“细节”的构成。
但是，我将执行以下操作，利用带有asp.net ajax处理程序的jquery来获取数据(按需)并将其注入到新的网格视图行中。
在导致行进入“选定”模式的click事件发生时，我将触发一个jquery函数。
此jquery函数将触发对GrabRowDetails.aspx的ajax访问。
GrabRowDetails.aspx将接受查询字符串中的输入。
基于此输入，它将查询数据库。
最终，GrowRowDetails.aspx必须将相关数据打包到JSON中，并将其呈现回客户端。
Response.ContentType = "application/json"
Response.Write(SB.ToString()) 'emits the JSON最后，ajax-success处理程序将负责创建一个新的表行，并将相关数据塞到新行中。
它如何知道将新行放在哪里？顶部提到的click处理程序应该传递一个对触发click事件的控件的引用。
使用此引用，您可以使用nearest函数。this.nearest("tr").after(..new_row_with_max_colspan_cell..)。
after函数将在所选元素之后插入一个元素。因此，您只需要插入一个新的TR，其中包含一个具有最大colspan的TD。然后，你就可以在那个区域内工作了。
当涉及到这样的事情时，我更幸运地使用原始的jquery而不是ASP.NET控件。
备注
在处理ajax请求方面，
- An .ashx比.aspx更高效，但是我遇到了一些http处理程序的调试问题。因此，我使用了一个成熟的.aspx。如果速度是个问题，我肯定会使用ashx。
- 你的jquery函数也应该删除之前打开的所有细节行。这可以通过在详细信息行上设置一个特定的css类来完成，比如
details，然后使用remove函数来删除任何持久的详细信息行。
Stack Overflow用户
发布于 2013-02-11 19:02:31
如果你想使用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()
})https://stackoverflow.com/questions/8062189
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号