本文主要介绍在使用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. display 的 32 种写法

    从大的分类来讲, display的 32种写法可以分为 6个大类,再加上 1个全局类,一共是 7大类: 外部值 内部值 列表值 属性值 显示值 混合值 全局值 外部值 所谓外部值,就是说这些值只会直接 ...

  2. spring core 与 context理解

    Spring core是核心层,拥有这BeanFactory这个强大的工厂,是所有bean的管理器: 而spring context是上下文运行环境,基于spring core之上的一个架构, 它之上 ...

  3. 几种优化ajax的执行速度的方法

    1.尽量使用局部的变量,而不使用全局变量: 2.优化for循环 3.尽量少用eval,每次使用eval都需要消耗大量的时间: 4.将DOM节点放在文档上. 5.尽量减少点好(.)操作符号的使用

  4. Java基础系列--集合之ArrayList

    原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/8494618.html 一.概述 ArrayList是Java集合体系中最常使用,也是最简单 ...

  5. 五子棋的判断输赢规则 -- java编程（简单优化完整版）

    五子棋的判断输赢规则代码 -- 完整优化版 一.前言 之前浏览过很多网上的方法,但总找不到比较完整,也get不到其他大神的思路,就直接画图分析,分析了之后就有了如下的代码,当然还想到更加优化的一种,只 ...

  6. HDU - 1175 bfs

    思路:d[x][y][z]表示以z方向走到(x, y)的转弯次数. 如果用优先队列会超时,因为加入队列的节点太多,无用的节点不能及时出队,会造成MLE,用单调队列即可. AC代码 #include & ...

  7. Java线程的六种状态

    java线程有很多种状态,最主要的有六种,被创建.运行.睡眠.等待.阻塞以及消亡六种,也有很多归结为5种,把睡眠以及等待归结为冻结: 被创建:就是线程被创建,就是new thread()之后就是创建一 ...

  8. docker 数据卷之进阶篇

    笔者在<Docker 基础 : 数据管理>一文中介绍了 docker 数据卷(volume) 的基本用法.随着使用的深入,笔者对 docker 数据卷的理解与认识也在不断的增强.本文将在前 ...

  9. Ubuntu 11.04 NFS 配置

    安装 NFS 相关组件 sudo apt-get install nfs-kernel-server 增加 NFS 目录 sudo gedit /etc/exports #在文件中添加如下内容 /va ...

  10. 小说接入UC浏览器内核技术对话（二）

    质辛@灿岩 质辛跟我们说一下那个删除文件的逻辑吧质辛@灿岩  应该不是删除cache下所有文件吧?质辛质辛@智鹰  提供一下我们的临时文件完整路径给 灿岩吧质辛@智鹰  是负责我们ucsdk的 技术对 ...