博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
handsontable自定义渲染
阅读量:6334 次
发布时间:2019-06-22

本文共 1952 字,大约阅读时间需要 6 分钟。

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

转载地址:http://orioa.baihongyu.com/

你可能感兴趣的文章
六年心路成长 —— 做自己
查看>>
ios电话拨打进行监听电话状态
查看>>
京东基于Spark的风控系统架构实践和技术细节
查看>>
什么时候使用CountDownLatch
查看>>
C#之MemberwiseClone与Clone
查看>>
Android性能优化之利用Rxlifecycle解决RxJava内存泄漏
查看>>
转: 如何为你的开源项目选择一个合适的开源协议?
查看>>
关系型数据库和NOSQL数据库对比
查看>>
Atitit 记录方法调用参数上下文arguments
查看>>
webstorm常用功能FTP,及常用快捷键
查看>>
eclipse html 打开方式
查看>>
[求助] win7 x64 封装 出现 Administrator.xxxxx 的问题
查看>>
人类投资经理再也无法击败电脑的时代终将到来了...
查看>>
一个最小手势库的实现
查看>>
HoloLens开发手记 - Vuforia开发概述 Vuforia development overview
查看>>
Android支付之支付宝封装类
查看>>
<亲测>CentOS中yum安装ffmpeg
查看>>
【分享】马化腾:产品设计与用户体验
查看>>
【机器学习PAI实践十】深度学习Caffe框架实现图像分类的模型训练
查看>>
全智慧的网络:思科十年来最具颠覆性的创新
查看>>