使用 jStorage 保存 Kendo 数据源答案

【问题标题】：Saving a Kendo datasource using jStorage使用 jStorage 保存 Kendo 数据源
【发布时间】：2013-08-08 09:34:06
【问题描述】：

我正在向 Kendo 数据源添加和删除数据。我希望将它保存在 localStorage，并能够从 localStorage 中再次读取它。

这里我尝试使用 jStorage 来保存和加载数据。

它是如何加载的：

if ($.jStorage.get('favoritter') != null) {
    var datakilde_favoritter = $.jStorage.get('favoritter');
} else {
    var data = [
        {id: 5, name: "LINK ONE", url: "http://www.linkone.com" }
    ];
    var datakilde_favoritter = new kendo.data.DataSource({
        data: data,
        sort: { field: "name", dir: "asc" }
    });
}

如何保存：

$.jStorage.set('favoritter', datakilde_favoritter);

【问题讨论】：

标签： kendo-ui kendo-mobile jstorage

【解决方案1】：

将您的数据源定义为：

var ds = new kendo.data.DataSource({
    transport: {
        read   : function (op) {
            var data = $.jStorage.get('favoritter');
            if (!data) {
                data = [
                    {id: 5, name: "LINK ONE", url: "http://www.linkone.com" }
                ];
            }
            op.success(data);
        },
        update : function (op) {
            $.jStorage.set("favoritter", ds.data());
            op.success(op.data);
        },
        destroy: function (op) {
            console.log("destroy", ds.data());
            $.jStorage.set("favoritter", ds.data());
            op.success(op.data);
        },
        create : function (op) {
            $.jStorage.set("favoritter", ds.data());
            op.success(op.data);
        }
    },
    sort     : { field: "name", dir: "asc" },
    pageSize : 10,
    schema   : {
        model: {
            id    : "id",
            fields: {
                id  : { type: 'number' },
                name: { type: 'string' }
            }
        }
    }
});

如果不需要，您可以考虑删除 create 和 destroy。

你的网格会是这样的：

var grid = $("#grid").kendoGrid({
    dataSource: ds,
    editable  : "popup",
    pageable  : true,
    toolbar   : ["create"],
    columns   : [
        { command: ["edit", "destroy"], width: 100 },
        { field: "id", width: 90, title: "#" },
        { field: "name", width: 90, title: "URL Name" }
    ]
}).data("kendoGrid");

基本上在更新时，您需要使用从服务器返回的数据调用op.success。在你的情况下，因为它是浏览器本身，你不需要只返回原始数据。

【讨论】：