Question

我是Handsontable的新手。我正在尝试使用“ getSelected ”和“ alter ”方法（remove_row）删除多个选定的表格行。但是，使用下面的代码，我得到Firebug中未定义的错误“选择”和Chrome中的“Uncaught TypeError：无法读取未定义的属性'0'”。我选择哪一行或多少行并不重要。我仍然得到错误，没有删除任何行。我做错了什么？

    $(document).ready(function () {

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

    $("#exampleGrid").handsontable({
        data: myData,
        startRows: 5,
        startCols: 5,
        //minSpareCols: 1, //always keep at least 1 spare row at the right
        //minSpareRows: 1, //always keep at least 1 spare row at the bottom,
        rowHeaders: true,
        colHeaders: true,
        contextMenu: true,
        currentRowClassName: 'currentRow',
        currentColClassName: 'currentCol'

    });

    $edit = $('#exampleGrid');

    function editRows() {

        $('#addtop').on('click', function () {
            $edit.handsontable('alter', 'insert_row', 0);
        });

        $('#addbottom').on('click', function () {
            $edit.handsontable('alter', 'insert_row');
        });

        var selection = $edit.handsontable('getSelected');
        $('.deletebutton').on('click', function () {
            $edit.handsontable('alter', 'remove_row', selection[0], selection[2]);
        });

    }

    editRows();
  });

这是我的小提琴http://jsfiddle.net/EfhqJ/48/。

感谢。

Answer 1

你的“选择”变量在onClick处理程序的范围内不可见。

尝试将“var selection = ...”移动到处理函数中。有点像...

    $('.deletebutton').on('click', function () {
        var selection = $edit.handsontable('getSelected');
        $edit.handsontable('alter', 'remove_row', selection[0], selection[2]);
    });

Answer 2

目前看来，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...'); } });

希望这有帮助，如果您还有其他需要，请告诉我们！

Answer 3

您只需要将outsideClickDeselects: false添加到构造函数选项中，然后您将获得getSelected（）的正确结果。

这是现场演示What's the difference between dependencies, devDependencies and peerDependencies in npm package.json file?

Handsontable删除多行

3 个答案: