使用row和col值angularjs对齐gridster项目

Question

我已经使用angularjs，kendoui图表和angular gridster（ https://github.com/ManifestWebDesign/angular-gridster ）创建了一个仪表板。

所以我有一个函数来添加带有如下图表的表格：

 // add widget to a dashboard $scope.addWidget = function () { // new widget configuration var newWidget = { id: $scope.allWidgetData.selectedOption.id, data_source: {}, config: { name: $scope.allWidgetData.selectedOption.name, sizeX: 3, sizeY: 2, row: $scope.row, col: $scope.col } }; } // make api call and save data 

我可以将此对象保存到后端并获取值。 我正在为每个图表设置行和列值，如下所示，因为sizeX和sizeY值恒定为3和2。

1. 第一图表第0行和第0行
2. 第二个图表的第0行和col：3
3. 第三图表行：2和col：0
4. 第四图表行：2和列：3

我在以下页面上参考并搜索了解决方案：-

1. 使用angularjs保存gridster布局

2. https://github.com/ManifestWebDesign/angular-gridster

所以现在我的HTML如下所示，所以我设置了row和col值：

 <div gridster="gridsterOptions" ng-if="isShowing(index)"> <ul> <li gridster-item="widget" ng-repeat="widget in widgetData.availableOptions" row="widget.config.row" col="widget.config.col" style="overflow:hidden;" > <div class="box"> // kendo ui chart in div </li> </ul> </div> 

我的gridster配置如下：

 $scope.gridsterOptions = { minRows: 2, // the minimum height of the grid, in rows maxRows: 100, columns: 6, // the width of the grid, in columns colWidth: 'auto', // can be an integer or 'auto'. 'auto' uses the pixel width of the element divided by 'columns' rowHeight: 'match', // can be an integer or 'match'. Match uses the colWidth, giving you square widgets. margins: [10, 10], // the pixel distance between each widget defaultSizeX: 3, // the default width of a gridster item, if not specifed defaultSizeY: 2, // the default height of a gridster item, if not specified mobileBreakPoint: 600, // if the screen is not wider that this, remove the grid layout and stack the items swapping: false, pushing: true, floating: false, resizable: { enabled: true, start: function(event, uiWidget, $element) {}, // optional callback fired when resize is started, resize: function (event, uiWidget, $element) { }, // optional callback fired when item is resized, stop: function(event, uiWidget, $element) { } // optional callback fired when item is finished resizing }, draggable: { enabled: true, // whether dragging items is supported handle: '.box-header', // optional selector for resize handle start: function(event, uiWidget, $element) {}, // optional callback fired when drag is started, drag: function(event, uiWidget, $element) {}, // optional callback fired when item is moved, stop: function(event, uiWidget, $element) { } // optional callback fired when item is finished dragging } }; 

当我从后端获取gridster项目时，它们的顺序是随机的，并且gridster不会按照行和col值对齐它们。

Answer 1

我为您创建了一支工作笔，具体操作方法如下： https : //codepen.io/shnigi/pen/JLVZpK

我有一个类似的问题，这就是我解决的方法。 确保您引用的是正确的对象值。 准备好ajax调用时，您可能还需要设置位置：

<li ng-repeat="widget in widgets"
          class="panel" gridster-item
          row="widget.posY"
          col="widget.posX"
          size-x="widget.width"
          size-y="widget.height">
        <div class="panel-heading">
          <h3 class="panel-title">{{widget.title}}</h3>
        </div>
</li>

设置小部件位置时，移动断点也会出现问题，然后可能会有不同的分辨率。 所以我在这里所做的是，我现在正在使用此fork：

https://github.com/arkabide/angular-gridster

我根据分辨率对列进行计数，并启用了“动态”列。

$scope.gridsterOptions = {
  resizable: {
    enabled: false,
  },
  floating: true,
  pushing: true,
  swapping: true,
  isMobile: true,
  mobileBreakPoint: 768,
  columns: getColumns(),
  dynamicColumns: true,
  minWidthToAddANewColumn: 255,
  rowHeight: 400,
  draggable: {
    enabled: true,
    handle: '.panel-heading'
  }
};

const getColumns = () => {
  const browserWidth = $window.innerWidth;
  if (browserWidth < 1300) {
    return 3;
  } else if (browserWidth < 1500) {
    return 4;
  } else if (browserWidth < 1700) {
    return 5;
  }
  return 6;
};

如果分辨率发生变化，则小部件的位置会存在一些问题，但这是到目前为止我获得的最好的解决方案。

因此，请确保在使用Promise分配数据之前先加载所有数据。 伪代码是这样的：

const loadedWidgets = [];
    if (settings) {
      const loadAllWidgets = () => new Promise(resolve =>
          loadedWidgets.push(widget);
          resolve();
        }));

  const actions = settings.chartsettings.map(loadAllWidgets);
  Promise.all(actions).then(() => {
    const widgetList = loadedWidgets.map(widget => widget);
    $scope.widgets = widgetList;
  });
}

我猜您的问题与对象引用有关，或者您没有设置承诺。 您也可以尝试使用我正在使用的叉子。 因为对我来说，此设置有效，并且小部件出现在我保存它们的位置。