meteor - meteor 中的可编辑表格

Question

我想在 meteor 中创建一个可编辑的表格。

我浏览了以下链接:

reactive table和
autoform

但无法到达任何地方，我找对地方了吗？请指导。我是 meteor 的新手，任何帮助将不胜感激。谢谢

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