Question

我一直在评估一些JQuery表插件来处理我的分页和排序需求。我正在寻找允许通过AJAX调用对页面进行分页和排序的东西。

我遇到的问题是我发现的所有插件都希望Ajax调用返回JSON。这对于简单的场景来说是完美的，但是当我想要将复杂的格式应用到我的表时，只要我希望我的表包含链接或图标或其他复杂的渲染，我就会面对重现生成这些链接或选择的服务器端代码适当的图标作为客户端代码来做同样的事情。

我想要做的是将新表数据作为html表返回，并让插件用返回的表替换现有表（直接或通过复制单元格，具体情况并不重要）。对于最好的方法，是否有任何建议？

Answer 1

看看http://www.datatables.net/我认为这将满足您的需求：）

也很好！

关于格式化通过JSON我正在做这个非常幸运...只是确保你编码任何有趣的字符，它应该没问题。

Answer 2

此后我发现ingrid并将其作为潜在的解决方案抛出。虽然外观看起来很重，但似乎做了我想做的事。我会看到这个答案是如何投票的。

Answer 3

尝试这个，它来自YUI，而不是JQuery，但我认为它将完全符合你的需要

http://developer.yahoo.com/yui/examples/datatable/dt_dynamicdata.html

Answer 4

对于jQuery，几个网格可以就地修改html表。我使用过的两个是flexigrid和jqgrid。

如果你这样做，你可以使用ajax调用（如果需要）注入html表，然后在生成的html表上应用flexigrid（）或jqgrid（）。

Answer 5

我认为您最好的选择是创建一个控制器操作，该操作返回包含您的表的局部视图。局部视图可以包含您想要的任何基于JavaScript的表/网格。该解决方案对任何特定的网格/表实现都没有任何依赖性。

例如，假设您有一个类型为 ViewUserControl＆lt; IEnumerable＆lt; Foo＆gt;＆gt; 的强类型部分视图，名为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创建一个链接，该链接将为控制器中的List操作生成AJAX GET请求。此外，通过在AjaxOptions对象中定义 LoadingElementId 属性，我们告诉助手我们要替换＆lt; div id =“FooList”＆gt; 的内部内容与AJAX请求的结果。

当用户单击该链接时，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>

是否有一个JQuery表插件支持HTML表作为AJAX数据源

5 个答案: