可处理的更新单元格崩溃浏览器

Handsontable updating cells crashing browser

本文关键字：崩溃 浏览器 单元格 更新 可处理      更新时间：2023-09-26

我用Handsontable制作了一个简单的单列表。我希望用户能够以hh:mm:ss的格式输入时间，但我发现秒是一个有效的输入，如120秒= 00:02:00。这不是很好，因为它很难用更大的时间(小时)。

在numeric .js库中有一个函数格式和非格式时间，很好，我使用了它。唯一的问题是这段代码会导致浏览器发疯。我想看看代码循环了多少次，比如对一个单元格的一次更改会导致18000次循环，大多数情况下会导致浏览器崩溃。为什么调用细胞属性。渲染这么多次哦!

任何想法?

<!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>

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

如果我得到你的问题正确，你可能需要一个自定义单元格编辑器，而不是一个自定义渲染器。

相关文章：