js的Handsontable表格的使用说明,如何增加格子样式

js/nodejs 专栏收录该内容
6 篇文章 0 订阅

最近使用到了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一些心得,有什么使用问题请联系我。

  • 1
    点赞
  • 8
    评论
  • 7
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

评论 8 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

gohxc

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值