handsontable-常用配置

凍結單元格

var
    //自動創建數據
    myData = Handsontable.helper.createSpreadsheetData(100, 50),
    container = document.getElementById('example1'),
    positions = document.getElementById('positions'),
    hot;

  hot = new Handsontable(container, {
    data: myData,
    colWidths: [47, 47, 47, 47, 47, 47, 47, 47, 47, 47],
    //顯示行頭和列頭
    rowHeaders: true,
    colHeaders: true,
　　 //凍結單元格
    fixedRowsTop: 2,
    fixedColumnsLeft: 2
  });

  setInterval(function () {
    var str = '';
　　 //獲得可見首行的序號
    str += 'RowOffset: ' + hot.rowOffset();

    positions.innerHTML = str;
  }, 100);

手動調整行列大小

 var
    container = document.getElementById('example1'),
    hot;

  hot = new Handsontable(container, {
    data: Handsontable.helper.createSpreadsheetData(200, 10),
    rowHeaders: true,
    colHeaders: true,
　　 //設置列的寬度
    colWidths: [55, 80, 80, 80, 80, 80, 80],
    //設置行的寬度，第四行是默認的
    rowHeights: [50, 40, 100],
    //手動調整列的寬度
    manualColumnResize: true,
    manualRowResize: true
  });

滾動行列

http://docs.handsontable.com/0.16.0/demo-scrollbars.html

列的擴展

 var
    container1 = document.getElementById('example1'),
    hot1;

  hot1 = new Handsontable(container1, {
    data: Handsontable.helper.createSpreadsheetData(40, 6),
    colWidths: 47,
    rowHeaders: true,
    colHeaders: true,
　　//擴展最后一列，其他列的寬度是47
    stretchH: 'last',
   //把table的寬度設為容器的寬度，列平分寬度
　　 stretchH: 'all',
　　//默認值
　　stretchH: 'none',
　　//右鍵可用，默認為undefined
    contextMenu: true
  });

列的凍結：需要開啟contextMenu

var
    myData = Handsontable.helper.createSpreadsheetData(200, 100),
    container = document.getElementById('example1'),
    hot;

  hot = new Handsontable(container, {
    data: myData,
    rowHeaders: true,
    colHeaders: true,
    fixedColumnsLeft: 2,
    contextMenu: true,
　　//列的手動凍結
    manualColumnFreeze: true
  });

行列的移動：列頭左側，行頭上側

 var
    example1 = document.getElementById('example1'),
    hot;

  hot = new Handsontable(example1, {
    data: Handsontable.helper.createSpreadsheetData(200, 20),
    rowHeaders: true,
    colHeaders: true,
    manualColumnMove: true,
    manualRowMove: true
  });

當前元素高亮

 var
    data = [
      ['', 'Kia', 'Nissan', 'Toyota', 'Honda'],
      ['2013', 10, 11, 12, 13],
      ['2014', 20, 11, 14, 13],
      ['2015', 30, 15, 12, 13]
    ],
    container = document.getElementById('example1'),
    hot;

  hot = Handsontable(container, {
    data: data,
    minRows: 5,
    minCols: 6,
　　//指定當前行的名字
    currentRowClassName: 'currentRow',
　　//指定當前列的名字
    currentColClassName: 'currentCol',
    rowHeaders: true,
    colHeaders: true
  });
  //選擇元素
  hot.selectCell(2,2);

分組：也可以設置groups:true,但是這種方式沒有涉及到細節

 var
    example1 = document.getElementById('example1'),
    settings,
    hot;

  settings = {
    data: Handsontable.helper.createSpreadsheetData(200, 20),
    rowHeaders: true,
    colHeaders: true,
    groups: [
      {
        cols: [0, 2]
      },
      {
        cols: [3, 7]
      },
      {
        cols: [5, 7]
      },
      {
        rows: [0, 4]
      },
      {
        rows: [5, 7]
      },
      {
        rows: [2, 4]
      }
    ]
  };
  hot = new Handsontable(example1, settings);

Pre-populating new rows　

Sorting data

可以使用array.prototype.sort(),排好序之后，在render(),不過這樣會改變數據源的結構。如果想保持數據源不被破壞，需要使用如下方法：

columnSorting為true，表示可以排序，但是還沒排好序

columnSorting為object，配置一些參數

檢查是否開啟排序

hot.sortingEnabled ? doSomething() : doSomethingElse();

是否排好序

return hotInstance.sortingEnabled && typeof hotInstance.sortColumn !== 'undefined';
//sortOrder is true, then the order is ascending, otherwise, the order is descending.

排序的三種方法

1、columnSorting
2、點擊表頭：最常用
3、調用sort():如果開啟了columnSorting，則可以使用sort(0, false)方法

 

　

Pagination　

http://docs.handsontable.com/0.16.0/demo-pagination.html#3