handsontable自定义渲染
本文主要介绍在使用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自定义渲染的更多相关文章
- 15、手把手教你Extjs5(十五)各种Grid列的自定义渲染
Grid各列已经能够展示出来了.列的类型包括字符型,整型,浮点型,货币型,百分比型,日期型和布尔型,我自定义了各种类型的渲染样式: 1.整型:标题栏居中,数值靠右显示,正数颜色为蓝色,负数颜色为红色, ...
- PIE SDK矢量自定义渲染
1. 功能简介 PIE SDK中关于矢量渲染提供了多种方案,包括简单渲染.分级渲染.唯一值渲染,这几种渲染方式具有一定的通用性,可以满足用户绝大多数的需求. 当面对复杂的业务,当前渲染方案无法满足用户 ...
- WPF/Silverlight深度解决方案:(九)HLSL自定义渲染特效之完美攻略(下)
原文:WPF/Silverlight深度解决方案:(九)HLSL自定义渲染特效之完美攻略(下) 本想只用两节来完成关于HLSL自定义渲染相关知识的讲解,鉴于最近非常的多的朋友对此相当感兴趣,想知道最多 ...
- WPF/Silverlight深度解决方案:(七)HLSL自定义渲染特效之完美攻略(中)
原文:WPF/Silverlight深度解决方案:(七)HLSL自定义渲染特效之完美攻略(中) 通过上一节的解说,大家是否已经对HLSL有了较深刻的认识和理解,HLSL的渲染不仅仅局限于静态处理,通过 ...
- WPF/Silverlight深度解决方案:(六)HLSL自定义渲染特效之完美攻略(上)
原文:WPF/Silverlight深度解决方案:(六)HLSL自定义渲染特效之完美攻略(上) Shader Effect种位图特效及2种渲染特效,而Silverlight中仅有这2种渲染特效: Bl ...
- 饿了么组件--table组件自定义渲染列,同时伴有v-for和v-if情况
如题,有一个需求,列数量不固定,在一定条件下,可能会(fixedColumn, A2, A3, A4)或(fixedColumn, B2, B3)情况,其中A2, A3, A4会同时出现,B2, B3 ...
- django-上下文渲染器,将后端内容提供给模板使用,自定义渲染器
使用场景:当同一个类容需要出现在多个模板中, 上下文管理器就是将这个内容以字典的形式返回给所有模板,模板通过 {{ key }}取值. 结构:上下文管理器 文件名一般为context_processo ...
- Cocos2d-x 3.x中自定义渲染功能
1.第一种方法针对的是整个图层的渲染 重写visit()函数,并且在visit()函数中直接向CommandQueue添加CustomCommand,设置好回调函数. ...
- Google Chrome Frame 自定义渲染方式,调用ActiveX
通过meta段的设置可以控制浏览器的渲染行为,但在一些特殊情况下,meta段的设置无效,我们需要额外的操作以达到目的. 模式1:页面A(IE)iFrame引用页面B(Chrome Frame) 问题描 ...
随机推荐
- 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道acm简单题(2013):1.(时分秒)时间相减;2.主持人和N-1个人玩游戏,每个人说出自己认识的人数,判断其中是否有人说谎。
/*1.题目:输入一个数,代表要检测的例子的个数,每个例子中:输入两个时间(格式HH:MM : SS),前面时间减去后面时间,输出在时钟上显示的时间,格式一样,如果是以为数字的前面补零.*//**思路 ...
- Subsequence Count (线段树)
Time Limit: 1000 ms Memory Limit: 256 MB Description 给定一个01串 $S_{1 \cdots n}$ 和 $Q$ 个操作. 操作有两种类型: ...
- SpringBoot SpringSecurity4整合,灵活权限配置,弃用注解方式.
SpringSecurity 可以使用注解对方法进行细颗粒权限控制,但是很不灵活,必须在编码期间,就已经写死权限 其实关于SpringSecurity,大部分类都不需要重写,需要的只是妥善的配置. 每 ...
- enable multi-tenancy on openstack pike
Multi-tenancy 是openstack ironic从Ocata版本开始支持的新特性,通过network-generic-switch插件控制交换机,Ironic可以实现在不同租户间机网络隔 ...
- 工业级GBDT算法︱微软开源 的LightGBM(R包正在开发....)
看完一篇介绍文章后,第一个直觉就是这算法已经配得上工业级属性.日前看到微软已经公开了这一算法,而且已经发开python版本,本人觉得等hadoop+Spark这些平台配齐之后,就可以大规模宣传啦~如果 ...
- supervessel-免费云镜像︱GPU加速的Caffe深度学习开发环境
开发环境介绍 在SuperVessel云上,我们为大家免费提供当前火热的caffe深度学习开发环境.SuperVessel的Caffe有如下优点: 1) 免去了繁琐的Caffe环境的安装配置,即申请即 ...
- 如何使用DirectDraw直接显示RGB、YUV视频数据(播放yuv)
#include "draw.h"void CTest100Dlg::OnButton1() { // TODO: Add your control notification ha ...
- Java中private、protected和public作用域的异同
Java中private.protected和public作用域的异同 说明:(1)private的作用范围为当前类,protected的作用范围哦不能超过其他包: (2)区别不同的作用域的不同作用范 ...
- NetBeans部署项目(Extjs)报错(二)
NetBeans部署项目(Extjs)报错(二) 1.具体错误如下: Using CATALINA_BASE: "C:\Users\Administrator.FOXB2MKB3RGUNIL ...