是否有支持HTML表格作爲AJAX數據源的JQuery表格插件

我一直在評估一些JQuery表格插件來處理我的分頁和排序需求。我正在尋找的東西，允許頁面和AJAX調用我的表排序。是否有支持HTML表格作爲AJAX數據源的JQuery表格插件

我遇到的問題是我所發現的所有插件都希望Ajax調用返回JSON。這對於簡單的場景來說是完美的，但是當我想要將複雜的格式應用到我的表格時，只要我希望我的表格包含鏈接或圖標或其他複雜渲染，我就需要重現生成這些鏈接或選擇的服務器端代碼適當的圖標作爲客戶端代碼來做同樣的事情。

我想要做的是將新表格數據作爲html表格返回，並讓插件用返回的表格替換現有的表格（直接或通過複製單元格，具體細節並不重要）。有沒有最好的方法來做到這一點reccomendations？

來源

2009-08-24 Jack Ryan

插件如何知道頁面有多少行，除非它在json/xml結果對象中指定？ – redsquare 2009-08-24 11:43:22

我知道它不是jquery，但YUI提供了EXACTLy以便您尋找。使用格式化程序和所有設置的數據表。我已經使用他們的表格進行內聯自動完成編輯。 – Zoidberg 2009-08-24 11:45:08

這可以作爲參數傳遞。任何使用AJAX進行分頁的解決方案都會遇到這個問題。無論數據是以JSON，CSV，HTML還是任何其他格式返回。 – 2009-08-24 11:48:18

我認爲你最好的選擇是創建一個控制器動作，返回一個包含你的表的局部視圖。部分視圖可以包含任何您想要的基於JavaScript的表/網格。該解決方案完全不依賴任何特定的網格/表格實現。

舉例來說，假設你有類型的強類型的局部視圖ViewUserControl < IEnumerable的<富> >命名FooList.ascx

你可以這樣定義你的控制器部分的行動，令此部分

// For paging support, you would probably need to modify this action to accept 
// a parameter that could be used to tell which records to retrieve. 
// This would also require the appropriate route. However, this is beyond 
// the scope of this example. 
public PartialViewResult List() 
{ 
    // get the collection of stuff that you want to display 
    var items = this.itemRepository.GetItems(); 

    // return the partial 
    return PartialView("FooList", items); 
}

在你的看法中，這部分將被使用，你會想要有如下的東西...

<!-- this <div> will contain the partial, which we will be able to update via AJAX --> 
<div id="FooList"> 
    <%-- this assumes a collection of "items" is available in Model.Items --%> 
    <% Html.RenderPartial("FooList", Model.Items); %> 
</div> 

<!-- use an AJAX ActionLink to update the table --> 
<%= 
    Ajax.ActionLink 
    (
     "Click Me to Update the Table using AJAX!", 
     "List", 
     new AjaxOptions() 
     { 
      HttpMethod = "GET", 
      LoadingElementId = "FooList" 
     } 
    ) 
%>

所有我們在這裏所做的是使用ASP.NET MVC AJAX Helper創建一個鏈接，這將產生一個AJAX GET請求在您的控制器列表動作。另外，通過在AjaxOptions對象中定義屬性，我們告訴幫助者我們要用AJAX請求的結果替換內部內容< div id =「FooList」>。

當用戶單擊該鏈接時，AJAX請求將導致您的List操作被調用。您的列表操作只是返回部分視圖FooList.ascx的渲染內容。 id爲「FooList」的div的現有內容將被從AJAX請求中檢索到的內容替換。在上面的例子中，控制器動作總是會選擇相同的數據，這並不是你想要的。在實際情況下，您必須修改控制器操作才能爲您的局部視圖檢索適當的數據。我無法提供一種有效的方式讓您在不知道實施細節的情況下處理這些問題。

如果您不想使用鏈接，那麼只需查看由Ajax.ActionLink助手生成的HTML和JavaScript，並根據自己的需要進行調整即可。例如，構建您自己的自定義幫助器，或者手動編寫JavaScript。

最後，不要忘記包含MVC AJAX JavaScript源文件。我建議將它們包含在您的母版頁中。例如：

<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script> 
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>

來源

2009-09-24 07:31:45