Выровняйте элементы гридстера, используя значения строк и столбцов angularjs

Question

Выровняйте элементы гридстера, используя значения строк и столбцов angularjs

0

Я создал приборную панель с использованием диаграмм углов, кендуй и угловой сетки (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

Я могу сохранить этот объект в backend и получить значения. Я устанавливаю значения строк и столбцов для каждой диаграммы следующим образом: значения sizeX и sizeY постоянны как 3 и 2.

Первая строка диаграммы: 0 и col: 0
Вторая строка диаграммы: 0 и col: 3
Третья строка диаграммы: 2 и col: 0
Четвертая строка графика: 2 и col: 3

Я ссылался и искал решение на следующих страницах:

Итак, теперь мой HTML выглядит ниже, поэтому я устанавливаю значения строк и столбцов:

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

Моя конфигурация сетки выглядит следующим образом:

$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
      }
  };

Когда я получаю элементы сетки из бэкэнд, они находятся в случайном порядке, а сетщик не выравнивает их как значения строк и столбцов.

MiHawk 11 апр. 2018, в 10:10

Источник

Теги:

javascript

html

angularjs

gridster

angular-grid

1 ответ

Ещё вопросы

Shnigi · Accepted Answer · 2018-04-12T08-17-00.000Z

Я создал для вас ручку, как это сделать: 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>

Мобильные точки останова также возникают при настройке позиции виджетов, и тогда у вас может быть другое разрешение. Итак, что я здесь сделал, я теперь использую эту вилку:

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

Есть некоторые проблемы с позиционированием виджета, если изменение разрешения, но это лучшее решение, которое я получил до сих пор.

Поэтому убедитесь, что вы загрузили все данные, прежде чем назначать их, используя обещания. Псевдокод выглядит следующим образом:

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

Я думаю, ваша проблема связана с ссылкой на объект или вы не устанавливаете позицию с обещаниями. Вы также можете попробовать развилку, которую я использую. Потому что для меня эта настройка работает, и виджеты появляются там, где я их сохраняю.