最近使用到了html和js的表格插件Handsontable，官网地址： https://handsontable.com/ 

例子代码如下

var hot=new Handsontable(table_div, {
        data: null,//表格数据  一般是二维数组[[]]
        colHeaders: true,//显示列头
        rowHeaders: true,//显示行头
        manualColumnResize: true,//控制列的大小
        manualRowResize: true,//控制行的大小
        colWidths: Handson_colWidths,//列宽度 可以指定一个数字、数组、函数
        rowHeights: Handson_rowHeights,//行高度  同上
        startCols: 5,//起始列数  数据data为null有效
        startRows: 5,//起始行数
        contextMenu: true,//显示右键菜单
        width: 580, //表宽 多余自动显示滚动条
        height: 320,//表高
        mergeCells: [],//数组 格子合并对象{row,col,rowspan,colspan}
        afterBeginEditing: afterBeginEditing,//开始编辑
        language: 'zh-CN',//中文显示
        renderer: Handson_renderer,//渲染
        outsideClickDeselects: outsideClickDeselects, //点击其他地方触发
        afterRender:afterRender,//完成渲染以后
    });

以上是示例代码，说明如下 
table_div一般是一个div对象 用 document.getElementById('div的ID')获取

选项特别说明： 
data:一般使用二维数组，格子的样式可以使用另一个对象使用。 
manualColumnResize：控制列的大小，要配合colHeaders显示以后才好调整，比如需要设计一个表格，设计的时候需要调整行列大小，设计完成使用的时候可以不需要，有点像制作各种报表。 
colWidths: Handson_colWidths 这里写成函数比较好控制。

function Handson_colWidths(col) {
        var tt = dataStyle.colWidths[col];//dataStyle 数据样式。
        return tt || 100;//没有设置的时候默认一个
 }

mergeCells ：合并后的格子 {row,col,rowspan,colspan} rowspan合并的行数 
afterBeginEditing：编辑格子触发以后调用

function afterBeginEditing(row, col) {
        var editobj = hot.getActiveEditor();//当前编辑的对象
        var nowcell = editobj.TD; //当前编辑的格子
        editobj.textareaStyle.color = nowcell.style.color;//获取当前编辑格子的颜色
        nowcell.innerHTML = ""; //这个主要是解决上面颜色透明的问题
        //其他样式自由添加
}

outsideClickDeselects：点击格子以外的地方会触发 默认是自动取消选择的格子

function outsideClickDeselects(htmlEle) {
        if(htmlEle) {
            var i = 0;
            var nowele = htmlEle;
            while(i < 5 && nowele) {
                i++;
                if(nowele.id == "paintcolor") {
                    return false;//点击颜色选择的时候不需要取消
                }
                nowele = nowele.parentNode;
            }
        }
        return true;//取消
}

renderer: 渲染

function Handson_renderer(instance, td, row, col, prop, value, cellProperties) {
    Handsontable.renderers.TextRenderer.apply(this, arguments);
    //以下只是设置格子的样式 color，backgroundColor，textAlign，fontSize等css样式都可以使用，大家自由发挥 背景还可以透明"transparent"
    var allstyle = dataStyle["all"];//获取全局样式
    var tconf = {}; //当前样式
    for(var sty in allstyle ) {
        tconf[sty] = allstyle [sty];//拷贝全局样式
    }
    var cellconf = dataStyle.cells[row + "_" + col];//获取指定格子的样式
    if(cellconf) {
        for(var sty in cellconf) {
            if(cellconf[sty]) {
                tconf[sty] = cellconf[sty];
            }
        }
    }
    for(var sty in tconf ) {
        td.style[sty] = tconf[sty];
    }
}

afterRender:渲染以后，这个一般不需要。这个方法会调用多次，比如第一次完成表格渲染后会导致重新排列或者是合并格子就又会渲染一次。 
本人使用这个方法是需要表格生成图片，使用html2canvas

var isdraw=false;
afterRender: function() { //完成渲染以后 可能会多次
            if(!isdraw) {//防止调用多次
                isdraw = true;
                setTimeout(function() {//间隔调用  渲染多次也会很快结束 延迟下即可
                    html2canvas(outdiv, {
                        backgroundColor: null, //透明
                        useCORS: true,
                        scale: 2
                    }).then(function(canvas) {
                        var Pic = canvas.toDataURL("image/png");
                    });
                }, 200);
            }
        }

以上就是使用Handsontable一些心得。来源：https://blog.csdn.net/xianchanghuang/article/details/82425418

链接: https://fly63.com/article/detial/1058