handsontable自定義渲染

loonggg 發(fā)布于2019-08-22 11:20 / 950人閱讀

摘要：在單元格屬性配置中調(diào)用自定義的渲染方法調(diào)用首行渲染方法調(diào)用自定義渲染方法或者直接在中調(diào)用屬性這樣就能使用自定義的渲染方法了是元素，是事件名，是事件處理函數(shù)。

hansontable的渲染定義方式有多種，常見的有NumericRenderer、TextRenderer、CheckboxRenderer，但他們都是通過registerRenderer來渲染的，registerRenderer是hansontable的渲染公用方法，其他的渲染都是在此基礎(chǔ)上擴(kuò)展的。

那么我們需要自定義一個文本渲染該如何實(shí)現(xiàn)呢？請跟我來：

首先需要定義你自己的渲染方法

var MyRenderer = function (instance, td, row, col, prop, value, cellProperties) {  
    Handsontable.renderers.TextRenderer.apply(this, arguments);  
    $(td).css("text-align", cel[k].align);  
    $(td).css("vertical-align", cel[k].valign);  
  }）;

這里的instance是hansontable的核心方法接口對象，td是一個渲染的單元格，value是單元格的值，cellProperties是單元格的渲染方法對象，其中包含一個renderer屬性，定義了該用那種渲染方式。
Handsontable.renderers.TextRenderer.apply(this, arguments);
這句話不可少。其含義是將自定義方法中的配置信息通過hansontable的Text渲染應(yīng)用到當(dāng)前window對象上。this表示當(dāng)前window對象，arguments表示渲染方法中的7個參數(shù)，是一個參數(shù)數(shù)組。

在單元格屬性配置中調(diào)用自定義的渲染方法

cells: function (row, col, prop) {  
              var cellProperties = {};  
              if (row === 0 || this.instance.getData()[row][col] === "readOnly") {  
                  cellProperties.readOnly = true;  
              }  
              if (row === 0) {  
                 cellProperties.renderer = firstRowRenderer;//調(diào)用首行渲染方法   
              }  
              else {  
                cellProperties.renderer = MyRenderer;//調(diào)用自定義渲染方法  
              }  
                return cellProperties;  
 }

或者直接在cells中調(diào)用renderer屬性

cells: function(row, col, prop) {  
    this.renderer = myRenderer;       
}

這樣就能使用自定義的渲染方法了

Handsontable.dom.removeEvent(document, eventName, function(){});  
Handsontable.dom.addEvent(document, eventName, function(){});

document是dom元素，eventName是事件名，function(){}是事件處理函數(shù)。

例如：

Handsontable.dom.addEvent(document.body, "click", function (e) {
                
    var element = e.target || e.srcElement;
                
    if (element.nodeName == "BUTTON" && element.name == "dump") {
        var name = element.getAttribute("data-dump");
        var instance = element.getAttribute("data-instance");
        var hot = window[instance];
        console.log("data of " + name, hot.getData());
    }
});