本文主要介绍在使用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. 装x玩法：插上你的专有U盘才能开机

    玩法的效果是这样的: 1.插上你的专有U盘,按电脑开机按钮,电脑正常启动运行: 2.如果不插专有优U盘,按电脑开机按钮,进入桌面后1秒钟电脑自动关机,无法使用.也就是说,没有优U盘将无法使用你的电脑. ...

  2. Java JMS 程序基础 与 ActiveMQ 安装（一）

    一 ActiveMQ安装 从Apache官网上下载 ActivieMQ的安装包 apache-activemq-5.9.1-bin.tar.gz, 并拷贝到linux的安装目录解压 # tar -zx ...

  3. js的call和apply拾遗

    一.产生背景 1. JavaScript 的函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念 2.正因为上下文的不同所以call 和 apply 都是为了改变某个函数运行 ...

  4. ubuntu重启、关机命令

    重启命令 :     1.reboot     2.shutdown -r now 立刻重启    3.shutdown -r 10 过10分钟自动重启    4.shutdown -r 20:35 ...

  5. APP性能测试（电量）

    #encoding:utf-8 import csv import os import time #控制类 class Controller(object): def __init__(self, c ...

  6. SecureCRT + Tmux 分屏 高效开发

    最近发现了SecureCRT的一些好玩的功能, 具体如下: 1. 发送消息到所有的终端 首先选中查看-->交互窗口 此时会看到下面出现一个输入窗口 然后, 右击选择"发送交互到所有标签 ...

  7. tcp/ip 卷一 读书笔记（2）物理层和链路层网络

    物理层和链路层网络 术语 链路 是一对相邻结点间的物理线路,中间没有任何其他的交换结点. 数据链路 除了物理线路外,还必须有通信协议来控制这些数据的传输. 帧 数据链路层的协议数据单元(PDU) 串行 ...

  8. ARM-LINUX自动采集温湿度传感器数据

    开机root自动登录 如果想在超级终端输入回车,登录后执行,则可以在/etc/profile中加入命令: 如果实现开机自动登录,在/etc/inittab中修改,每个开发板修改的方式可能都不同. ht ...

  9. 借鉴mini2440的usb-wifi工具集在Beagleboard上移植无线网卡

    配置minicom: sudo yum install minicom sudo minicom -s 选择Serial port setup,此时所示光标在"Change which se ...

  10. c#判断外部可执行程序是否已打开（若未打开则打开）

    #region 通过当前代码执行路径向上找到相关exe,并根据processes.Length判断是否已启动 private bool CheckAndOpenExe(string exeName) ...