流星可放音示例

问题描述

有人有使用流星和handontable创建工作表来读取和更新数据的工作示例吗?

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提供了一个smartpackage，但它用于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

接下来，将新模板添加到您的Handsontable所在的html中:

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'}
],
// ...

这篇关于流星可放音示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！