使用 angularjs 保存网格布局

Question

我正在使用 Gridster 创建仪表板应用程序：https://github.com/ManifestWebDesign/angular-gridster

我想使用 JSON 将我的布局保存到数据库中。我所知道的是，我将图表数组存储到数据库并获取它。是否可以将小部件列、行和大小存储到特定小部件，这样我就可以使用 angular 样式 {{chart.xsize}} 给出 size-x 和 size-y。创建小部件时，我可以分配默认大小值并仅在用户调整大小或拖动小部件后保存。或者这是完全错误的方法吗？我还能如何将小部件大小和位置存储到数据库中？

我的小部件有 ng-repeat，如下所示：

  <div ng-if="chart.type === settings.types.LINEAR_GAUGE">
      <div class="panel c8y" gridster-item size-x="2" size-y="1">
        <div class="panel-heading">
          <h3 class="panel-title">{{chart.title}}</h3>
          <button class="btn btn-danger pull-right btn-xs" ng-click="onClickDelete($index)"><span class="glyphicon glyphicon-remove"/></button>
        </div>
        <div class="panel-body">
          <c8y-linear-gauge dp="chart.dp" measurement="chart.data[0].measurement"/>
        </div>
      </div>
  </div>

Answer 1

我实际上已经使用 angular-gridster 构建了几个 angular 仪表板，并将布局保存回数据库。这是我的做法：

    <div gridster="gridsterOpts">
        <ul>
                <li
                    gridster-item
                    row="element.posY"
                    col="element.posX"
                    size-x="element.width"
                    size-y="element.height"
                    ng-repeat="element in elements track by $index">
                    <div class="element-title">
                        <!--some header stuff goes here-->
                    </div>
                    <div class="element-useable-area">
                        <!--Main widget stuff goes here-->
                    </div>
                </li>
        </ul>
    </div>

所以我有一个名为 elements 的数组，用于存储小部件对象。数组中的每个对象都包含高度、宽度和大小的属性。所以，像这样：

{
    posY: 0,
    posX: 0,
    width: 100,
    height: 100,
    templateUrl: ...,
    data: ...
}

幸运的是，由于 angular 绑定，当用户更改 gidster 项目大小或位置时，它也会更改属性值！重要的是要注意 elements 数组附加到我使用的 ngStorage 框架中的 $sessionStorage 对象，因此如果页面刷新，所有更改都将保留。

最后，当用户保存仪表板时，我将一个对象写入数据库，其中包含 elements 数组。从而保存所有位置和大小信息。下次您从数据库中调用该对象并使用其数据填充 elements 数组时，您会得到相同的仪表板。

使用 angularjs 保存网格布局

Save gridster layout using angularjs

javascript

angularjs

gridster