使用angularjs保存網格布局

Question

我正在使用Gridster創建儀表板應用程序： https ： //github.com/ManifestWebDesign/angular-gridster

我想使用JSON將我的布局保存到數據庫。 我所知道的是，我將圖表數組存儲到數據庫並獲取它。 是否可以將小部件col，行和大小存儲到特定小部件，以便我可以使用角度樣式{{chart.xsize}}給出size-x和size-y。 在創建小部件時，我可以分配默認大小值，並僅在用戶調整大小或拖動小部件后保存。 或者這是完全錯誤的方法嗎？ 我怎樣才能將小部件大小和位置存儲到數據庫？

我有像我這樣的小部件：

  <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構建了幾個角度儀表板，並將布局保存回數據庫。 我是這樣做的：

    <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的數組，我存儲我的widget對象。 數組中的每個對象都包含高度，寬度和大小的屬性。 所以，像這樣：

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

幸運的是，由於角度綁定，當用戶更改gidster項目大小或位置時，它也會更改屬性值！ 重要的是要注意， elements數組從我使用的ngStorage框架附加到$ sessionStorage對象，以便在頁面刷新時保留所有更改。

最后，當用戶保存儀表板時，我將一個對象寫入包含elements數組的數據庫。 從而保存所有位置和大小信息。 下次從數據庫中調用該對象，並使用其數據填充elements數組時，您將返回相同的儀表板。