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