从本地存储中检索数据并在制表器中显示

时间:2017-12-22 03:50:04

标签: javascript json local-storage tabulator

我创建了一个javascript函数来将我的数据存储在本地存储中。代码如下所示

 function SaveToLocalTakenReturn(no) {
    var MemberName = $("#txtMember" + no).val();
    var StaffName = $("#txtStaff" + no).val();
    var ChildFormType = $("#ddlChildFormType" + no).val();
    var Amount = $("#txtAmount" + no).val();
    var storedItems = [];
    var item = [{ MemberName }, { StaffName }, { ChildFormType }, { Amount }];
    if (localStorage['LocalTakenReturn'])
        storedItems = JSON.parse(localStorage['LocalTakenReturn']);
    storedItems.push(item);
    localStorage['LocalTakenReturn'] = JSON.stringify(storedItems);
}

此成功将数据存储在本地存储中,这是我本地存储的结果:

[[{"MemberName":"cktest5"},{"StaffName":"default"},{"ChildFormType":"RETURN"},{"Amount":"60"}],[{"MemberName":"cktest5"},{"StaffName":"default"},{"ChildFormType":"RETURN"},{"Amount":"50"}]]

我有另一个页面用于检索本地存储项目。我用这个javascript来检索。这是我使用的JS:

$(document).ready(function () {
 if (localStorage['LocalTakenReturn'])
    {
        var printIcon = function (cell, formatterParams) { //plain text value
            return "<i class='fa fa-print'></i>";
        };

        data = JSON.parse(localStorage['LocalTakenReturn']);
        $("#the-table").tabulator({
            data: data,
            columns: [
              { title: "MemberNam2e", field: "", width: "20%", editor: false },
              { title: "StaffName", field: "StaffName", width: "20%", editor: false },
              { title: "ChildFormType", field: "ChildFormType", width: "20%", editor: false },
              { title: "Amount", field: "Amount", width: "20%", editor: false },
              { formatter: printIcon, width: "20%", align: "center", cellClick: function (e, cell) { SendToStorage(JSON.stringify(cell.getRow().getData()), cell.getRow(), cell.getRow().getData().memberName) } },
            ],
            cellEdited: function (id, data, row) {
                data = $("#the-table").tabulator("getData", true);
                localStorage['LocalTakenReturn'] = JSON.stringify(data);
            },
        });
    }
 });

它返回3行记录,所有字段为空。结果的例子如下:

MemberName | StaffName | ChildformType | Amount
[null]       [null]      [null]          [null]
[null]       [null]      [null]          [null]

假设我在本地存储中有2条记录。

为什么里面的数据是null而不是本地存储中的json数据。请帮忙解决代码中的错误?

0 个答案:

没有答案