Handsontable添加超链接
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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添加超链接的主要内容，如果未能解决你的问题，请参考以下文章