handsontable自定义渲染

hansontable的渲染定义方式有多种，常见的有NumericRenderer、TextRenderer、CheckboxRenderer，但他们都是通过registerRenderer来渲染的，registerRenderer是hansontable的渲染公用方法，其他的渲染都是在此基础上扩展的。

那么我们需要自定义一个文本渲染该如何实现呢？请跟我来：

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

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渲染应用到当前window对象上。this表示当前window对象，arguments表示渲染方法中的7个参数，是一个参数数组。

• 在单元格属性配置中调用自定义的渲染方法

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;//调用首行渲染方法   
              }  
              else {  
                cellProperties.renderer = MyRenderer;//调用自定义渲染方法  
              }  
                return cellProperties;  
 } 

或者直接在cells中调用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(){}是事件处理函数。

例如：

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());
    }
});