使用angularjs保存gridster布局 [英] Save gridster layout using angularjs

问题描述

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

I am creating dashboard application with Gridster: https://github.com/ManifestWebDesign/angular-gridster

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

I would like to save my layout to database using JSON. What I do know, is that I store charts array to database and fetch it. Is it possible to store widget col,row and size to specific widget so I could then give the size-x and size-y with angular style {{chart.xsize}}. When creating widget I could then assign default size values and save only after user has resized or dragged widget. Or is this completely wrong way to do this? How else I could store the widget sizes and positions to database?

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

I have ng-repeat for my widgets like this:

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

推荐答案

我实际上已经使用angular-gridster构建了多个角度仪表板，并将布局保存回数据库.这是我的方法:

I've actually built several angular dashboards using angular-gridster, and save the layout back to the database. Here is how I do it:

    <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的数组，用于存储小部件对象.数组中的每个对象都包括高度，宽度和大小的属性.所以，像这样:

So I have an array called elements where I am storing my widget objects. Each object in the array includes properties for the height and width and size. So, something like this:

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

幸运的是，由于角度绑定，当用户更改Gidster项目的大小或位置时，它也会更改属性值！重要的是要注意，elements数组是从我使用的 ngStorage 框架附加到$ sessionStorage对象的，以便页面刷新后所有更改都将保留.

Fortunately because of angular binding, when the user changes the gidster item size or position, it changes the property value too! Its important to note that the elements array is appended to a $sessionStorage object from the ngStorage framework I use, so that all the changes will be persisted if the page refreshes.

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

Eventually, when the user saves the dashboard, I write an object to the database which includes the elements array. Thus saving all the location and size info. The next time you call that object from the database, and populate the elements array with its data, you get back the same dashboard.

这篇关于使用angularjs保存gridster布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！