使用Handsontable与Ember

Question

我能够将Ember-数据模型获取到Handsontable，但我不知道如何将数据保存到Handsontable中，返回到Ember-Data。这就是我想出的将Ember-数据获取到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似乎符合要求，但也许我应该用其他的安博？

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