如何将 Kendo Grid 数据源更新为远程 url，但不触发 ajax 调用？答案

【问题标题】：How to update a Kendo Grid dataSource to a remote url, but without triggering an ajax call?如何将 Kendo Grid 数据源更新为远程 url，但不触发 ajax 调用？
【发布时间】：2014-03-25 14:26:22
【问题描述】：

看看我的fiddle here

不幸的是，Kendo Grid 似乎没有为良好的 SEO 提供本地解决方案 (see here)。但我想我会试一试，看看有什么我能做的。这是我目前所拥有的：

为了使用 Kendo Grid 实现适当的渐进增强方法，我有 3 个部分：

用于 SEO 目的的预先存在的 HTML 表（参见小提琴的 html 部分）
来自 HTML 表的相同数据，但为 JSON（参见小提琴的 js 部分顶部）。这样 Kendo 将显示正确的页面和总页面（如果我只是让它单独转换 HTML 网格，它不会这样做！！）。
所有后续调用都将通过 ajax 处理。（请参阅小提琴中网格输出上方的“渐进式增强我”按钮）

为了保持一切整洁，我有一个生成 HTML 表和 JSON 的服务器端脚本。我只是将我的服务器端变量插入到我的视图（页面）中，一切都很好地结合在一起。

但是我还有一个问题。我需要将 dataSource 更新为远程 url，正如您按下“Progressive Enhance Me！”时所展示的那样。按钮。按下按钮时，会进行不必要的 ajax 调用。在实际应用程序中，这种不必要的初始 ajax 调用可能代价高昂，其中冗余的服务器端数据库查询会减慢页面速度。 有什么方法可以在不进行 ajax 调用的情况下更新数据源？

（我也乐于接受有关使用 Kendo Grid 实现渐进增强的任何更好方法的建议）。

myData = { 
            // some json here...see fiddle 
         };

$("#grid").kendoGrid({
    dataSource: {
        data : myData,
        dataType: "json",
        pageSize:5,
        serverPaging: true,
        serverSorting: true,        
        schema: {
            data: "results",
            total: function (data) {
                return data.__count;       
            }
        }
    },
    height: 250,
    filterable: true,
    sortable: true,
    pageable: true,
    columns: [
        {
            field:"OrderID",
            filterable: false,
            width: 75
        },
        {
            field:"Freight",
            filterable: false,
            width: 75
        },
        {
            field: "OrderDate",
            title: "Order Date",
            width: 120,
            format: "{0:MM/dd/yyyy}"
        }, 
        {
            field: "ShipName",
            title: "Ship Name",
            width: 260
        },
        {
            field: "ShipCity",
            title: "Ship City",
            width: 150
        }
    ]
});

// Button should NOT make an ajax call...I just want to update the dataSource
$("#progress-enhance-me").click(function(){                           
    var grid = $("#grid").data("kendoGrid");
    var newDataSource =  new kendo.data.DataSource({
        type: "odata",
        transport: {
            read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
        },
        schema: {
            model: {
                fields: {
                    OrderID: { type: "number" },
                    Freight: { type: "number" },
                    OrderDate: { type: "date" },
                    ShipName: { type: "string" },
                    ShipCity: { type: "string" }
                }
            }
        },
        page: 1,
        pageSize: 5,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true
    });
    grid.setDataSource(newDataSource);  
});

编辑： 我尝试了另一种方法，使用requestStart 调用。请参阅 fiddle here。但是我认为这不会起作用，因为我没有办法将最后一次点击（页码点击或排序标题点击等）传输到新数据源。

【问题讨论】：

标签： jquery ajax kendo-ui kendo-grid progressive-enhancement

【解决方案1】：

由于我需要网格对 SEO 友好，因此我最终使用 jqgrid 成功实现了渐进式增强。在这里查看我的答案：Jqgrid & progressive enhancement: Successfully progresses from HTML, to local JSON, to remote JSON, but pager doesn't start correctly?

我还可以使用 this 将其设置为与 Bootstrap 3 一起使用。

更新：
我现在实际上正在使用它的分叉版本：https://github.com/wenzhixin/bootstrap-table
Jqgrid 体积太大，在移动设备上播放速度不快。

【讨论】：