jquery - 具有延迟加载可折叠面板数据的 ASP.NET GridView

Question

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

Answer 1

您的问题缺乏细节，答案完全取决于每行可能显示的“详细信息”的构成。

但是，我会执行以下操作，利用 jquery 和 asp.net ajax 处理程序来获取数据(按需)并将其注入(inject)到新的 gridview 行中。

当点击事件导致您的行进入“选定”模式时，我将触发 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函数将在所选元素之后插入一个元素。因此，您只需插入一个新的 TR，其中包含一个具有最大 colspan 的 TD。然后，您可以在该区域内工作。

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

注释

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