如何将handson表滚动条移动到特定的行和列..?

时间:2014-09-16 05:47:20

标签: handsontable

我正在尝试找出一种方法或方法,通过该方法或方式,我可以将指南表滚动到特定的行和列。 我试过用 selectCell(row:Number,col:Number,rows:Number,cols:Number,scrollToSelection:Boolean(Optional))但它似乎不起作用

这里是它的小提琴链接http://jsfiddle.net/hpfvc9bx/

$(document).ready(function () {

  function createBigData() {
    var rows = []
      , i
      , j;

    for (i = 0; i < 1000; i++) {
      var row = [];
      for (j = 0; j < 6; j++) {
        row.push(Handsontable.helper.spreadsheetColumnLabel(j) + (i + 1));
      }
      rows.push(row);
    }

    return rows;
  }

  var maxed = false
    , resizeTimeout
    , availableWidth
    , availableHeight
    , $window = $(window)
    , $example1 = $('#example1');

  var calculateSize = function () {
    if(maxed) {
      var offset = $example1.offset();
      availableWidth = $window.width() - offset.left + $window.scrollLeft();
      availableHeight = $window.height() - offset.top + $window.scrollTop();
      $example1.width(availableWidth).height(availableHeight);
    }
  };
  $window.on('resize', calculateSize);

  var table = $example1.handsontable({
    data: createBigData(),
    colWidths: [55, 80, 80, 80, 80, 80, 80], //can also be a number or a function
    rowHeaders: true,
    colHeaders: true,
    fixedColumnsLeft: 2,
    fixedRowsTop: 2,
    minSpareRows: 1,
    stretchH: 'all',
    contextMenu: true,
      afterChange : function(changes){
          console.log(changes);
      }  
  });

  $('.maximize').on('click', function () {
    maxed = !maxed;
    if(maxed) {
      calculateSize();
    }
    else {
      $example1.width(400).height(200);
    }
    $example1.handsontable('render');
  });

    $("#setSelectedRow").on('click',function(){

        console.log(table);
        table.select(9,3,12,6,true); // not working as it doesnt move scroll bar to specified column and range


    })

  function bindDumpButton() {
      $('body').on('click', 'button[name=dump]', function () {
        var dump = $(this).data('dump');
        var $container = $(dump);
        console.log('data of ' + dump, $container.handsontable('getData'));
      });
    }
  bindDumpButton();

});

任何人都可以帮助我......

提前谢谢......

1 个答案:

答案 0 :(得分:4)

您可以使用免提的"selectCell"移动到特定的单元格。

您在table.select(...)中使用$("#setSelectedRow").on('click',function(){.... 它不会像你使用表DOM元素那样工作,但是你需要拥有handontable的“实例”。可以这样做,

第一种方式:

var tblInstance = $example1.handsontable('getInstance');

然后将"selectCell()"应用为

tblInstance.selectCell(rowNum, colNum);

第二种方式:

使用$example1.handsontable("selectCell", rowNum, colNum);

请参阅fiddle for the second way,其中:

$("#setSelectedRow").on('click',function(){        
    console.log(table);        
    $example1.handsontable("selectCell", 9, 5);  // select 9th row's 5th column

})

希望这会对你有所帮助:)。