ASP.NET GridView與延遲加載可摺疊面板數據

在一個vb.net asp.net webforms項目我需要加載一個記錄列表到一個gridview &一旦用戶點擊一行需要展開一個面板在行下方顯示記錄的詳細信息。我只需要在選擇記錄時加載記錄的詳細信息。達到此目的的最佳方法是什麼？我可以在gridview中使用jQuery可摺疊面板插件嗎？只有在選擇了行時才能加載數據？或者我應該使用ajax CollapsiblePanel？ASP.NET GridView與延遲加載可摺疊面板數據

來源

2011-11-09 Nalaka526

您的問題缺乏細節，答案取決於每行可能顯示的「細節」的構成。

但是，我會做以下事情，利用jQuery與asp.net ajax處理程序抓取數據（按需）並將其注入到新的gridview行。

一旦點擊事件，導致您的行進入「選定」模式，我會引發jquery函數。

這個jquery函數會觸發一個到GrabRowDetails.aspx的ajax命中。

GrabRowDetails.aspx將在查詢字符串中輸入。

基於此輸入，它將查詢數據庫。

最終，GrowRowDetails.aspx必須將相關數據打包到JSON中，然後將其呈現回客戶端。

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

最後，您的ajax-成功處理程序將負責創建新的表格行並將相關數據干擾到新行中。

它將如何知道將新行放在哪裏？上面提到的點擊處理程序應該傳遞引發點擊事件的控件引用。

使用此參考，您可以使用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函數還應該刪除以前打開的任何細節行。這可以通過在詳細信息行上設置特定的css類（如details），然後使用remove函數來清除任何持續的詳細信息行來完成。

來源

2013-02-11 03:35:30

如果你想要使用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() 

    })

來源

2013-02-11 11:02:31 Ravi

ASP.NET GridView與延遲加載可摺疊面板數據

回答

相關問題