handsontable自定义渲染

loonggg 发布于2019-08-22 11:20 / 911人阅读

摘要：在单元格属性配置中调用自定义的渲染方法调用首行渲染方法调用自定义渲染方法或者直接在中调用属性这样就能使用自定义的渲染方法了是元素，是事件名，是事件处理函数。

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

GPU云服务器云服务器 webrtc 自定义音频渲染自定义头像自定义网站自定义

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92208.html

handsontable初步认知

摘要：待更新左上角单元格赋值问题，通过改源码实现。下拉单元格高度修改，定位元素修改时下拉列表的最后一个显示不全，有。 hansontable简介是一个在线类似Excel的表格编辑器,支持丰富的展现和交互,有多样的单元格类型供配置。核心是由原生JavaScript构建,充分模块化,支持自定义build。除了核心表格渲染(实质就是js操作table,计算元素位置,自定义绑定事件处理),大部...

mrcode 2019-08-20 14:13 评论0 收藏0
handsontable初步认知

摘要：待更新左上角单元格赋值问题，通过改源码实现。下拉单元格高度修改，定位元素修改时下拉列表的最后一个显示不全，有。 hansontable简介是一个在线类似Excel的表格编辑器,支持丰富的展现和交互,有多样的单元格类型供配置。核心是由原生JavaScript构建,充分模块化,支持自定义build。除了核心表格渲染(实质就是js操作table,计算元素位置,自定义绑定事件处理),大部...

wslongchen 2019-08-01 16:16 评论0 收藏0
js-xlsx + handsontable + echarts实现excel上传编辑然后显示成图表

摘要：生成报表数据都处理完了之后，就是生成报表了，报表这里稍微做的灵活了一点，是要让用户根据上传的数据，自己选择字段，然后用去生成对应的报表。 js-xlsx + handsontable + echarts 实现在前端导入excel数据并生成echart报表前言最近都在做类似 ERP 的项目,所以呢,又碰到一个比较变态的需求(至少对我来说是),在前端导入 excel 文件,然后在浏览器...

joy968 2019-08-23 12:03 评论0 收藏0
Handsontable 类似 excel 表格编辑器

摘要：原文发布于个人博客欢迎访问简介是一个类似表格编辑器，支持丰富的展现和交互，以及多样的单元格展现和配置核心由原生编写，通过打包同类项目中，点赞最多，列表官网地址支持的特征的一些主要功能这里只列出主要功能，想了解更多更能，可以查询官方文档。这原文发布于个人博客>>欢迎访问 HandsonTable 简介 Handsontable 是一个类似 excel 表格编辑器，支持丰富的展现和交互...

ztyzz 2019-08-20 18:13 评论0 收藏0
Handsontable 类似 excel 表格编辑器

摘要：原文发布于个人博客欢迎访问简介是一个类似表格编辑器，支持丰富的展现和交互，以及多样的单元格展现和配置核心由原生编写，通过打包同类项目中，点赞最多，列表官网地址支持的特征的一些主要功能这里只列出主要功能，想了解更多更能，可以查询官方文档。这原文发布于个人博客>>欢迎访问 HandsonTable 简介 Handsontable 是一个类似 excel 表格编辑器，支持丰富的展现和交互...

villainhr 2019-08-01 17:12 评论0 收藏0