使用内容恢复 GridstackJS 面板（例如 Highcharts）

Question

我正在构建一个仪表板，您可以在其中使用 GridstackJS 在网格中添加、删除、移动和调整面板大小。我正在用不同的东西填充这些面板。在此示例中，我使用的是 Highchart。为了保存和恢复面板的位置和大小，我使用了 GridstackJS 的标准序列化。

我现在的问题是保存和恢复面板内的内容。

是否有一种优雅的方式来保存内容并在恢复时将其应用到正确的面板？

JSFiddle

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@0.5.5/dist/gridstack.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/gridstack@0.5.5/dist/gridstack.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/gridstack@0.5.5/dist/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/gridstack@0.5.5/dist/gridstack.jQueryUI.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>


<button id="save-grid" class="btn btn-primary">Save Grid</button>
                <button id="load-grid" class="btn btn-primary">Load Grid</button>
                <button id="delete-grid" class="btn btn-primary">Delete Grid</button>

<div class="row">
    <div class="col-sm-12">
        <div class="grid-stack ui-droppable">
            <div class="dragbox grid-stack-item ui-draggable ui-resizable" data-gs-id="draggable">
                <h2 class="dragbox-header">Chart 1</h2>
                <div class="dragbox-content">
                    <div class="text-center"> Item 1</div>
                </div>
            </div>
            <div class="dragbox grid-stack-item ui-draggable ui-resizable" data-gs-id="draggable">
                <h2 class="dragbox-header">Chart 2</h2>
                <div class="dragbox-content"></div>
            </div>
            <div class="dragbox grid-stack-item ui-draggable ui-resizable" data-gs-id="draggable" data-gs-width="4" data-gs-height="4">
                <h2 class="dragbox-header" id="testChartHeader">Chart 3</h2>
                <div class="text-center" id="testChart"></div>
            </div>
        </div>
    </div>
</div>

CSS

.dragbox {
    margin: 5px 2px 20px;
    background: #fff;
    position: absolute;
    border: 1px solid #ddd;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.dragbox-header {
    margin: 0;
    font-size: 12px;
    padding: 5px;
    background: #f0f0f0;
    color: #000;
    border-bottom: 1px solid #eee;
    font-family: Verdana;
    cursor: move;
    position: relative;
}

.dragbox-content {
    display: block;
    background: #fff;
    margin: 5px;
    font-family: 'Lucida Grande', Verdana;
    font-size: 0.8em;
    line-height: 1.5em;
}

#testChart {
    height: 200px;
}

.placeholder {
    background: lightgray;
    border: 1px dashed #ddd;
    border-radius: 5px;
}

JavaScript

$(function() {
    var options = {
        draggable: {handle: '.dragbox-header', scroll: false, appendTo: 'body'},
        placeholderClass: "placeholder",
        acceptWidgets: true,
        cellHeight: 60
    };
    $('.grid-stack').gridstack(options);
    new function () {
      this.serializedData = [
      ];

      this.grid = $('.grid-stack').data('gridstack');

      this.loadGrid = function () {
        this.grid.removeAll();
        var items = GridStackUI.Utils.sort(this.serializedData);
        items.forEach(function (node, i) {
          this.grid.addWidget($('<div class="grid-stack-item ui-draggable ui-resizable" data-gs-id="draggable"><div class="dragbox grid-stack-item-content ui-draggable-handle"><div class="dragbox-header">Chart ' + (i + 1) + '</div></div></div>'), node);
        }, this);
        return false;
      }.bind(this);

      this.saveGrid = function () {
        this.serializedData = $('.grid-stack > .grid-stack-item').map(function (i, el) {
          el = $(el);
          var node = el.data('_gridstack_node');
          return {
            x: node.x,
            y: node.y,
            width: node.width,
            height: node.height
          };
        }).toArray();

        return false;
      }.bind(this);

      this.clearGrid = function () {
        this.grid.removeAll();
        return false;
      }.bind(this);

      $('#save-grid').click(this.saveGrid);
      $('#load-grid').click(this.loadGrid);
      $('#delete-grid').click(this.clearGrid);
    };
  });
var chart = Highcharts.chart('testChart', {
    chart: {
        animation: false,
        type: 'bar'
    },
    plotOptions: {
        series: {
            animation: false,
        }
    },
    title: {
        text: 'Fruit Consumption'
    },
    xAxis: {
        categories: ['Apples', 'Bananas', 'Oranges']
    },
    yAxis: {
        title: {
            text: 'Fruit eaten'
        }
    },
    series: [{
        name: 'Jane',
        data: [1, 0, 4]
    }, {
        name: 'John',
        data: [5, 7, 3]
    }]
});

$('.grid-stack').on('change', function(event, items) {
    var chartContainer = chart.renderTo;
    $(chartContainer).css(
        'height',
        $(chartContainer.parentElement).height() - $('#testChartHeader').height()
    );

    chart.reflow();
});

Answer 1

您需要在loadGrid函数中再次创建图表：

    this.loadGrid = function() {
        this.grid.removeAll();
        var items = GridStackUI.Utils.sort(this.serializedData);
        items.forEach(function(node, i) {
            this.grid.addWidget($('<div class="grid-stack-item ui-draggable ui-resizable" data-gs-id="draggable"><div class="dragbox grid-stack-item-content ui-draggable-handle"><div class="dragbox-header">Chart ' + (i + 1) + '</div>' + (i === 2 ? '<div id="testChart"></div>' : '') + '</div></div>'), node);
        }, this);

        chart = createChart();

        return false;
    }.bind(this);

---

现场演示： https://jsfiddle.net/BlackLabel/pjy8b950/