本文主要介绍在使用Handsontable过程中，对加载的数据进行字体颜色、样式（style）、数据格式化，对齐方式的处理，并添加自定义图片和单机事件功能。

　　代码如下：

　　

<!DOCTYPE html>

<html>

<head>

    <title>handsontable demo</title>

    <meta charset="utf-8">

    <link rel="stylesheet" href="handsontable/htstyle.css">

    <link rel="stylesheet" href="handsontable/htstyle-custom.css">

    <script src="handsontable/jquery-1.12.1.js"></script>

    <script src="handsontable/handsontable.full.js"></script>

</head>

<body>

    <div id="example"></div>

    <script>

            var data = [

                {riqi:'2017-01',address: '北京', goods:'冰箱',price: '3399',sales: 530,del:''},

                {riqi:'2017-01', address:'天津',goods: '空调', price:'4299',sales: 522,del:''},

                {riqi:'2017-01',address: '上海',goods: '洗衣机',price: '1299',sales: 544,del:''},

                {riqi:'2017-01', address:'广州',goods: '彩电',price: '4599',sales: 562,del:''},

                {riqi:'2017-01', address:'深圳', goods:'热水器', price:'1099',sales: 430,del:''},

                {riqi:'2017-02',address: '重庆',goods: '笔记本电脑',price: '4999',sales: 666,del:''},

                {riqi:'2017-02', address:'厦门',goods: '油烟机',price: '2899',sales: 438,del:''},

                {riqi:'2017-02',address: '青岛',goods: '饮水机', price:'899',sales: 620,del:''},

                {riqi:'2017-02', address: '大连', goods: '手机', price: '1999', sales: 500,del:''}

            ];

            function negativeValueRenderer(instance, td, row, col, prop, value, cellProperties) {

                Handsontable.renderers.TextRenderer.apply(this, arguments);

                if (prop == 'address') {//修改字体颜色

                    td.style.color = '#32CD32';

                    //如果要添加其他样式，可以用以下写法
                    //td.style = 'font-weight: bold;';

                }

                else if (prop == 'price') {

                    //格式化价格数据

                    td.innerText = value != null ? numbro(value).format('0.00') : "";

                }

                else if (prop == 'sales') {

                    //右对齐

                    td.style.textAlign = 'right';

                    td.innerText = value != null ? numbro(value).format('0,0.00') : "";

                }

                else if (prop == 'del') {

                    //添加自定义的图片，并给图片的chick添加事件

                    var escaped = Handsontable.helper.stringify(value),

                      imgdel;

                    imgdel = document.createElement('IMG');

                    imgdel.src = "handsontable/remove.png";

                    imgdel.width = 20;

                    imgdel.name = escaped;

                    imgdel.style = 'cursor:pointer;';//鼠标移上去变手型

                    Handsontable.dom.addEvent(imgdel, 'click', function (event) {

                        hot.alter("remove_row", row);//删除当前行

                    });

                    Handsontable.dom.empty(td);

                    td.appendChild(imgdel);

                    td.style.textAlign = 'center';//图片居中对齐

                    return td;

                }

            }

            Handsontable.renderers.registerRenderer('negativeValueRenderer', negativeValueRenderer);

            var hot = new Handsontable(document.getElementById('example'),{

                data: data,

                colHeaders: ['操作', '日期', '地点', '商品', '单价', '销量'], // 使用自定义列头

                rowHeaders: true,

                colWidths: 150, // 设置所有列宽为150像素

                filters: true,

                columnSorting: true,

                sortIndicator: true,

                autoColumnSize: true,

                manualColumnResize: true,

                undo: true,

                redo: true,

                wordWrap: true,

                copyable: true,

                mergeCells: false,

                manualRowResize: true,

                manualRowMove: true,

                manualColumnMove: false,

                renderAllRows: true,

                allowInsertRow: true,

                allowInsertColumn: false,

                fixedColumnsLeft: 1,

                columns: [ {

                    data: 'del',

                    type: 'text'

                }, {

                    data: 'riqi',

                    type: 'date',

                    dateFormat: 'YYYY-MM-DD'

                },{

                    data: 'address',

                    type: 'text'

                },{

                    data: 'goods',

                    type: 'text'

                },{

                    data: 'price',

                    type: 'numeric'

                },{

                    data: 'sales',

                    type: 'numeric'

                }],

                contextMenu: ['row_above', 'row_below', '---------', 'remove_row','---------','undo','redo','---------','make_read_only','---------','alignment'],

                dropdownMenu: ['filter_by_condition', 'filter_by_value', 'filter_action_bar'],

                cells: function (row, col, prop) {

                    var cellProperties = {};

                    cellProperties.renderer = "negativeValueRenderer";

                    return cellProperties;

                },

            });

    </script>

</body>

</html>

　　需要注意的是在Handsontable中，colHeaders与columns需要一一对应，数据是根据columns中设置的先后顺序加载的，效果如下：

　　

　　如果contextMenu和dropdownMenu不需要原来组件提供的那么多选项，可以像代码中那样写，Handsontable也提供重写方法，可以参考官网：http://docs.handsontable.com/0.16.1/demo-context-menu.html

　　

By QJL

　　

handsontable自定义渲染的更多相关文章

  1. 15、手把手教你Extjs5（十五）各种Grid列的自定义渲染

    Grid各列已经能够展示出来了.列的类型包括字符型,整型,浮点型,货币型,百分比型,日期型和布尔型,我自定义了各种类型的渲染样式: 1.整型:标题栏居中,数值靠右显示,正数颜色为蓝色,负数颜色为红色, ...

  2. PIE SDK矢量自定义渲染

    1. 功能简介 PIE SDK中关于矢量渲染提供了多种方案,包括简单渲染.分级渲染.唯一值渲染,这几种渲染方式具有一定的通用性,可以满足用户绝大多数的需求. 当面对复杂的业务,当前渲染方案无法满足用户 ...

  3. WPF/Silverlight深度解决方案：(九)HLSL自定义渲染特效之完美攻略(下)

    原文:WPF/Silverlight深度解决方案:(九)HLSL自定义渲染特效之完美攻略(下) 本想只用两节来完成关于HLSL自定义渲染相关知识的讲解,鉴于最近非常的多的朋友对此相当感兴趣,想知道最多 ...

  4. WPF/Silverlight深度解决方案：(七)HLSL自定义渲染特效之完美攻略(中)

    原文:WPF/Silverlight深度解决方案:(七)HLSL自定义渲染特效之完美攻略(中) 通过上一节的解说,大家是否已经对HLSL有了较深刻的认识和理解,HLSL的渲染不仅仅局限于静态处理,通过 ...

  5. WPF/Silverlight深度解决方案：(六)HLSL自定义渲染特效之完美攻略(上)

    原文:WPF/Silverlight深度解决方案:(六)HLSL自定义渲染特效之完美攻略(上) Shader Effect种位图特效及2种渲染特效,而Silverlight中仅有这2种渲染特效: Bl ...

  6. 饿了么组件--table组件自定义渲染列，同时伴有v-for和v-if情况

    如题,有一个需求,列数量不固定,在一定条件下,可能会(fixedColumn, A2, A3, A4)或(fixedColumn, B2, B3)情况,其中A2, A3, A4会同时出现,B2, B3 ...

  7. django-上下文渲染器,将后端内容提供给模板使用，自定义渲染器

    使用场景:当同一个类容需要出现在多个模板中, 上下文管理器就是将这个内容以字典的形式返回给所有模板,模板通过 {{ key }}取值. 结构:上下文管理器 文件名一般为context_processo ...

  8. Cocos2d-x 3.x中自定义渲染功能

    1.第一种方法针对的是整个图层的渲染         重写visit()函数,并且在visit()函数中直接向CommandQueue添加CustomCommand,设置好回调函数.          ...

  9. Google Chrome Frame 自定义渲染方式，调用ActiveX

    通过meta段的设置可以控制浏览器的渲染行为,但在一些特殊情况下,meta段的设置无效,我们需要额外的操作以达到目的. 模式1:页面A(IE)iFrame引用页面B(Chrome Frame) 问题描 ...

随机推荐

  1. hdu1061（2015-N1）：1.快速幂；2.找规律

    1.快速幂 原理:求a的b次方,将b转化为二进制数,该二进制位第i位的权是2^(i-1), 例如 11的二进制是1011 11 = 2³×1 + 2²×0 + 2¹×1 + 2º×1 因此,我们将a¹ ...

  2. 2道acm简单题（2013）：1.（时分秒）时间相减；2.主持人和N-1个人玩游戏，每个人说出自己认识的人数，判断其中是否有人说谎。

    /*1.题目:输入一个数,代表要检测的例子的个数,每个例子中:输入两个时间(格式HH:MM : SS),前面时间减去后面时间,输出在时钟上显示的时间,格式一样,如果是以为数字的前面补零.*//**思路 ...

  3. Subsequence Count （线段树）

    Time Limit: 1000 ms   Memory Limit: 256 MB Description 给定一个01串 $S_{1 \cdots n}$ 和 $Q$ 个操作. 操作有两种类型: ...

  4. SpringBoot SpringSecurity4整合,灵活权限配置,弃用注解方式.

    SpringSecurity 可以使用注解对方法进行细颗粒权限控制,但是很不灵活,必须在编码期间,就已经写死权限 其实关于SpringSecurity,大部分类都不需要重写,需要的只是妥善的配置. 每 ...

  5. enable multi-tenancy on openstack pike

    Multi-tenancy 是openstack ironic从Ocata版本开始支持的新特性,通过network-generic-switch插件控制交换机,Ironic可以实现在不同租户间机网络隔 ...

  6. 工业级GBDT算法︱微软开源 的LightGBM（R包正在开发....）

    看完一篇介绍文章后,第一个直觉就是这算法已经配得上工业级属性.日前看到微软已经公开了这一算法,而且已经发开python版本,本人觉得等hadoop+Spark这些平台配齐之后,就可以大规模宣传啦~如果 ...

  7. supervessel-免费云镜像︱GPU加速的Caffe深度学习开发环境

    开发环境介绍 在SuperVessel云上,我们为大家免费提供当前火热的caffe深度学习开发环境.SuperVessel的Caffe有如下优点: 1) 免去了繁琐的Caffe环境的安装配置,即申请即 ...

  8. 如何使用DirectDraw直接显示RGB、YUV视频数据（播放yuv）

    #include "draw.h"void CTest100Dlg::OnButton1() { // TODO: Add your control notification ha ...

  9. Java中private、protected和public作用域的异同

    Java中private.protected和public作用域的异同 说明:(1)private的作用范围为当前类,protected的作用范围哦不能超过其他包: (2)区别不同的作用域的不同作用范 ...

  10. NetBeans部署项目（Extjs）报错（二）

    NetBeans部署项目(Extjs)报错(二) 1.具体错误如下: Using CATALINA_BASE: "C:\Users\Administrator.FOXB2MKB3RGUNIL ...