javascript - 使用表 JS 库时出现意外行为答案

【问题标题】：javascript - Unexpected behavior with hands on table JS libraryjavascript - 使用表 JS 库时出现意外行为
【发布时间】：2018-02-13 15:29:13
【问题描述】：

我在使用可动手操作的 JS 库时遇到了一个特殊问题，我在一个页面上创建了两个表实例，这些表在 UI 上呈现。但是，我看到如果我尝试在其中一个表中添加一行，它也会被添加到另一个实例中。数据也是如此，它在实例之间被复制。有人可以帮我解决这里的问题吗？

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 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 hot1 = new Handsontable(hotElement1, hotSettings);
  var hot2 = new Handsontable(hotElement2, hotSettings);

<div id="hot1"></div>
    <div id="hot2"></div>
<link rel="stylesheet" type="text/css" href="http://docs.handsontable.com/pro/bower_components/handsontable-pro/dist/handsontable.full.min.css">
<link rel="stylesheet" type="text/css" href="http://handsontable.com/static/css/main.css">
<script src="http://docs.handsontable.com/pro/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>

小提琴链接到我的代码：http://jsfiddle.net/0bx0exeo/1/

【问题讨论】：

标签： javascript html handsontable

【解决方案1】：

问题是您对两个表使用相同的数据源。每当您向一个数据源添加新行时，都会反映在另一个数据源中。使用两个不同的数据源，因此像这样使用两个不同的热设置，它会正常工作。

 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/

【讨论】：