Пример стола Meteor Handsontable

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

Я не знаю смарт-пакета Meteor, который делает доступным стандартный API Handsontable. (Есть один smartpackage от Olragon, но он предназначен для jQuery API Handsontable). Вы можете довольно легко добавить файлы в свой проект напрямую:

• Загрузите последнюю версию с https://github.com/handsontable/handsontable/releases.
• Разархивируйте и скопируйте dist/handsontable.full.js и dist/handsontable.full.css в один из клиентских каталогов вашего проекта (например, /client/lib/)

• Откройте handsontable.full.js и измените следующую строку:

  // Remove "var" from Handsontable declaration to add to global scope
  var Handsontable = function (rootElement, userSettings) {
   ...
  
  // New code
  Handsontable = function (rootElement, userSettings) {
   ...
  

• Возможно, вам потребуется удалить все существующие смарт-пакеты Handsontable.

Затем добавьте новый шаблон в свой html, где будет находиться ваш Handsontable:

<template name="handsontable">
<div class="handsontable" id="hot"></div>
</template>

Наконец, в вашем файле js:

Meteor.isClient {
 Template.handsontable.rendered = function () {
  var myData = [];  // Need this to create instance
  var container = document.getElementById("hot"); 
  var hot = new Handsontable(container,{  // Create Handsontable instance
    data: myData,
    startRows: 5,
    startCols: 5,
    colHeaders: true,
    minSpareRows: 1,
    contextMenu: true,
    afterChange: function (change, source) {  // "change" is an array of arrays. 
      if (source !== "loadData") {  // Don't need to run this when data is loaded
        for (i = 0; i < change.length; i++) {   // For each change, get the change info and update the record
            var rowNum = change[i][0]; // Which row it appears on Handsontable
            var row = myData[rowNum];  // Now we have the whole row of data, including _id
            var key = change[i][1];  // Handsontable docs calls this "prop"
            var oldVal = change[i][2];
            var newVal = change[i][3];
            var setModifier = {$set: {}};   // Need to build $set object
            setModifier.$set[key] = newVal; // So that we can assign 'key' dynamically using bracket notation of JavaScript object
            MyCollection.update(row._id,setModifier); 
        }               
      }
    }
  });  

  Tracker.autorun( function () {  // Tracker function for reactivity
      myData = MyCollection.find().fetch();  // Tie in our data
      hot.loadData(myData);
  });
 };
}

Документация по afterChange API находится здесь: https://github.com/handsontable/handsontable/wiki/Events

Этот код автоматически отображает поля вашей коллекции в виде столбцов, включая столбец _id. Чтобы определить столбцы с помощью Handsontable в Meteor, вот пример документа в коллекции образцов Books:

{_id: 'Hneb7LxFRptXCiL49',
 title: 'The Name of the Wind',
 author: 'Patrick Rothfuss',
 copies: 3 }

Мы можем указать наши столбцы, чтобы _id не отображался, а также (необязательно) дать имена нашим colHeaders:

// replace at "colHeaders":
colHeaders: ['Title','Author','Copies'],
columns: [
  {data: 'title'},
  {data: 'author:},
  {data: 'copies'}
],
// ...