Question

我正在向Kendo dataSource添加和删除数据。我希望将它保存为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);

Answer 1

将您的DataSource定义为：

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。在您的情况下，因为它是浏览器本身，您不需要只返回原始数据。

使用jStorage保存Kendo数据源

1 个答案: