сохранить выбранные строки из таблицы в локальном хранилище - PullRequest
Новая
       12

сохранить выбранные строки из таблицы в локальном хранилище

0 голосов
/ 17 февраля 2020

Я работаю с таблицей данных с сеткой кендо и 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

1 Ответ

1 голос
/ 17 февраля 2020

Я бы рассмотрел учебник localStorage . Вот базовый c пример. Имейте в виду, что фрагмент кода выдаст ошибку из-за среды. 

$(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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...