gridstack.js/demo/serialization.html at develop · tchoward/gridstack.js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Serialization demo</title>

  <link rel="stylesheet" href="demo.css"/>

  <script src="../src/jquery.js"></script>
  <script src="../src/gridstack.js"></script>
  <script src="../src/jquery-ui.js"></script>
  <script src="../src/gridstack.jQueryUI.js"></script>
</head>
<body>
  <div class="container-fluid">
    <h1>Serialization demo</h1>
    <a onClick="saveGrid()" class="btn btn-primary" href="#">Save</a>
    <a onClick="loadGrid()" class="btn btn-primary" href="#">Load</a>
    <a onClick="clearGrid()" class="btn btn-primary" href="#">Clear</a>
    <br/><br/>
    <div class="grid-stack"></div>
    <hr/>
    <textarea id="saved-data" cols="100" rows="20" readonly="readonly"></textarea>
  </div>

  <script type="text/javascript">
    var grid = GridStack.init();

    grid.on('added removed change', function(e, items) {
      var str = '';
      items.forEach(function(item) { str += ' (x,y)=' + item.x + ',' + item.y; });
      console.log(e.type + ' ' + items.length + ' items:' + str );
    });

    var serializedData = [
      {x: 0, y: 0, width: 2, height: 2, id: '0'},
      {x: 3, y: 1, width: 1, height: 2, id: '1'},
      {x: 4, y: 1, width: 1, height: 1, id: '2'},
      {x: 2, y: 3, width: 3, height: 1, id: '3'},
      {x: 1, y: 3, width: 1, height: 1, id: '4'}
    ];

    loadGrid = function() {
      var items = GridStack.Utils.sort(serializedData);
      grid.batchUpdate();

      if (grid.engine.nodes.length === 0) {
        // load from empty
        items.forEach(function (item) {
          grid.addWidget('<div><div class="grid-stack-item-content">' + item.id + '</div></div>', item);
        });
      } else {
        // else update existing nodes (instead of calling grid.removeAll())
        grid.engine.nodes.forEach(function (node) {
          var item = items.find(function(e) { return e.id === node.id});
          grid.update(node.el, item.x, item.y, item.width, item.height);
        });
      }

      grid.commit();
    };

    saveGrid = function() {
      serializedData = [];
      grid.engine.nodes.forEach(function(node) {
        serializedData.push({
          x: node.x,
          y: node.y,
          width: node.width,
          height: node.height,
          id: node.id
        });
      });
      document.querySelector('#saved-data').value = JSON.stringify(serializedData, null, '  ');
    };

    clearGrid = function() {
      grid.removeAll();
    }

    loadGrid();
  </script>
</body>
</html>