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