Meteor Handsontable 示例

Posted 2023-03-22

【中文标题】Meteor Handsontable 示例

【英文标题】：Meteor Handsontable example

【发布时间】：2015-02-26 09:16:36

【问题描述】：

有没有人有一个使用流星和handsontable创建反应表来读取和更新数据的工作示例？

提前感谢您的帮助

【问题讨论】：

支持@lobosan，已经尝试过？一些包裹？看看这个包handsontable package，我想如果你问任何例子或演示，人们来帮忙有点困难，如果你接受建议，尝试一些代码（也许是包），你自己，如果你得到卡住了回到这里并尝试询问，但有一些代码引用或其他东西

你能把一个最小的工作演示放在一起吗？如果是的话，你能把它作为一个流星垫应用程序分享吗？谢谢

【参考方案1】：

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

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

从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 智能包

接下来将一个新模板添加到您的 Handsontable 所在的 html 中：

<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 列。要在 Meteor 中使用 Handsontable 定义列，下面是示例集合 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'
],
// ...

【讨论】：

嗨@Mufasa，谢谢你的回答。您的代码正在运行，但在第一列中出现了文档的 ID。我试图通过添加 Handsontable 的此配置属性 columns: [data: 1, data: 2, data: 3] 来隐藏第 0 列，但随后不会呈现整个表。当我使用属性单元格时同样的问题。任何建议。提前致谢

查看更新的答案。您将列指定为：[data:'field1',data:'field2']

顺便说一句，您无法按照您的指示引用列，因为您正在使用对象数组（因为您使用的是 Meteor 集合），而不是二维数组。请参阅 HT 文档handsontable.com/demo/datasources.html

上的“对象数据源”示例

非常感谢@Mufasa 的耐心和详细的支持。该代码现在运行良好。在你做的时候继续努力，你的名声会越来越高。一切顺利;)

好的，我能够完成，当前帖子中的内容。我错过了插入删除部分。所以我添加了一个 afterCreateRow 钩子，但是当我在 afterCreateRow 中插入时，它会导致无限循环。