meteor中的可编辑表格

Question

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

我已经浏览了以下链接：

reactive table和autoform

但是无法到达任何地方，我找对地方了吗?请指导。我是meteor的新手，任何帮助都将是appreciated.Thanks

Answer 1

我只是使用纯js创建了一个可编辑的表格，并通过bootstrap、语义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>

下面是我的行模板事件处理程序

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);
}

请参考此Complete Tutorial

Answer 2

我使用meteor add olragon:handsontable

它工作得很好。查看tutorials和docs。

Excel是一个具有

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