0
handontable JSライブラリを使用しているときに特有の問題に直面しています。UIがレンダリングされるページに2つのインスタンスを作成しています。しかし、テーブルの1つに行を追加しようとすると、他のインスタンスにも追加されることがわかります。データと同じですが、インスタンス間でコピーされます。誰かがここで問題を理解するのに私を助けてくれますか？私のコードに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/