本文在上文的基础上，返回的数据中多了一个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添加超链接的更多相关文章

  1. C#在excel中添加超链接

    1.新建一个项目 2.给项目添加引用:Microsoft Excel 12.0 Object Library (2007版本) using Excel = Microsoft.Office.Inter ...

  2. TextView 中添加超链接

    在textView添加超链接,有两种方式,第一种通过HTML格式化你的网址,一种是设置autolink,让系统自动识别超链接,下面为大家介绍下这两种方法的实现   代码如下:    第一种    pu ...

  3. android textView 添加超链接(两种实现方式)

    在textView添加超链接,有两种方式,第一种通过HTML格式化你的网址,一种是设置autolink,让系统自动识别超链接,下面为大家介绍下这两种方法的实现 在textView添加超链接,有两种方式 ...

  4. Flex4 中<s:Datagrid>、<mx:Datagrid>添加超链接的完整方法

    <s:Datagrid>的添加超链接方法(链接文字会重叠) <s:GridColumn dataField="_fileName" headerText=&quo ...

  5. 给TextView添加超链接的四种方式

    因为在上上篇博客中介绍了SpannableString的使用(SpannableString使用详解),由此想到给TextView添加超链接究竟有多少种方式?经过个人总结,现在一共发现四种,如果还有其 ...

  6. Android（java）学习笔记147：textView 添加超链接(两种实现方式,,区别于WebView)

    1.方式1: LinearLayout layout = new LinearLayout(this); LinearLayout.LayoutParams params = new LinearLa ...

  7. Django编写RESTful API（五）：添加超链接提高模型间的关联性

    前言 在第四篇中,加入了用户模型,以及相关的认证和权限的功能.但是我们在使用的时候,会发现在访问http://127.0.0.1:8000/users/时看到的用户列表,不能够直接点击某个链接然后查看 ...

  8. C#/VB.NET对EXCEL图片添加超链接

    在日常工作中,在编辑文档时,为了方便自己或者Boss能够实时查看到需要的网页或者文档是,需要对在Excel中输入的相关文字进行超链接,那么对于一些在Excel中插入的图片我们该怎么实现超链接呢,下面给 ...

  9. Java 在PDF 中添加超链接

    对特定元素添加超链接后,用户可以通过点击被链接的元素来激活这些链接,通常在被链接的元素下带有下划线或者以不同的颜色显示来进行区分.按照使用对象的不同,链接又可以分为:文本超链接,图像超链接,E-mai ...

随机推荐

  1. Spring Boot 注解详解

    一.注解(annotations)列表 @SpringBootApplication:包含了@ComponentScan.@Configuration和@EnableAutoConfiguration ...

  2. 如何让div水平居中呢？

    一百度div居中,多数都是一个答案,但是有时候这种方法并不是万能的...不废话,将我知道的方法都列举一下好了,随时更新. 1.设置width值,指定margin-left和margin-right为a ...

  3. cmd命令报4048错误

    解决方法: win10系统:快捷键win+x,找到命令提示符(管理员),打开再下载相应的依赖包. win7/8:打开开始,输入命令提示符,找到管理员权限的命令提示符,打开再下载相应的依赖包. 提示:如 ...

  4. 老男孩Python全栈开发（92天全）视频教程 自学笔记07

    day7课程内容: Python的编码解码 二进制 --->ASCII:只能存英文和拉丁字符,一个字符占一个字节,8位 ------->gb2312:只能6700多个中文,1980年 -- ...

  5. 五子棋的斜对角方向上的规则 -- java编程（简单粗暴版）

    五子棋判断输赢规则 --- 斜对角线方向上 一.左上右下方向上 1.分析图 2.代码 /**判断左上右下方向上是否有连续五颗相同颜色的棋子 * 全部遍历法 */ int loop = 0; boole ...

  6. json字符串转换成json对象，json对象转换成字符串，值转换成字符串，字符串转成值

    一.json相关概念 json,全称为javascript object notation,是一种轻量级的数据交互格式.采用完全独立于语言的文本格式,是一种理想的数据交换格式. 同时,json是jav ...

  7. LOJ6001 - 「网络流 24 题」太空飞行计划

    原题链接 Description 有个实验和个仪器,做实验有报酬买仪器有花费.每个实验都需要一些仪器,求最大净收益(实验报酬仪器花费),并输出一组方案. Solution 实验向所需仪器连边,实验的点 ...

  8. 设置TCP_USER_TIMEOUT参数来判断tcp连接是否断开

    [TOC] 1. bug描述 前段时间遇到这样的一个问题,openstack一个控制节点宕机后,在宕机后一段时间内创建的虚拟机,一直卡在创建中的状态.有的甚至要等到16分钟之后虚拟机才会切换到下一个状 ...

  9. C语言中的sizeof函数总结

    sizeof函数的结果: 变量:变量所占的字节数. ; printf( 数组:数组所占的字节数. ,,,,}; ] = {,,,,}; printf("size_arr1=%d\n" ...

  10. log4j:ERROR setFile(null,true) call failed

    1.错误描述 log4j:ERROR setFile(null,true) call failed. java.io.FileNotFoundException: at java.io.FileOut ...