Meteor Handsontable 示例 [英] Meteor Handsontable example

问题描述

有没有人有使用meteor 和handsontable 创建反应表来读取和更新数据的工作示例?

does anyone have a working example using meteor and handsontable to create a reactive table to read and update the data?

在此先感谢您的帮助

推荐答案

以下示例用作读取和写入数据(包括粘贴和自动填充)的反应式表.

The following example works as a reactive table that reads and writes data, including paste and autofill.

我不知道提供标准 Handsontable API 的 Meteor 智能包.(Olragon 有一个智能包，但它用于 Handsontable 的 jQuery API).您可以相当轻松地将文件直接添加到您的项目中:

I'm not aware of a Meteor smartpackage that makes available the standard Handsontable API. (There is one smartpackage by Olragon, but it's for the jQuery API of Handsontable). You can add the files to your project directly fairly easily:

• 从 https://github.com/handsontable/handsontable/releases
下载最新版本
• 解压并复制 dist/handsontable.full.js 和 dist/handsontable.full.css 到您项目的客户端目录之一(例如/client/lib/)

• 打开 handsontable.full.js 并更改以下行:

• Download the latest release from https://github.com/handsontable/handsontable/releases
• Unzip and copy dist/handsontable.full.js and dist/handsontable.full.css to one of your project's client directories (e.g., /client/lib/)

• Open handsontable.full.js and change the following line:

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

// New code
Handsontable = function (rootElement, userSettings) {
 ...

您可能需要卸载任何现有的 Handsontable 智能软件包

You may need to uninstall any existing Handsontable smartpackages

接下来向您的 html 添加一个新模板，您的 Handsontable 将位于该位置:

Next add a new template to your html where your Handsontable will be located:

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

最后在你的 js 文件中:

Finally in your js file:

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

Docs on afterChange API is here: https://github.com/handsontable/handsontable/wiki/Events

此代码将自动将您集合的字段呈现为列，包括一个 _id 列.要在 Meteor 中使用 Handsontable 定义列，以下是示例集合 Books 中的示例文档:

This code will render your collection's fields as columns automatically, including an _id column. To define columns using Handsontable in Meteor, here's an example document in the sample collection Books:

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

我们可以指定我们的列，以便 _id 不显示，以及(可选)为我们的 colHeaders 命名:

We can specify our columns so that _id does not show up, as well as (optionally) give names to our colHeaders:

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

这篇关于Meteor Handsontable 示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！