Как я могу интегрировать SlickGrid с реактивными коллекциями Meteor.js?

SlickGrid фокусируется на отображении данных из таблицы или массива, и это здорово. Meteor фокусируется на манипулировании данными, но использует Minimongo. Как SlickGrid может интегрироваться с коллекциями Minimonogo и сохранить быстрое отображение и возможности обработки больших объемов данных?

Мой нынешний способ сделать это кажется неправильным и несколько уродливым. У меня есть отдельный массив для SlickGrid и я пишу некоторый связующий код для обработки событий обновления:

  • Сортировка: обрабатывается Meteor, вызывает полное обновление (переустановка данных)
  • добавить/обновить/удалить: выяснить индекс и сделать его недействительным
  • Фильтрация: обрабатывается Meteor, запускает полное обновление (сброс данных)

Как мне связать курсор данных Meteor напрямую с SlickGrid и обрабатывать только события с помощью связующего кода? Или можно использовать Slick.dataview? Цель состоит в том, чтобы обрабатывать обновления на уровне ячейки.


javascript meteor slickgrid minimongo
person thomasf1    schedule 27.04.2012    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Использование Slick.Dataview только дублирует некоторые функции (сортировка, фильтрация, CRUD и т. д.) ваших коллекций, но вы должны проверить его, чтобы увидеть, как он взаимодействует с Slick.Grid.

Если вы посмотрите на код Slick.Grid, вы увидите, что он использует только 3 функции Dataview: .getLength(), .getItem() и .getItemMetadata( ) и последний не является обязательным для реализации. Таким образом, Slick.Grid — это, по сути, компонент «Просмотр», который читает только «Данные» (Dataview), но где находится «Контроллер»?

Ну, вы должны реализовать это на самом деле, и вы можете найти один пример в 'Пример 4 SlickGrid< /а>'.

Наиболее важная часть этого примера находится в этом фрагменте:

  // wire up model events to drive the grid
  dataView.onRowCountChanged.subscribe(function (e, args) {
    grid.updateRowCount();
    grid.render();
  });

  dataView.onRowsChanged.subscribe(function (e, args) {
    grid.invalidateRows(args.rows);
    grid.render();
  });

Эти 2 события (onRowCountChanged, onRowsChanged) будут срабатывать, когда вы добавляете, удаляете, обновляете строки в Dataview и с помощью этих функций передаете эту информацию в Grid.

Итак, основная идея состоит в том, чтобы сделать то же самое для вашей Mongo.Collection, и, насколько я вижу, Mongo.Cursor имеет .observeChanges(), который чем-то похож на .onRowsChanged.

Ознакомьтесь с API SlickGrid в исходном коде в конце документа.

Чтобы эффективно обрабатывать обновления сетки, попробуйте использовать различные методы аннулирования .invalidate(All)Row(s)(), а также .updateRow() и .updateCell() для еще более точного управления.

В основном это методы для обработки обновлений представления:

  "render": render,
  "invalidate": invalidate,
  "invalidateRow": invalidateRow,
  "invalidateRows": invalidateRows,
  "invalidateAllRows": invalidateAllRows,
  "updateCell": updateCell,
  "updateRow": updateRow,
  "getViewport": getVisibleRange,
  "getRenderedRange": getRenderedRange,
  "resizeCanvas": resizeCanvas,
  "updateRowCount": updateRowCount,
  "scrollRowIntoView": scrollRowIntoView,
  "scrollRowToTop": scrollRowToTop,
  "scrollCellIntoView": scrollCellIntoView,
  "getCanvasNode": getCanvasNode,
  "focus": setFocus,

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

  "onScroll": new Slick.Event(),
  "onSort": new Slick.Event(),
  "onHeaderMouseEnter": new Slick.Event(),
  "onHeaderMouseLeave": new Slick.Event(),
  "onHeaderContextMenu": new Slick.Event(),
  "onHeaderClick": new Slick.Event(),
  "onMouseEnter": new Slick.Event(),
  "onMouseLeave": new Slick.Event(),
  "onClick": new Slick.Event(),
  "onDblClick": new Slick.Event(),
  "onContextMenu": new Slick.Event(),
  "onKeyDown": new Slick.Event(),
  "onAddNewRow": new Slick.Event(),
  "onValidationError": new Slick.Event(),
  "onViewportChanged": new Slick.Event(),
  "onColumnsReordered": new Slick.Event(),
  "onColumnsResized": new Slick.Event(),
  "onCellChange": new Slick.Event(),
  "onActiveCellChanged": new Slick.Event(),
  "onActiveCellPositionChanged": new Slick.Event(),
  "onDragInit": new Slick.Event(),
  "onDragStart": new Slick.Event(),
  "onDrag": new Slick.Event(),
  "onDragEnd": new Slick.Event(),
  "onSelectedRowsChanged": new Slick.Event(),
person Bizniztime    schedule 12.12.2014