javascript-动手操作表JS库的意外行为

问题是,您对这两个表使用相同的数据源。无论何时向一个数据源添加新行,都会在另一个数据源中反映出来。使用两个不同的数据源和两个不同的热设置,就像这样,它会很好地工作。

 var dataObject = [
    {id: 1, flag: 'EUR', currencyCode: 'EUR', currency: 'Euro', level: 0.9033, units: 'EUR / USD', asOf: '08/19/2015', onedChng: 0.0026},
    {id: 2, flag: 'JPY', currencyCode: 'JPY', currency: 'Japanese Yen', level: 124.3870, units: 'JPY / USD', asOf: '08/19/2015', onedChng: 0.0001},
    {id: 3, flag: 'GBP', currencyCode: 'GBP', currency: 'Pound Sterling', level: 0.6396, units: 'GBP / USD', asOf: '08/19/2015', onedChng: 0.00}
  ];
   var dataObject1 = [
    {id: 1, flag: 'EUR', currencyCode: 'EUR', currency: 'Euro', level: 0.9033, units: 'EUR / USD', asOf: '08/19/2015', onedChng: 0.0026},
    {id: 2, flag: 'JPY', currencyCode: 'JPY', currency: 'Japanese Yen', level: 124.3870, units: 'JPY / USD', asOf: '08/19/2015', onedChng: 0.0001},
    {id: 3, flag: 'GBP', currencyCode: 'GBP', currency: 'Pound Sterling', level: 0.6396, units: 'GBP / USD', asOf: '08/19/2015', onedChng: 0.00}
  ];

  var currencyCodes = ['EUR', 'JPY', 'GBP', 'CHF', 'CAD', 'AUD', 'NZD', 'SEK', 'NOK', 'BRL', 'CNY', 'RUB', 'INR', 'TRY', 'THB', 'IDR', 'MYR', 'MXN', 'ARS', 'DKK', 'ILS', 'PHP'];

  var flagRenderer = function(instance, td, row, col, prop, value, cellProperties) {
    var currencyCode = value;

    while (td.firstChild) {
      td.removeChild(td.firstChild);
    }

    if (currencyCodes.indexOf(currencyCode) > -1) {
      var flagElement = document.createElement('DIV');
      flagElement.className = 'flag ' + currencyCode.toLowerCase();
      td.appendChild(flagElement);

    } else {
      var textNode = document.createTextNode(value === null ? '' : value);
      td.appendChild(textNode);
    }
  };

  var hotElement1 = document.querySelector('#hot1');
  var hotElement2 = document.querySelector('#hot2');
  var hotElementContainer1 = hotElement1.parentNode;
  var hotElementContainer2 = hotElement2.parentNode;
  var hotSettings = {
    data: dataObject,
    contextMenu:  ['row_above', 'row_below', 'remove_row', 'make_read_only'],
    columns: [
        {
            data: 'id',
            type: 'numeric',
            width: 40
        },
        {
            data: 'flag',
            renderer: flagRenderer
        },
        {
            data: 'currencyCode',
            type: 'text'
        },
        {
            data: 'currency',
            type: 'text'
        },
        {
            data: 'level',
            type: 'numeric',
            format: '0.0000'
        },
        {
            data: 'units',
            type: 'text'
        },
        {
            data: 'asOf',
            type: 'date',
            dateFormat: 'MM/DD/YYYY'
        },
        {
            data: 'onedChng',
            type: 'numeric',
            format: '0.00%'
        }
    ],
    stretchH: 'all',
    width: 806,
    autoWrapRow: true,
    height: 441,
    maxRows: 22,
    rowHeaders: true,
    colHeaders: [
        'ID',
        'Country',
        'Code',
        'Currency',
        'Level',
        'Units',
        'Date',
        'Change'
    ]
};

var hotSettings1 = {
    data: dataObject1,
    contextMenu:  ['row_above', 'row_below', 'remove_row', 'make_read_only'],
    columns: [
        {
            data: 'id',
            type: 'numeric',
            width: 40
        },
        {
            data: 'flag',
            renderer: flagRenderer
        },
        {
            data: 'currencyCode',
            type: 'text'
        },
        {
            data: 'currency',
            type: 'text'
        },
        {
            data: 'level',
            type: 'numeric',
            format: '0.0000'
        },
        {
            data: 'units',
            type: 'text'
        },
        {
            data: 'asOf',
            type: 'date',
            dateFormat: 'MM/DD/YYYY'
        },
        {
            data: 'onedChng',
            type: 'numeric',
            format: '0.00%'
        }
    ],
    stretchH: 'all',
    width: 806,
    autoWrapRow: true,
    height: 441,
    maxRows: 22,
    rowHeaders: true,
    colHeaders: [
        'ID',
        'Country',
        'Code',
        'Currency',
        'Level',
        'Units',
        'Date',
        'Change'
    ]
};

  var hot1 = new Handsontable(hotElement1, hotSettings);
  var hot2 = new Handsontable(hotElement2, hotSettings1);

相同的工作小提琴- http://jsfiddle.net/sanchitpatiyal95/0bx0exeo/5/