js的Handsontable表格的使用說明，如何增加格子樣式

最近使用到了html和js的表格插件Handsontable，

例子代碼如下

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];
    }
}

　　

資源網站大全 https://55wd.com 我的007辦公資源網站 https://www.wode007.com

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一些心得。