将表中的选定行保存在本地存储中答案

【问题标题】：save selected rows from a table in local storage将表中的选定行保存在本地存储中
【发布时间】：2020-02-17 16:28:05
【问题描述】：

我正在使用带有 kendo 网格和 jquery 的数据表，我需要通过复选框获取所选行的值，因此我在事件发生变化时捕获事件并返回标记的行的值，像这样：

function onChange(e) {
    var rows = e.sender.select();
    rows.each(function(e) {
        var grid = $("#grid").data("kendoGrid");
        var dataItem = grid.dataItem(this);

        console.log(dataItem);
    })
};

$(document).ready(function() {
    $("#grid").kendoGrid({
        dataSource: {
            pageSize: 10,
            transport: {
                read: {
                    url: "https://demos.telerik.com/kendo-ui/service/Products",
                    dataType: "jsonp"
                }
            },
            schema: {
                model: {
                    id: "ProductID"
                }
            }
        },
        pageable: true,
        scrollable: false,
        persistSelection: true,
        sortable: true,
        change: onChange,
        columns: [{
                selectable: true,
                width: "50px"
            },
            {
                field: "ProductName",
                title: "Product Name"
            },
            {
                field: "UnitPrice",
                title: "Unit Price",
                format: "{0:c}"
            },
            {
                field: "UnitsInStock",
                title: "Units In Stock"
            },
            {
                field: "Discontinued"
            }
        ]
    });
});

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.1.114/js/kendo.all.min.js"></script>
</head>
<body>
  
<div id="example">
    <div id="grid"></div>
</div>
</body>
</html>

我现在需要的是能够存储这些值，如果它们被选中，我想将它们保存在本地存储中的数组中，但我不知道该怎么做，因为我需要保留它数组更新并消除那些不再标记的，有什么想法吗？

PD：我还附上了示例https://dojo.telerik.com/IciMekAn的原始道场@

【问题讨论】：

所以您想将dataItem 发送到LocalStorage？
我想继续将数组中选择的所有行保存在本地存储中，显然如果我取消选中某些行，本地存储中的数组必须更新这些更改

标签： javascript jquery ecmascript-6 kendo-grid

【解决方案1】：

我会查看localStorage 教程。这是一个基本的例子。注意sn-p会因环境而报错。

$(function() {
  function saveLocalData(k, d) {
    if (k == undefined) {
      return false;
    }
    if (d.length) {
      localStorage.setItem(k, JSON.stringify(d));
    } else {
      localStorage.removeItem(k);
    }
    return d.length;
  }

  function getLocalData(k) {
    return JSON.parse(localstorage.getItem(k));
  }

  function getGridData(target, elem) {
    return target.data("kendoGrid").dataItem(elem);
  }

  function onChange(e) {
    var selected = [];
    var rows = e.sender.select();
    rows.each(function(i, el) {
      //selected.push(dataItem);
      selected.push(getGridData($("#grid"), el));
    });
    console.log(selected);
    saveLocalData("selected", selected);
  }

  $("#grid").kendoGrid({
    dataSource: {
      pageSize: 10,
      transport: {
        read: {
          url: "https://demos.telerik.com/kendo-ui/service/Products",
          dataType: "jsonp"
        }
      },
      schema: {
        model: {
          id: "ProductID"
        }
      }
    },
    pageable: true,
    scrollable: false,
    persistSelection: true,
    sortable: true,
    change: onChange,
    columns: [{
        selectable: true,
        width: "50px"
      },
      {
        field: "ProductName",
        title: "Product Name"
      },
      {
        field: "UnitPrice",
        title: "Unit Price",
        format: "{0:c}"
      },
      {
        field: "UnitsInStock",
        title: "Units In Stock"
      },
      {
        field: "Discontinued"
      }
    ]
  });
});

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.default-v2.min.css" />

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.114/js/kendo.all.min.js"></script>

<div id="example">
  <div id="grid"></div>
</div>

【讨论】：