init view before init gridstack.js

index.html

<button id="init">js init</button>
<button id="save">save</button>
<button id="load">load</button>

<div class="grid-stack">
  <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="1" data-gs-height="1">
    <div class="grid-stack-item-content"></div>
  </div>
  <div class="grid-stack-item" data-gs-x="0" data-gs-y="1" data-gs-width="1" data-gs-height="1">
    <div class="grid-stack-item-content"></div>
  </div>
  <div class="grid-stack-item" data-gs-x="1" data-gs-y="0" data-gs-width="1" data-gs-height="1">
    <div class="grid-stack-item-content"></div>
  </div>
  
  <div id="i1" class="grid-stack-item" data-gs-x="1" data-gs-y="1" data-gs-width="1" data-gs-height="1">
    <div class="grid-stack-item-content"></div>
  </div>
</div>

<div style="display:hidden">
</div>

init view before init gridstack.js.markdown

init view before init gridstack.js

A Pen by nacady on CodePen.

License.

script.js

var d;

$(function() {
  $('#init').click(init);
  $('#save').click(save);
  $('#load').click(load);
});

function init() {
  var options = {
    cellHeight: 100,
    verticalMargin: 10,
    disableResize: true
  };
  grid = $('.grid-stack').gridstack(options).data('gridstack');

  /*
  grid.addWidget($('#i1'),
      1,1,1,1,
     false,null,null,null,null,
                'i1');
                  */
  save();
}

function save() {
  var res = _.map($('.grid-stack .grid-stack-item:visible'), function(el) {
    el = $(el);
    console.log(el.attr('data-gs-id'));
    var node = el.data('_gridstack_node');
    return {
      id: el.attr('data-gs-id'),
      x: node.x,
      y: node.y,
      width: node.width,
      height: node.height
    };
  });
  d = res;
  console.log(d);
}

function load() {
  console.log(d);
  console.log(grid);
  //var grid = $('.grid-stack').data('gridstack');
  grid.removeAll();
  d = GridStackUI.Utils.sort(d);
  console.log(d);

  _.each(d, function(node) {
    console.log(node);
    grid.addWidget($('<div class="grid-stack-item"><div class="grid-stack-item-content"></div></div>'),
      node.x, node.y, node.width, node.height);
  });
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.12.0/lodash.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.5/gridstack.min.js"></script>

style.css

.grid-stack-item-content {
  background-color: #aaa;
  background-image: url(//loremflickr.com/200/200/amazing,views/all);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

#load {
  margin-bottom: 20px;
}

.grid-stack-item {
    height: 100px;
}
.grid-stack-item[data-gs-y="1"] {
    top: 110px;
}

styles

<link href="//cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.5/gridstack.min.css" rel="stylesheet" />