javascript - 意外的行爲，用手在表JS庫

我在使用handsontable JS庫時遇到了一個特殊問題，我在頁面上創建表格的兩個實例，表格在UI上呈現。但是，我發現如果我嘗試在其中一個表中添加一行，它也將被添加到其他實例中。數據也是如此，它在實例之間被複制。有人可以幫我解決這裏的問題。javascript - 意外的行爲，用手在表JS庫

var dataObject = [ 
 
    {id: 1, flag: 'EUR', currencyCode: 'EUR', currency: 'Euro', \t 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', 
 
\t \t \t 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/

來源

2017-09-05 aditya

的問題是，你正在使用兩個表相同的數據源。無論何時將新行添加到同一個數據源中反映的另一個數據源。使用兩個不同的數據源，從而像這樣的兩個不同的熱門設置，它會正常工作。

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/

小提琴

來源

2017-09-05 11:10:07

javascript - 意外的行爲，用手在表JS庫

回答

相關問題