meteor中的可编辑表格

我希望在meteor中创建一个可编辑的表

我浏览了以下链接：

及

---

但是我哪儿也去不了，我找对地方了吗？请指点。我是meteor的新手，任何帮助都将不胜感激。谢谢我使用

meteor add olragon:handsontable

它工作得很好。查看和

Handsontable是一个具有类似Excel外观的数据网格组件。 内置JavaScript，可与peak的任何数据源集成 效率。它具有强大的功能，如数据验证， 排序、分组、数据绑定、公式支持或列排序。 由Handsoncode团队和GitHub构建并积极支持 社区，根据麻省理工学院许可证免费分发

---

我只需使用纯js创建一个可编辑表，并通过引导、语义UI或任何您想要的方式对其进行样式化。 下面是我的表格行模板

<template name="item">
  {{#if editing}}
    <tr>
      <td><input type="text" id="editItemStore" value="{{store}}"></td>
      <td><input type="text" id="editItemName" value="{{name}}"></td>
      <td><input type="text" id="editItemWeight" value="{{weight}}"></td>
      <td><input type="text" id="editItemWeightType" value="{{weightType}}"></td>
      <td><input type="text" id="editItemQty" value="{{qty}}"></td>
      <td><input type="text" id="editItemQtyType" value="{{qtyType}}"></td>
      <td><input type="text" id="editItemPrice" value="{{price}}"></td>
      <td><button class="saveItem">save</button><button class="cancelItem">Cancel</button>{{#each errors}}<div>{{message}}</div>{{/each}}</td>
    </tr>
  {{else}}
    <tr>
      <td>{{store}}</td>
      <td>{{name}}</td>
      <td>{{weight}}</td>
      <td>{{weightType}}</td>
      <td>{{qty}}</td>
      <td>{{qtyType}}</td>
      <td>{{price}}</td>
      <td><button class="editItem">Edit</button><button class="deleteItem">Delete</button></td>
    </tr>
  {{/if}}
</template>

---

请参考此

您是否查看过meteor editable（）？=>解析参数时的错误：添加程序包meteor editable时：错误：没有这样的程序包使用：meteor添加workman:meteor editable但是如何使用它，没有示例这无法更新数据库..仅在UI上工作level@D“LodeProjector-不，我没有。如果你有机会这样做，我们很想知道你的想法！

Template.item.helpers({
  editing: function(){
    return Session.equals('editItemId', this._id);
  } 
});

Template.item.events({
  'click .deleteItem': function(){
    Items.remove(this._id);
  },
  'click .editItem': function(){
    Session.set('editItemId', this._id);
  },
  'click .cancelItem': function(){
    Session.set('editItemId', null);
  },
  'click .saveItem': function(){
    saveItem();
  },
  'keypress input': function(e){
    if(e.keyCode === 13){
      saveItem();
    }
    else if(e.keyCode === 27){
      Session.set('editItemId', null);
    }
  }
});
var saveItem = function(){
  var editItem = {
    store: $("#editItemStore").val(),
    name: $("#editItemName").val(),
    weight: $("#editItemWeight").val(),
    weightType: $("#editItemWeightType").val(),
    qty: $("#editItemQty").val(),
    qtyType: $("#editItemQtyType").val(),
    price: $("#editItemPrice").val()
  }

  Items.update(Session.get('editItemId'), {$set: editItem});
  Session.set('editItemId', null);
}