将 Handsontable 与 Ember 一起使用

Question

我能够将 Ember-Data 模型提取到 Handsontable，但我不确定如何将放入 Handsontable 的数据保存回 Ember-Data。这就是我想出的将 Ember-Data 提取到 Handsontable 的方法：

App.ChapterView = Ember.View.extend({
  templateName : 'statVals',
  tagName: 'div',
  classNames: ['dataTable'],
  insertTable: function(){
    var data = this.get('controller.model.content');
    var divElement = jQuery('.dataTable');
    divElement.handsontable({ 
      startRows: 3,
      data: data,
      columns: [
        {data: "id"},
        {data: "_data.location"},
        {data: "_data.page"},
      ],
      minSpareRows: 1
    });
  }.on('didInsertElement')
});

我在 gitHub 上找到以下内容：https://github.com/bradparker/ember-handsontable

我的目标是使用类似电子表格的方式在我的网络应用中显示和保存数据。 Handsontable 似乎符合要求，但也许我应该在 Ember 中使用其他东西？

Answer 1

这是我的组件。它正在工作，但我需要对其进行修改，以便它不会访问 Ember 数据存储，也不会直接保存记录。一旦我有了真正的组件，我计划更新这篇文章。

App.HandsOnComponent = Ember.Component.extend({
  tagName: 'div',
  classNames: ['dataTable'],

  //create a unique Div ID for each chart
  tableDivID: function() {
      var rand = String(Math.random());
      var randMod = rand.split('.').join("");
      return 'table' + randMod + 'div';
  }.property(),


  //Insert the Handsontable
  insertTable: function(){
    var chapter = this.get('chapter');
    var statData = this.get('chapter.statData');        
    var divID = this.get('tableDivID');
    var divIDSelector = '#' + divID;
    var divElement = jQuery(divIDSelector);
    var _this = this;

    if (typeof(chapter.get('statData')) == 'undefined') {
      chapter.set('statData', [
          [0, 0],
        ]);
      chapter.save();
    }


    //Constructor for the Handsontable
    divElement.handsontable({ 
      startRows: 2,
      data: statData,
      stretchH: 'last',
      fixedRowsTop: 0,
      colHeaders: ['Date', 'Value'],


      cells: function (row, col, prop) {
        var cellProperties = {};
        var RowRenderer = function(instance, td, row, col, prop, value, cellProperties) {
          Handsontable.renderers.TextRenderer.apply(this, arguments);
          td.style.fontWeight = 'normal';
          td.style.color = '#FFFFFF';
          td.style.background = 'rgba(255, 255, 255, 0.3)';
          //td.style.border-color = '#FFFFFF';
        };
        return cellProperties;
      },

      columns: [
        {
          //column options for the first column
          type: 'date',
          dateFormat: 'yy/mm/dd',
          allowInvalid : false,
        },
        {
          type: 'numeric',
          Format: '0,0.00',
          allowInvalid : false,
        },
      ],

      minSpareRows: 1,

      afterChange: function (change, source) {
        if (source === 'loadData') {
          return; //don't save this change
        }
        var htInstance = $(divIDSelector).handsontable('getInstance');
        //var statData = chapter.get('statData');
        var statData = htInstance.getData();
        chapter.set('statData', statData);
        chapter.save();
      },


    });
  }.on('didInsertElement'),

  actions: {
    saveStatVals: function() {
      var store = this.get('storeName');
      var chapter = store.getById('chapter', chapterId);
      var handsontable = $('.dataTable').handsontable('getInstance');
      var dataTable = handsontable.getData();
      var _chapter = this.get('controllers.chapter');
      var _chapterId = _chapter.get('id');
      var chapter = this.store.getById('chapter', _chapterId);
          chapter.get('cont').pushObject(dataTable);
          chapter.save();
    },
  },      
});