关于handsontable的使用过程中遇到的问题

当删除一行数据，然后撤销操作的时候，某些情况下会丢失这一行某些列的数据。

我去官方网站上找了一个例子，然后自己改动了下数据，发现官网的例子也有这个问题。

如下图：

当我删除一行的时候

删除后再按ctrl+z去撤销这个操作，结果发现丢失数据的问题，如下图：

经过我多次尝试，最后发现一个解决办法，让数据列数多于实际的表格列数，具体原因估计是这个插件的一个bug了。

数据修改前：

{
id: 1,
flag: 'EUR',
currencyCode: 'EUR',
currency: 'Euro',
level: 0.9033,
units: 'EUR / USD',
asOf: '08/19/2015',
onedChng: 0.0026
},

修改后：

{
id: 1,
flag: 'EUR',
currencyCode: 'EUR',
currency: 'Euro',
level: 0.9033,
units: 'EUR / USD',
asOf: '08/19/2015',
onedChng: 0.0026,
chexiao:'123',
// dd:'333'
}

原始代码：

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://docs.handsontable.com/pro/bower_components/handsontable-pro/dist/handsontable.full.min.css">
<link rel="stylesheet" type="text/css" href="https://handsontable.com/static/css/main.css">
<script src="https://docs.handsontable.com/pro/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>
</head>
<body>
<div id="hot"></div>
<script>var dataObject = [
{
id: 1,
flag: 'EUR',
currencyCode: 'EUR',
currency: 'Euro',
level: 0.9033,
units: 'EUR / USD',
asOf: '08/19/2015',
onedChng: 0.0026
// chexiao:'123',
// dd:'333'
},
{
id: 2,
flag: 'JPY',
currencyCode: 'JPY',
currency: 'Japanese Yen',
level: 124.3870,
units: 'JPY / USD',
asOf: '08/19/2015',
onedChng: 0.0001
// chexiao:'123',
// dd:'333'
},
{
id: 3,
flag: 'GBP',
currencyCode: 'GBP',
currency: 'Pound Sterling',
level: 0.6396,
units: 'GBP / USD',
asOf: '08/19/2015',
onedChng: 0.00
// chexiao:'123',
// dd:'333'
},
{
id: 4,
flag: 'CHF',
currencyCode: 'CHF',
currency: 'Swiss Franc',
level: 0.9775,
units: 'CHF / USD',
asOf: '08/19/2015',
onedChng: 0.0008
// chexiao:'123',
// dd:'333'
},
{
id: 5,
flag: 'CAD',
currencyCode: 'CAD',
currency: 'Canadian Dollar',
level: 1.3097,
units: 'CAD / USD',
asOf: '08/19/2015',
onedChng: -0.0005
// chexiao:'123',
// dd:'333'
},
{
id: 6,
flag: 'AUD',
currencyCode: 'AUD',
currency: 'Australian Dollar',
level: 1.3589,
units: 'AUD / USD',
asOf: '08/19/2015',
onedChng: 0.0020
// chexiao:'123',
// dd:'333'
},
{
id: 7,
flag: 'NZD',
currencyCode: 'NZD',
currency: 'New Zealand Dollar',
level: 1.5218,
units: 'NZD / USD',
asOf: '08/19/2015',
onedChng: -0.0036
// chexiao:'123',
// dd:'333'
},
{
id: 8,
flag: 'SEK',
currencyCode: 'SEK',
currency: 'Swedish Krona',
level: 8.5280,
units: 'SEK / USD',
asOf: '08/19/2015',
onedChng: 0.0016
// chexiao:'123',
// dd:'333'
},
{
id: 9,
flag: 'NOK',
currencyCode: 'NOK',
currency: 'Norwegian Krone',
level: 8.2433,
units: 'NOK / USD',
asOf: '08/19/2015',
onedChng: 0.0008
// chexiao:'123',
// dd:'333'
},
{
id: 10,
flag: 'BRL',
currencyCode: 'BRL',
currency: 'Brazilian Real',
level: 3.4806,
units: 'BRL / USD',
asOf: '08/19/2015',
onedChng: -0.0009
// chexiao:'123',
// dd:'333'
},
{
id: 11,
flag: 'CNY',
currencyCode: 'CNY',
currency: 'Chinese Yuan',
level: 6.3961,
units: 'CNY / USD',
asOf: '08/19/2015',
onedChng: 0.0004
// chexiao:'123',
// dd:'333'
},
{
id: 12,
flag: 'RUB',
currencyCode: 'RUB',
currency: 'Russian Rouble',
level: 65.5980,
units: 'RUB / USD',
asOf: '08/19/2015',
onedChng: 0.0059
// chexiao:'123',
// dd:'333'
},
{
id: 13,
flag: 'INR',
currencyCode: 'INR',
currency: 'Indian Rupee',
level: 65.3724,
units: 'INR / USD',
asOf: '08/19/2015',
onedChng: 0.0026
// chexiao:'123',
// dd:'333'
},
{
id: 14,
flag: 'TRY',
currencyCode: 'TRY',
currency: 'New Turkish Lira',
level: 2.8689,
units: 'TRY / USD',
asOf: '08/19/2015',
onedChng: 0.0092
// chexiao:'123',
// dd:'333'
},
{
id: 15,
flag: 'THB',
currencyCode: 'THB',
currency: 'Thai Baht',
level: 35.5029,
units: 'THB / USD',
asOf: '08/19/2015',
onedChng: 0.0044
// chexiao:'123',
// dd:'333'
},
{
id: 16,
flag: 'IDR',
currencyCode: 'IDR',
currency: 'Indonesian Rupiah',
level: 13.83,
units: 'IDR / USD',
asOf: '08/19/2015',
onedChng: -0.0009
// chexiao:'123',
// dd:'333'
},
{
id: 17,
flag: 'MYR',
currencyCode: 'MYR',
currency: 'Malaysian Ringgit',
level: 4.0949,
units: 'MYR / USD',
asOf: '08/19/2015',
onedChng: 0.0010
// chexiao:'123',
// dd:'333'
},
{
id: 18,
flag: 'MXN',
currencyCode: 'MXN',
currency: 'Mexican New Peso',
level: 16.4309,
units: 'MXN / USD',
asOf: '08/19/2015',
onedChng: 0.0017
// chexiao:'123',
// dd:'333'
},
{
id: 19,
flag: 'ARS',
currencyCode: 'ARS',
currency: 'Argentinian Peso',
level: 9.2534,
units: 'ARS / USD',
asOf: '08/19/2015',
onedChng: 0.0011
// chexiao:'123',
// dd:'333'
},
{
id: 20,
flag: 'DKK',
currencyCode: 'DKK',
currency: 'Danish Krone',
level: 6.7417,
units: 'DKK / USD',
asOf: '08/19/2015',
onedChng: 0.0025
// chexiao:'123',
// dd:'333'
},
{
id: 21,
flag: 'ILS',
currencyCode: 'ILS',
currency: 'Israeli New Sheqel',
level: 3.8262,
units: 'ILS / USD',
asOf: '08/19/2015',
onedChng: 0.0084
// chexiao:'123',
// dd:'333'
},
{
id: 22,
flag: 'PHP',
currencyCode: 'PHP',
currency: 'Philippine Peso',
level: 46.3108,
units: 'PHP / USD',
asOf: '08/19/2015',
onedChng: 0.0012
// chexiao:'123',
// dd:'333'
},
{
id: 23,
flag: 'PHP',
currencyCode: 'PHP',
currency: 'Philippine Peso',
level: 46.3108,
units: 'PHP / USD',
asOf: '08/19/2015',
onedChng: 0.0012
// chexiao:'123',
// dd:'333'
}
];
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 hotElement = document.querySelector('#hot');
var hotElementContainer = hotElement.parentNode;
var hotSettings = {
data: dataObject,
columns: [
{
data: 'id',
type: 'numeric',
width: 40
},
{
data: 'flag',
renderer: flagRenderer
},
{
data: 'currencyCode',
type: 'text'
},
{
data: 'currency',
type: 'text'
},
{
data: 'zz',
type: 'text'
},
// {
// data: 'chexiao',
// type: 'text'
// },
{
data: 'level',
type: 'numeric',
numericFormat: {
pattern: '0.0000'
}
},
{
data: 'units',
type: 'text'
},

{
data: 'asOf',
type: 'date',
dateFormat: 'MM/DD/YYYY'
},
// {
// data: 'zz',
// type: 'text'
// },
{
data: 'onedChng',
type: 'text'
},
{
data: 'flag',
type: 'text'
},
{
data: 'ddd',
type: 'text'
},
{
data: 'flag',
type: 'text'
},
{
data: 'flag',
type: 'text'
}
],
stretchH: 'all',
width: 1306,
autoWrapRow: true,
height: 487,
maxRows: 220,
manualRowResize: true,
manualColumnResize: true,
rowHeaders: true,
colHeaders: [
'ID',
'Country',
'Code',
'Currency',
'sss',
// 'Ccd',
'Level',
'Units',
'Date',
'Change',
'AA',
'BB',
'CC',
'DD'
],
manualRowMove: true,
manualColumnMove: true,
contextMenu: true,
filters: true,
dropdownMenu: true
};
var hot = new Handsontable(hotElement, hotSettings);
</script>
</body>
</html>

秒客网

关于handsontable的使用过程中遇到的问题

相关文章