常用配置

  • 1、固定行列位置
1
2
fixedRowsTop:行数       //固定顶部多少行不能垂直滚动
fixedColumnsLeft:列数   //固定左侧多少列不能水平滚动
  • 2、拖拽行头或列头改变行或列的大小
1
2
3
4
5
//当值为true时，允许拖动，当为false时禁止拖动
manualColumnResize:true/false

//当值为true时，允许拖动，当为false时禁止拖动
manualRowResize:true/false
  • 3、延伸列的宽度
1
2
//last:延伸最后一列,all:延伸所有列,none默认不延伸。
stretchH：last/all/none
  • 4、拖动行或列到某一行或列之后 
1
2
3
4
5
6
7
当值为true时，列可拖拽移动到指定列
manualColumnMove：true/false 

当值为true时，行可拖拽至指定行
manualRowMove:true/false 

移动的时候鼠标需选中行线或列线才行。
  • 5、设置当前行或列的样式
1
2
3
currentRowClassName：当前行样式的名称

currentColClassName：当前列样式的名称
  • 6、行分组或列分组
1
2
3
groups:[{cols:[0,2]},{cols:[3,5]},{rows:[0,4]},{rows:[5,7]}]

上面的例子介绍了4个分组，第0-2列为一组，第3-5列为第二组，第0-4行为一组，第5-7列为第二组。分组可在行头或列头看见，分组可被展开或隐藏。
  • 7、允许排序
1
2
3
4
5
6
7
8
9
10
11
12
13
columnSorting：true/false/对象 //当值为true时，表示启用排序插件

当值为true时，排序插件的使用可通过点击列头文字实现。当值为false时表示禁用排序。当值为对象时，该对象包含两个属性：column：列数。sortOrder：true/false，升序或降序，true为升序排列。当用对象启动插件后可用如下方式禁用插件：

hot.updateSettings({
    columnSorting:false
});

排序的使用也可已直接调用sort()方法实现。如下操作：

if(hot.sortingEnabled){
    hot.sort(行数，true/false); //true为升序，false为降序
}
  • 8、数据显示
1
2
3
4
5
data：[[第一行数据],[第二行数据],...[第n行数据]]/对象数组

获取数据的方法：hot.getData()。

加载数据的方法：hot.loadData(data)。
  • 9、右键菜单展示
1
2
//当值为true时，启用右键菜单，为false时禁用	
contextMenu：true/false/自定义数组
  • 10、自适应列大小
1
2
//当值为true且列宽未设置时，自适应列大小
autoColumnSize：true/false
  • 11、最小，最大设置
1
2
3
4
5
6
minCols：最小列数
minRows：最小行数
minSpareCols：最小列空间，不足则添加空列
maxCols：最大列数
maxRows：最大行数
minSpareRows：最小行空间，不足则添加空行
  • 12、自定义边框设置，可以进行初始化配置，如下：
1
2
customBorder:true;
customBorders:[{range:{from:{row:行数,col:列数},to:{row:行数,col:列数},上下左右设置}]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
hot = Handsontable(container, {
    data: Handsontable.helper.createSpreadsheetData(200, 20),
    rowHeaders: true,
    fixedColumnsLeft: 2,
    fixedRowsTop: 2,
    colHeaders: true,
    customBorders: [
      {
        range: {//多个单元格
          from: {//起始位置
            row: 1,
            col: 1
          },
          to: {
            row: 3,
            col: 4
          }
        },
        top: {//结束位置
          width: 2,
          color: '#5292F7'
        },
        left: {
          width: 2,
          color: 'orange'
        },
        bottom: {
          width: 2,
          color: 'red'
        },
        right: {
          width: 2,
          color: 'magenta'
        }
      },
      {//单一单元格
        row: 2,
        col: 2,
        left: {
          width: 2,
          color: 'red'
        },
        right: {
          width: 1,
          color: 'green'
        }
      }]
})
  • 13、单元格合并配置，如下：
1
2
mergeCells:true
mergeCells: [{row: 起始行数, col: 起始列数, rowspan: 合并行数, colspan:合并列数 },...]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
if(key == "merge") {
    if(hot.mergeCells.mergedCellInfoCollection.length > 0) {
        for(var k=0; k<hot.mergeCells.mergedCellInfoCollection.length; k++) {
            if(hot.mergeCells.mergedCellInfoCollection[k].row == row &&
                hot.mergeCells.mergedCellInfoCollection[k].col == col) {
                    hot.mergeCells.mergedCellInfoCollection.splice(k,1);
                    return;
                }else{
                    hot.mergeCells.mergedCellInfoCollection.push({"row": row, "col": col, 
                    "rowspan": rowspan, "colspan": colspan});
                    break;
                }
            }
    } else {
        hot.mergeCells.mergedCellInfoCollection.push({"row": row, "col": col, "rowspan": rowspan, "colspan": colspan});
｝

常用方法

怎样获得行标题和列标题的名称？

getRowHeader

getColHeader

怎么根据列名称得到列索引，根据列索引得到列名称？

propToCol

colToProp

表格的行数和列数？

countRows

countCols

操作单元格？

getCell(1,1) //获得单元格对象

selectCell(2,2)

getSelected() //返回坐标，如2,2,2,2

获得表格中某个范围range的数据？

getData(0,4)

getData(1,1,2,2)

getDataAtCell(1,3)

getDataAtRow(row)

getDataAtCol(col)

getDataAtRowProp(row, name)

setDataAtCell(row, col, val)

getActiveEditor

复制，粘贴？

getCopyableData

copyPaste.triggerPaste(event, val)

其他

$(‘#id’).handsontable(‘getInstance’);

$(‘#id’).handsontable(‘getData’);

$(‘#id’).handsontable(‘loadData’, data);

$(‘#id’).handsontable(‘destroy’);

specialSettings.afterGetColHeader

var finialSettings = $.extend(true, initialSettings, specialSettings);

$(‘#id’).handsontable(finialSettings);

beforeChange: function (changes, source) {}

beforeKeyDown: function(event, coords, td){}

afterOnCellMouseDown: function(event, coords, td){}

afterRender: function(isForced) {}

自定义插件

  1. 初始化时绑定自定义插件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
columnShift.data = data;
columnShift.renderer = 'html';
columnShift.editor = 'ShiftEditor'; 
columnShift.shiftTypes = shiftTypesDictionary;
columnShift.shiftMarks = shiftMarkInfo;
columnShift.specialSchedule = specialScheduleNames;
columnsDataBinding.push(columnShift);

var specialSettings = {
    colHeaders: colHeaders,
    autoRowSize: true,
    mergeCells: true,
    columns: columnsDataBinding
};
  1. 自定义插件配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
(function (Handsontable) {
    var ShiftEditor = Handsontable.editors.BaseEditor.prototype.extend();
    var filter = "";
    ShiftEditor.prototype.init = function () {
        this.rootElement = document.createElement('DIV');
        this.rootElement.className = 'shiftEditorRoot';
        this.ULElement = document.createElement('TABLE');
        this.ULElement.className = 'ShiftEditor';
        this.ULElement.style.display = 'none';
        this.ULElement.style.top = 0;
        this.ULElement.style.left = 0;
        this.ULElement.style.listStyle = 'none';
        this.instance.rootElement.appendChild(this.ULElement);
    };
  
    ShiftEditor.prototype.prepare = function (event) {
        var filterWord = filter;
        Handsontable.editors.BaseEditor.prototype.prepare.apply(this, arguments);

        var handsontableInstance = $('#handsontable').handsontable('getInstance');
        var empType = handsontableInstance.getDataAtRowProp(arguments[0], 'EmployeeWorkIdentity');

        shiftTypes = this.cellProperties.shiftTypes[empType] == undefined ? this.cellProperties.shiftTypes['公共'] : this.cellProperties.shiftTypes[empType];
        shiftMarks = this.cellProperties.shiftMarks;

        Handsontable.Dom.empty(this.ULElement);
		### //dosomething
    };

    ShiftEditor.prototype.getValue = function () {
        var returnString = "";
		### //dosomething
		return returnString;
    };

    ShiftEditor.prototype.saveValue = function (val, ctrlDown) {
        this.instance.setDataAtCell(this.row, this.col, val);
    };
    ShiftEditor.prototype.setValue = function () {
        var orgVal = this.originalValue;
		### //dosomething
    };

    ShiftEditor.prototype.finishEditing = function (restoreOriginalValue, ctrlDown, callback) {
        if (this.state == Handsontable.EditorState.EDITING) {
            if (restoreOriginalValue) {
                this.cancelChanges();
                return;
            }

            var val = this.getValue();
            this.state = Handsontable.EditorState.WAITING;

            this.saveValue(val, ctrlDown);

            if (this.instance.getCellValidator(this.cellProperties)) {
                var that = this;
                this.instance.addHookOnce('afterValidate',
                    function (result) {
                        that.state = Handsontable.EditorState.FINISHED;
                        that.discardEditor(result);
                    });
            } else {
                this.state = Handsontable.EditorState.FINISHED;
                this.discardEditor(true);
            }
        }
    };

    ShiftEditor.prototype.focus = function () {
		### //dosomething
    };
   
    ShiftEditor.prototype.open = function () {
		### //dosomething
        //this.refreshDimensions();
    };

    ShiftEditor.prototype.close = function () {
        this.ULElement.style.display = 'none';
    };

    Handsontable.editors.ShiftEditor = ShiftEditor;
    Handsontable.editors.registerEditor('ShiftEditor', ShiftEditor);

})(Handsontable);

参考资料

https://www.jianshu.com/p/924481947c30

https://www.cnblogs.com/cosyer/p/6741546.html?utm_source=itdadao&utm_medium=referral