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 Data Store也不会直接保存记录。我有一个真正的组件，我打算更新这篇文章。

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

使用Handsontable和Ember

1 个答案: