Handsontable添加超鏈接
阿新 • • 發佈：2017-06-12
ack empty {} headers 事件 img -m dso arguments
本文在上文的基礎上，返回的數據中多了一個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; } } 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添加超鏈接