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

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

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

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

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

источник

2012-04-27 thomasf1

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

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

Ну, вы должны его реализовать, и вы можете найти один пример в 'SlickGrid Example 4'.

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

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

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

Чтобы справиться с вашей сетки обновляет эффективно попытаться использовать различные методы признания недействительными .invalidate (Все) Ряд (ы)() а также .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(),

источник

2014-12-12 12:12:31 Bizniztime

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

ответ

Смежные вопросы