使用行和列值angularjs对齐gridster项目

Posted 2023-05-07

【中文标题】使用行和列值angularjs对齐gridster项目

【英文标题】：Align gridster items using row and col values angularjs

【发布时间】：2018-09-21 00:14:54

【问题描述】：

我使用 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

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

第一个图表行：0 和列：0 第二个图表行：0 和列：3 图表第三行：2 和列：0 图表第四行：2 和列：3

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

Save gridster layout using angularjs

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 不会根据 row 和 col 值对齐它们。

【参考方案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;
  );

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