本文主要介绍在使用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. 通过修改注册表设置windows环境变量

    开发环境搭建每次都要设置很多环境变量, 一般是通过  [菜单]->[计算机]->[属性]->[高级设置]->[环境变量]进行设置,重装系统后,每次都要设置很多环境变量,很麻烦. ...

  2. CentOs下 SVN版本控制的安装（包括yum与非yum）

    一.yum安装 rpm -qa subversion //检查是否安装了低版本的SVN yum remove subversion //如果存储旧版本,卸载旧版本SVN 开始安装 yum -y ins ...

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

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

  4. POJ - 1860 Bellman-Ford判正环

    心累,陕西邀请赛学校不支持,可能要自费了.. 思路:套用Bellman-Ford判断负环的思路,把大于改成小于即可判定是否存在从源点能到达的正环.如果存在正环,那么完全多跑几次正环就可以把钱增加到足够 ...

  5. typeahead + JDK 8 并行流 + redis 高速即时查询.

    感谢JDK8,让我们JAVA 程序员暂时不用担心失业. 有些情况,需要根据用户输入值,即时查询数据库,MYSQL显然不再适合这种业务. mongoDB看似最适合,但是为了这么一个破功能,也不值得特意去 ...

  6. ActiveMq笔记2-消息持久化

    为了避免意外宕机以后丢失信息,需要做到重启后可以恢复消息队列,消息系统一般都会采用持久化机制. ActiveMQ的消息持久化机制有JDBC,AMQ,KahaDB和LevelDB, 无论使用哪种持久化方 ...

  7. 讯飞语音JavaWeb语音合成解决方案

    在线语音合成 将文字信息转化为声音信息,给应用配上"嘴巴".我们提供了众多极具特色的发音人(音库)供您选择.其合成音在音色.自然度等方面的表现均接近甚至超过了人声.这种语音合成体验 ...

  8. tomcat证书配置

    第一步:为服务器生成证书 1.进入%JAVA_HOME%/bin目录 2.使用keytool为Tomcat生成证书,假定目标机器的域名是"localhost",keystore文件 ...

  9. 部署Java Web项目报错（一）

    今天,我在部署Java Web项目时,出现错误,并且在eclipse新建一个servers,却出现多个项目. 具体错误截图如下: 然后,我又将项目部署到JBoss服务器中,却还是运行不成功 22:12 ...

  10. freemarker入门实例

    freemarker入门实例 1.设计思路 (1)新建Maven Project (2)生成freemarker模板 (3)写freemarker页面ftl文件 (4)写测试文件 2.新建Maven ...