Question

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

我已经浏览了以下链接：

但是无法到达任何地方，我在正确的地方寻找吗？请指导。我是流星的新手，任何帮助都会受到赞赏。谢谢

Answer 1

我使用meteor add olragon:handsontable

效果很好。查看tutorials和docs。

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

Answer 2

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

流星的可编辑表格

2 个答案: