使用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;
  });
}

我猜您的問題與對象引用有關，或者您沒有設置承諾。 您也可以嘗試使用我正在使用的叉子。 因為對我來說，此設置有效，並且小部件出現在我保存它們的位置。