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

　　代码如下：

　　

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>handsontable demo</title>
  5.     <meta charset="utf-8">
  6.     <link rel="stylesheet" href="handsontable/htstyle.css">
  7.     <link rel="stylesheet" href="handsontable/htstyle-custom.css">
  8.     <script src="handsontable/jquery-1.12.1.js"></script>
  9.     <script src="handsontable/handsontable.full.js"></script>
  10. </head>
  11. <body>
  12.     <div id="example"></div>
  13.  
  14.     <script>
  15.             var data = [
  16.                 {riqi:'2017-01',address: '北京', goods:'冰箱',price: '3399',sales: 530,del:''},
  17.                 {riqi:'2017-01', address:'天津',goods: '空调', price:'4299',sales: 522,del:''},
  18.                 {riqi:'2017-01',address: '上海',goods: '洗衣机',price: '1299',sales: 544,del:''},
  19.                 {riqi:'2017-01', address:'广州',goods: '彩电',price: '4599',sales: 562,del:''},
  20.                 {riqi:'2017-01', address:'深圳', goods:'热水器', price:'1099',sales: 430,del:''},
  21.                 {riqi:'2017-02',address: '重庆',goods: '笔记本电脑',price: '4999',sales: 666,del:''},
  22.                 {riqi:'2017-02', address:'厦门',goods: '油烟机',price: '2899',sales: 438,del:''},
  23.                 {riqi:'2017-02',address: '青岛',goods: '饮水机', price:'899',sales: 620,del:''},
  24.                 {riqi:'2017-02', address: '大连', goods: '手机', price: '1999', sales: 500,del:''}
  25.             ];
  26.  
  27.             function negativeValueRenderer(instance, td, row, col, prop, value, cellProperties) {
  28.                 Handsontable.renderers.TextRenderer.apply(this, arguments);
  29.                 if (prop == 'address') {//修改字体颜色
  30.                     td.style.color = '#32CD32';
  31.  
  32.                     //如果要添加其他样式，可以用以下写法
                        //td.style = 'font-weight: bold;';
  33.                 }
  34.                 else if (prop == 'price') {
  35.                     //格式化价格数据
  36.                     td.innerText = value != null ? numbro(value).format('0.00') : "";
  37.                 }
  38.                 else if (prop == 'sales') {
  39.                     //右对齐
  40.                     td.style.textAlign = 'right';
  41.                     td.innerText = value != null ? numbro(value).format('0,0.00') : "";
  42.                 }
  43.                 else if (prop == 'del') {
  44.                     //添加自定义的图片，并给图片的chick添加事件
  45.                     var escaped = Handsontable.helper.stringify(value),
  46.                       imgdel;
  47.  
  48.                     imgdel = document.createElement('IMG');
  49.                     imgdel.src = "handsontable/remove.png";
  50.                     imgdel.width = 20;
  51.                     imgdel.name = escaped;
  52.                     imgdel.style = 'cursor:pointer;';//鼠标移上去变手型
  53.                     Handsontable.dom.addEvent(imgdel, 'click', function (event) {
  54.                         hot.alter("remove_row", row);//删除当前行
  55.                     });
  56.  
  57.                     Handsontable.dom.empty(td);
  58.                     td.appendChild(imgdel);
  59.                     td.style.textAlign = 'center';//图片居中对齐
  60.                     return td;
  61.                 }
  62.             }
  63.             Handsontable.renderers.registerRenderer('negativeValueRenderer', negativeValueRenderer);
  64.  
  65.             var hot = new Handsontable(document.getElementById('example'),{
  66.                 data: data,
  67.                 colHeaders: ['操作', '日期', '地点', '商品', '单价', '销量'], // 使用自定义列头
  68.                 rowHeaders: true,
  69.                 colWidths: 150, // 设置所有列宽为150像素
  70.                 filters: true,
  71.                 columnSorting: true,
  72.                 sortIndicator: true,
  73.                 autoColumnSize: true,
  74.                 manualColumnResize: true,
  75.                 undo: true,
  76.                 redo: true,
  77.                 wordWrap: true,
  78.                 copyable: true,
  79.                 mergeCells: false,
  80.                 manualRowResize: true,
  81.                 manualRowMove: true,
  82.                 manualColumnMove: false,
  83.                 renderAllRows: true,
  84.                 allowInsertRow: true,
  85.                 allowInsertColumn: false,
  86.                 fixedColumnsLeft: 1,
  87.                 columns: [ {
  88.                     data: 'del',
  89.                     type: 'text'
  90.                 }, {
  91.                     data: 'riqi',
  92.                     type: 'date',
  93.                     dateFormat: 'YYYY-MM-DD'
  94.                 },{
  95.                     data: 'address',
  96.                     type: 'text'
  97.                 },{
  98.                     data: 'goods',
  99.                     type: 'text'
  100.                 },{
  101.                     data: 'price',
  102.                     type: 'numeric'
  103.                 },{
  104.                     data: 'sales',
  105.                     type: 'numeric'
  106.                 }],
  107.                 contextMenu: ['row_above', 'row_below', '---------', 'remove_row','---------','undo','redo','---------','make_read_only','---------','alignment'],
  108.                 dropdownMenu: ['filter_by_condition', 'filter_by_value', 'filter_action_bar'],
  109.                 cells: function (row, col, prop) {
  110.                     var cellProperties = {};
  111.                     cellProperties.renderer = "negativeValueRenderer";
  112.                     return cellProperties;
  113.                 },
  114.             });
  115.  
  116.     </script>
  117. </body>
  118. </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. 对于 @Autowired注解和@service注解的理解

    @Autowired相当于Spring自动给你进行了new一个对象将这个对象放入你的注解所在类里面. @service 是可以让IOC容器对于你注解的类可以在容器中生成相应的bean实例 便于我们进行 ...

  2. Scrapy-多层爬取天堂图片网

    1.根据图片分类对爬取的图片进行分类 开发者选项 --> 找到分类地址         爬取每个分类的地址通过回调函数传入下一层 name = 'sky'start_urls = ['http: ...

  3. HDU - 1430 魔板 (bfs预处理 + 康托)

    对于该题可以直接预处理初始状态[0, 1, 2, 3, 4, 5, 6, 7]所有可以到达的状态,保存到达的路径,直接打印答案即可. 关于此处的状态转换:假设有初始状态为2,3,4,5,0,6,7,1 ...

  4. 前端js，后台python实现RSA非对称加密

    先熟悉使用 在后台使用RSA实现秘钥生产,加密,解密; # -*- encoding:utf-8 -*- import base64 from Crypto import Random from Cr ...

  5. CEPH RGW集群和bucket的zone group 不一致导致的404异常解决 及 使用radosgw-admin metadata 命令设置bucket metadata 的方法

      问题现象: 最近在研究zonegroup的配置操作,发现在配置zonegroup后修改了default zone,导致访问对象报404错误. 问题原因: rgw 日志 报异常'request fo ...

  6. V4L2驱动的移植与应用（三）

    三.V4L2的demo capture.c是官方示例程序. capture.c 程序中的 process_image 函数: capture.c 程序主要是用来演示怎样使用 v4l2 接口,并没有对采 ...

  7. ArcGIS For Flex报错二

    1.错误描述 2.错误原因 3.解决办法

  8. C# 带偏移量自定义分页方法

    /// <summary> /// 带偏移量自定义分页方法 /// </summary> /// <param name="PageSize"> ...

  9. Django学习-4-request获取数据

    app下views.py             获取前端HTML数据的一些方法             def func(request):                 # request.me ...

  10. vue常用的网址

    http://cn.vuejs.org/v2/guide/routing.html#官方路由 https://unpkg.com/vue-router@2.3.1/dist/vue-router.js