流星 Handsontable 示例

Question

流星 Handsontable 示例

meteorhandsontable

3

有没有人有使用Meteor和Handsontable创建响应式表格以读取和更新数据的工作示例？

非常感谢您的帮助。

- Lobosan

1

嗨@lobosan，你试过什么了吗？有没有用过什么包？看看这个包handsontable package，如果你要求示例或演示，可能很难得到帮助。如果你接受建议，可以自己尝试一些代码（也许是这个包），如果遇到困难再回来这里，但请提供一些代码参考或其他信息。 - Ethaan

你能否制作一个最小可行演示？如果可以，能否将其作为Meteorpad应用程序分享？谢谢。 - pihentagy

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mufasa · Accepted Answer

下面的示例可以作为一张反应式表格，可读取和写入数据，包括粘贴和自动填充。

我不知道是否有一个 Meteor 智能包可以提供标准 Handsontable API。 (Olragon 有一个智能包，但它是针对 Handsontable 的 jQuery API 的)。您可以很容易地直接将这些文件添加到您的项目中：

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) {
 ...

You may need to uninstall any existing Handsontable smartpackages

接下来在你的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'}
],
// ...