Handsontable 更新单元崩溃浏览器

Question

我使用 Handsontable 制作了一个简单的单列 table。我希望用户能够以 hh:mm:ss 格式输入时间，但我发现秒是一个有效的输入，例如 120s = 00:02:00。这不如它在更大的时间（小时）时困难。

numeral.js库里有一个函数format和unformat time，不错，我用了。唯一的问题是这段代码会导致浏览器崩溃。我想看看代码循环了多少次，就像对单元格的一次更改会导致 18,000 次循环，大多数时候会导致浏览器崩溃。为什么它调用 cellproperties.render 这么多次 O.o!?

有什么想法吗？

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" media="screen" href="http://localhost/handsontable-0.16.0/dist/handsontable.full.css">
<script src="http://localhost/handsontable-0.16.0/dist/handsontable.full.js"></script>

</head>
<body>
<div id="exampleGrid1" class="dataTable"></div>
<div id="exampleGrid2" class="dataTable"></div>
<script type="text/javascript">
    $(document).ready(function () {
    var data = [
    [0],
    [0],
    [0],
    [0],
    [0],
    [0],
    [0],
    ];


function ValueRenderer2(instance, td, row, col, prop, value, cellProperties) {
        Handsontable.renderers.NumericRenderer.apply(this, arguments);

        var a = numeral().unformat(td.innerHTML);

        console.log(a + 'this');
        value = 'test';


          $('#exampleGrid1').handsontable('setDataAtCell', row, 0, a);
 }
var call = 0
var $container = $("#exampleGrid1");

$container.handsontable({
    data: data,
    colHeaders: ['Time'],
    width: 500,
     columns: [
          {
            type: 'numeric',
            format: '00:00:00',
          },
          ],
    cells:   
        function (col, prop) {
            var cellProperties = {};
            cellProperties.renderer = ValueRenderer2;

            call++;
            console.log("the call is on: " + call);
            return cellProperties;
        },
});







});
</script>

</body>
</html>

Answer 1

自定义 ValueRenderer2 单元格渲染器的最后一行创建隐式递归，因为 setDataAtCell 强制对 table 进行完整渲染，进而调用 ValueRenderer2再次.

如果我答对了您的问题，您可能需要自定义单元格编辑器，而不是自定义渲染器。您可以阅读有关编辑器的更多信息 here.

Handsontable 更新单元崩溃浏览器

Handsontable updating cells crashing browser

javascript

jquery

loops

handsontable