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

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

javascript jquery json highcharts

Javascript 使用内容（例如Highcharts）还原GridstackJS面板,javascript,jquery,json,highcharts,gridstack,Javascript,Jquery,Json,Highcharts,Gridstack,我正在构建一个仪表板，您可以在其中使用GridstackJS在网格中添加、删除、移动和调整面板大小。我用不同的东西填充这些面板。在这个例子中，我使用的是海图。为了保存和恢复面板的位置和大小，我使用了GridstackJS的标准序列化我现在的问题是保存和恢复面板中的内容是否有一种优雅的方法来保存内容并在恢复时将其应用于正确的面板 HTML <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@0.5.5/

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

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

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

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>

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();
});

$（函数（）{
变量选项={
可拖动：{handle:'.dragbox header'，滚动：false，追加到：'body'}，
占位符类：“占位符”，
答:对,，
牢房高度：60
};
$（'.grid stack'）.gridstack（选项）；
新函数（）{
this.serializedData=[
];
this.grid=$（'.grid stack'）。data（'gridstack'）；
this.loadGrid=函数（）{
this.grid.removeAll（）；
var items=GridStackUI.Utils.sort（this.serializedData）；
items.forEach（功能（节点，i）{
this.grid.addWidget（$（'Chart'+（i+1）+''），节点）；
}，这个）；
返回false；
}.约束（本）；
this.saveGrid=函数（）{
this.serializedData=$（'.grid stack>.grid stack item'）.map（函数（i，el）{
el=$（el）；
变量节点=el.数据（“网格堆栈节点”）；
返回{
x:node.x，
y:node.y，
宽度：node.width，
高度：node.height
};
}).toArray（）；
返回false；
}.约束（本）；
this.clearGrid=函数（）{
this.grid.removeAll（）；
返回false；
}.约束（本）；
$（“#保存网格”）。单击（this.saveGrid）；
$（“#加载网格”）。单击（this.loadGrid）；
$（“#删除网格”）。单击（this.clearGrid）；
};
});
var chart=Highcharts.chart（'testChart'{
图表：{
动画：错，
类型：'bar'
},
打印选项：{
系列：{
动画：错，
}
},
标题：{
正文：“水果消费”
},
xAxis：{
类别：[‘苹果’、‘香蕉’、‘橙子’]
},
亚克斯：{
标题：{
文字：“吃水果”
}
},
系列：[{
姓名：'简'，
数据：[1,0,4]
}, {
姓名：'约翰'，
数据：[5,7,3]
}]
});
$（'.grid stack'）。on（'change'，函数（事件，项）{
var chartContainer=chart.renderTo；
$（chartContainer）.css(
“高度”，
$（chartContainer.parentElement）.height（）-$（'#testChartHeader'）.height（）
);
图.回流焊（）；
});

您需要在

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);

this.loadGrid=function（）{
this.grid.removeAll（）；
var items=GridStackUI.Utils.sort（this.serializedData）；
items.forEach（功能（节点，i）{
this.grid.addWidget（$（'Chart'+（i+1）+''+（i==2？''）+''），节点）；
}，这个）；
chart=createChart（）；
返回false；
}.约束（本）；

现场演示：

在这个非常简单的示例中，这可以完成类似的工作。但是，一旦我有了不同系列的不同图表类型，这些图表都是动态创建的，我就会遇到这样的问题：loadGrid函数不知道什么类型的图表有什么类型的数据，对吗？没错，要解决这个问题，你可以存储atual选项。嘿，很抱歉反应太晚，祝你新年快乐。到目前为止，如果我只得到一张图表，它运行良好。由于这旨在动态添加和删除许多图表，因此我希望在保存和恢复时将每个独立图表的图表选项安全地保存到正确的面板中，并为面板获取正确的图表选项。有没有简单有效的方法呢？嗨@BrOsCoRe，你也一样！你能给我举个简单的例子说明问题所在吗？基本上，问题是我能将图表选项保存到正确的节点吗？因为目前它的硬编码是Highchart出现在面板3中。但当我将面板3移到前面并保存网格时，我希望重新加载时Highchart显示在前面。

    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);