无法使用 HandsOnTable 删除行

Posted 2023-03-22

【中文标题】无法使用 HandsOnTable 删除行

【英文标题】：Not able to delete rows using HandsOnTable

【发布时间】：2013-07-02 16:17:44

【问题描述】：

我无法删除最新版本的行。我正在使用版本0.9.9。

这就是我的工作：

var $container = $("#add-table");
$container.handsontable(options);

var handsontable = $container.data('handsontable');
var data = handsontable.getData();
if(data.length > 1 && handsontable.isEmptyRow(data.length-1)) 
    handsontable.alter('remove_row', parseInt(data.length-1));

Handsontable delete multiple rows 上有一个类似的问题，但这并不能解决我的目的。此链接上的小提琴不适用于提供的解决方案。

任何帮助将不胜感激。

【问题讨论】：

你能举个例子说明你的表包含什么吗？

它是一个没有数据的空表

那么您实际上并没有删除任何行。如果您不希望显示额外的行和列，请在可操作选项中设置 minSpareRows: 0 和 minSpareCols: 0。

看看这个fiddle。您可以更改这些选项以查看效果。

我想要做的是，我已将 minsSpareRows 设置为 1，并且在我填写数据时，添加了行。现在，在提交表格之前，我不希望出现任何错误。因此，我尝试删除最后一行并验证表单。由于最后一行是空的，我总是会收到验证错误。由于这个问题，我无法删除最后一行。

【参考方案1】：

就目前而言，getSelected() 没有返回任何内容...

getSelected: function ()  
     //https://github.com/warpech/jquery-handsontable/issues/44 
     //cjl if (selection.isSelected())  
     //return [priv.selStart.row(), priv.selStart.col(), priv.selEnd.row(), priv.selEnd.col()]; 
     // 
     

这是一个巨大的问题，因为 handsontable 相当多地引用了该函数。不过，我们可以幸运地使用afterSelectionEnd event。

afterSelectionEnd (r: Number, c: Number, r2: Number, c2: Number) 选择一个或多个单元格后触发回调（鼠标向上）。 参数：r选择开始行c选择开始列r2选择结束行c2选择结束列

根据API，

alter ('remove_row', index: Number, amount: Number (Optional), source: String (Optional)) 删除给定索引处的行。默认数量等于 1

这意味着要使用alter('remove_row')，我们只需要提供索引。

---

这是一个 working demo 我为了得到想要的结果。

注意：

由于有bug，我们需要在afterSelectionEnd event中添加一些逻辑。

javascript：

var myData = [
    ["", "Kia", "Nissan", "Toyota", "Honda"],
    ["2008", 10, 11, 12, 13],
    ["2009", 20, 11, 14, 13],
    ["2010", 30, 15, 12, 13]
    ];

//declare row vars
var row1 = null,
    row2 = null;

var $container = $("#exampleGrid");

$container.handsontable(
    data: myData,
    startRows: 5,
    startCols: 5,
    minSpareCols: 0,
    minSpareRows: 0,
    rowHeaders: true,
    colHeaders: true,
    contextMenu: true,
    afterSelectionEnd: function(x1, y1, x2, y2)

        //add this because of bug
          if( (x1 <= x2 && y1 < y2) || (x1 < x2 && y1 <= y2) || (x1 == x2 && y1 == y2)) 
            row1 = x1;
            if(x1 == 0)
                row2 = parseInt(x2 + 1);
              else
                row2 = x2;
        
        else if( (x1 >= x2 && y1 > y2) || (x1 > x2 && y1 >= y2)) 
            row1 = x2;
            if(x2 == 0)
                row2 = parseInt(x1 + 1);
              else
                row2 = x1;
        
        else if(x1 < x2 && y1 > y2) 
            row1 = x1;
            row2 = x2;
        
        else if(x1 > x2 && y1 < y2) 
            row1 = x2;
            row2 = x1;
        
    
);

//gets instance of handsontable
    var instance = $container.handsontable('getInstance');

$('#delete').click(function()
    if(row1 != null)
        if(row2 != null || row2 != row1 )
            instance.alter('remove_row', row1, row2);
        
        else
            instance.alter('remove_row', row1);
        
        row1 = null;
        row2 = null;
    else
        alert('Please select a cell...');   
    
);

希望这会有所帮助，如果您需要其他任何东西，请告诉我！

【讨论】：

@rizwaniqbal 确定！如果您还需要什么，请告诉我！

【参考方案2】：

所以我猜你想删除一个空的最后一行？

确保您没有将 minSpareRows 设置为大于 0(default) 的值。如果 minSpareRows 大于零，您不能使用 alter('remove_row') 删除多余的行。

我用这个数据来模拟空的最后一行：

var myData = [
    ["", "Kia", "Nissan", "Toyota", "Honda"],
    ["2008", 10, 11, 12, 13],
    ["2009", 20, 11, 14, 13],
    ["2010", 30, 15, 12, 13],
    ["",,,]
];

查看示例。当您单击 del 链接时，它会删除空的最后一行。希望对你有帮助

Working Example