使用内容（例如Highcharts）还原GridstackJS面板

Question

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

我现在的问题是在面板内保存和还原内容。

还原时是否有一种优雅的方法来保存内容并将其应用于正确的面板？

JSFiddle

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/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/