Handsontable添加超链接
本文在上文的基础上，返回的数据中多了一个link超链接跳转的字段，，需要在Handsontable中显示超链接。
<!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: '', link: "<a href='http://www.baidu.com' target='_blank' style='cursor:pointer;'>链接</a>" },
{ riqi: '2017-01', address: '天津', goods: '空调', price: '4299', sales: 522, del: '', link: "<a href='handsontable_1.htm' target='_blank' style='cursor:pointer;'>链接</a>" },
{ riqi: '2017-01', address: '上海', goods: '洗衣机', price: '1299', sales: 544, del: '', link: "<a href='http://www.baidu.com' target='_blank' style='cursor:pointer;'>链接</a>" },
{ riqi: '2017-01', address: '广州', goods: '彩电', price: '4599', sales: 562, del: '', link: "<a href='handsontable_1.htm' target='_blank' style='cursor:pointer;'>链接</a>" },
{ riqi: '2017-01', address: '深圳', goods: '热水器', price: '1099', sales: 430, del: '', link: "<a href='http://www.baidu.com' target='_blank' style='cursor:pointer;'>链接</a>" },
{ riqi: '2017-02', address: '重庆', goods: '笔记本电脑', price: '4999', sales: 666, del: '', link: "<a href='handsontable_1.htm' target='_blank' style='cursor:pointer;'>链接</a>" },
{ riqi: '2017-02', address: '厦门', goods: '油烟机', price: '2899', sales: 438, del: '', link: "<a href='http://www.baidu.com' target='_blank' style='cursor:pointer;'>链接</a>" },
{ riqi: '2017-02', address: '青岛', goods: '饮水机', price: '899', sales: 620, del: '', link: "<a href='handsontable_1.htm' target='_blank' style='cursor:pointer;'>链接</a>" },
{ riqi: '2017-02', address: '大连', goods: '手机', price: '1999', sales: 500, del: '', link: "<a href='http://www.baidu.com' target='_blank' style='cursor:pointer;'>链接</a>" }
]; function negativeValueRenderer(instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
if (prop == 'address') {
td.style.color = '#32CD32';
}
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;
}
else if (prop == 'link') {
td.innerHTML = value;//字符串转化成HTML的写法
}
}
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'
}, {
data: 'link',
type: 'text'
}],
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>
需要注意的是，不管link中的值是前台拼接还是后台处理好返回的，只是一个超链接格式的字符串，如果没有td.innerHTML = 链接字符串;则显示的仍然是一个字符串而不是超链接。
By QJL
Handsontable添加超链接的更多相关文章
- C#在excel中添加超链接
1.新建一个项目 2.给项目添加引用:Microsoft Excel 12.0 Object Library (2007版本) using Excel = Microsoft.Office.Inter ...
- TextView 中添加超链接
在textView添加超链接,有两种方式,第一种通过HTML格式化你的网址,一种是设置autolink,让系统自动识别超链接,下面为大家介绍下这两种方法的实现 代码如下: 第一种 pu ...
- android textView 添加超链接(两种实现方式)
在textView添加超链接,有两种方式,第一种通过HTML格式化你的网址,一种是设置autolink,让系统自动识别超链接,下面为大家介绍下这两种方法的实现 在textView添加超链接,有两种方式 ...
- Flex4 中<s:Datagrid>、<mx:Datagrid>添加超链接的完整方法
<s:Datagrid>的添加超链接方法(链接文字会重叠) <s:GridColumn dataField="_fileName" headerText=&quo ...
- 给TextView添加超链接的四种方式
因为在上上篇博客中介绍了SpannableString的使用(SpannableString使用详解),由此想到给TextView添加超链接究竟有多少种方式?经过个人总结,现在一共发现四种,如果还有其 ...
- Android（java）学习笔记147：textView 添加超链接(两种实现方式,,区别于WebView)
1.方式1: LinearLayout layout = new LinearLayout(this); LinearLayout.LayoutParams params = new LinearLa ...
- Django编写RESTful API（五）：添加超链接提高模型间的关联性
前言 在第四篇中,加入了用户模型,以及相关的认证和权限的功能.但是我们在使用的时候,会发现在访问http://127.0.0.1:8000/users/时看到的用户列表,不能够直接点击某个链接然后查看 ...
- C#/VB.NET对EXCEL图片添加超链接
在日常工作中,在编辑文档时,为了方便自己或者Boss能够实时查看到需要的网页或者文档是,需要对在Excel中输入的相关文字进行超链接,那么对于一些在Excel中插入的图片我们该怎么实现超链接呢,下面给 ...
- Java 在PDF 中添加超链接
对特定元素添加超链接后,用户可以通过点击被链接的元素来激活这些链接,通常在被链接的元素下带有下划线或者以不同的颜色显示来进行区分.按照使用对象的不同,链接又可以分为:文本超链接,图像超链接,E-mai ...
随机推荐
- 关于 JS 拖拽功能的冲突问题及解决方法
前言 我在之前写过关于 JS 拖拽的文章,实现方式和网上能搜到的方法大致相同,别无二致,但是在一次偶然的测试中发现,这种绑定事件的方式可能会和其它的拖拽事件产生冲突,由此产生了对于事件绑定的思考.本文 ...
- Java经典编程题50道之六
输入两个正整数m和n,求其最大公约数和最小公倍数. public class Example06 { public static void main(String[] args) { ...
- 关于eclipse安装springide的记录
近些天,又开始学习springmvc,使用eclipse进行开发,由于很多快捷键时候需要安装springide插件才能出来,我遇到配置DispatcherServlet,结果alt+/出不来Dispa ...
- Mysql的sql_mode
(一) 基本介绍 set sql_mode="",即强制不设定MySql模式(如不作输入检测.错误提示.语法模式检查等)应该能提高性能,但有如下问题: 如果插入了不合适数据(错误类 ...
- 动态规划算法的java实现
一:动态规划 1)动态规划的向前处理法 java中没有指针,所以邻接表的存储需要转化一中形式,用数组存储邻接表 用三个数组u,v,w存储边,u数组代表起点,v数组代表终点,w代表权值;例如:1--&g ...
- iOS 点击屏幕空白区隐藏键盘方法
iOS开发中,经常要用到输入框,可默认情况下,输入框出来之后,除非点击键盘上面的“Done”或“Next”按钮才能将其隐藏.站在用户体验的角度上看,这种情况很不友好,尤其是不能突显苹果操作的便捷性. ...
- Jar程序使用MyBatis集成阿里巴巴druid连接池
在写jar程序,而不是web程序的时候,使用mybatis作为持久层,可以集成POOLED连接池,而阿里的druid不能用,确实很郁闷.不过有办法. 首先准备好数据库配置文件 然后对Druid进行一个 ...
- 机器学习策略——DeepLearning.AI课程总结
一.什么是ML策略 假设你正在训练一个分类器,你的系统已经达到了90%准确率,但是对于你的应用程序来说还不够好,此时你有很多的想法去继续改善你的系统: 收集更多训练数据 训练集的多样性不够,收集更多的 ...
- 初探Java多线程
多线程是由Java提出的概念,那么什么是线程呢?这里会涉及到几个名字听着很类似的东西:程序.线程.进程. 程序:存储在磁盘上的一系列的文件,包括可执行文件和不可执行文件. 进程:在内存中,每一个程序都 ...
- Scrum方法论
产品负责人: 代表客户或未来游戏玩家.产品负责人需要确保所有有趣的功能都能在游戏中实现,还负责对游戏完整观感的理解. Scrum主管: 代表理性思维.需要主持每日Scrum会议,并确保每个人都在执行任 ...