Handsontable 복수 행 삭제

Question

Handsontable을 처음 사용했습니다. 'getSelected'및 '변경'메서드 (remove_row)를 사용하여 선택한 여러 테이블 행을 삭제하려고합니다. 그러나 아래 코드를 사용하면 Firebug 및 "Uncaught TypeError : 정의되지 않은 속성 '0'을 Chrome에서 읽을 수 없다는 오류"선택 "이 발생합니다. 내가 선택한 행이나 얼마나 많은 행이든 상관 없습니다. 나는 여전히 오류가 발생하고 행이 삭제되지 않습니다. 나는 무엇을 잘못하고 있니?

$(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 = ..."을 핸들러 함수로 옮겨보십시오. 꽤 기능 handsontable 참조 이후 큰 문제입니다 뭔가 같은 ...

$('.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()]; 
    //} 
    } 

. 그러나 다행스럽게도 afterSelectionEnd event을 사용할 수 있습니다. 이 alter('remove_row')를 사용하기 위해 의미

alter ('remove_row', index: Number, amount: Number (Optional), source: String (Optional))

Remove the row(s) at given index. Default amount equals 1

API에 따르면

afterSelectionEnd (r: Number, c: Number, r2: Number, c2: Number)
Callback fired after one or more cells are selected (on mouse up).

Parameters:
r selection start row
c selection start column
r2 selection end row
c2 selection end column

는, 우리는 인덱스를 제공해야합니다.

---

여기는 working demo입니다. 원하는 결과를 얻으려고했습니다.

참고 :

인해 bug A를, 우리는 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()의 올바른 결과를 얻을 수 있습니다.

여기에 라이브 데모가 있습니다. http://jsfiddle.net/czz82kL5/2/