javascript - 使用 angularjs 保存 gridster 布局

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 绑定(bind)，当用户更改 gidster 项目大小或位置时，它也会更改属性值!需要注意的是，elements 数组被附加到 ngStorage 中的 $sessionStorage 对象中。我使用的框架，以便在页面刷新时所有更改都将被保留。

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