[TOC]
常用
1<!DOCTYPE html> 2<html> 3 <head> 4 <!-- <meta charset="UTF-8"> --> 5 <title>Handsontable</title> 6 <script src="dist/jquery-1.11.1.min.js"></script> 7 <script src="dist/handsontable.full.js"></script> 8 <link rel="stylesheet" href="dist/handsontable.full.css" /> 9 <link rel="stylesheet" type="text/css" href="dist/main.css"> 10 </head> 11 <body> 12 <div id="example"></div> 13 <script> 14 $(document).ready(function () { 15 var data = [ 16 {riqi:'2019-06-07', goods:'冰箱',price: '3399'}, 17 {riqi:'2019-06-07', goods: '空调', price:'4299'}, 18 {riqi:'2019-06-07', goods: '洗衣机',price: '1299'}, 19 ]; 20 function negativeValueRenderer(instance, td, row, col, prop, value, cellProperties) { 21 Handsontable.renderers.TextRenderer.apply(this, arguments); 22 if (prop == 'riqi') { 23 td.style.color = '#32CD32'; 24 } 25 else if (prop == 'goods') { 26 td.style.textAlign = 'right'; 27 } 28 else if (prop == 'price') { 29 td.innerText = value != null ? numbro(value).format('0.00') : ""; 30 } 31 } 32 Handsontable.renderers.registerRenderer('negativeValueRenderer', negativeValueRenderer); 33 var hot = new Handsontable(document.getElementById('example'),{ 34 data: data, 35 colHeaders: ['日期', '商品', '单价'], 36 columns: [{ 37 data: 'riqi', 38 type: 'date', 39 dateFormat: 'YYYY-MM-DD' 40 },{ 41 data: 'goods', 42 type: 'text' 43 },{ 44 data: 'price', 45 type: 'numeric' 46 }], 47 autoColumnSize: true, 48 cell: [ 49 {row: 999, col: 999, readOnly: true} 50 ], 51 contextMenu: { 52 items: { 53 "copy": { name: '复制', }, 54 "hsep1": "---------", 55 "undo": { name: '撤销' }, 56 "redo": { name: '重做' }, 57 } 58 }, 59 cells: function (row, col, prop) { 60 var cellProperties = {}; 61 cellProperties.renderer = "negativeValueRenderer"; 62 return cellProperties; 63 }, 64 65 }); 66 function callBack(changes,source){ 67 } 68 Handsontable.hooks.add('afterChange',callBack); 69 }); 70 </script> 71 </body> 72</html>
属性
属性
作用
columnSorting: true
列排序
mergeCells: true
合并单元格
comments: true
启用批注
search: true
查询
currentRowClassName: 'currentRow'
当前行的类名
currentColClassName: 'currentCol'
当前列的类名
customBorders: true
自定义边框设置
headerTooltips:true
工具栏启用
dropdownMenu: true
下拉菜单
filters:true
筛选条件
表格数据
1data: [ 2 ['日期','销售地点','销售商品','单价','销量'], 3 ['2017-01', '北京', '冰箱', '3399', 530], 4 ['2017-01', '天津', '空调', '4299', 522], 5]; 6 7 8data: [ 9 {'date': '2017-01', 'place':'北京', 'goods':'冰箱', 'price':3399, '销量':530}, 10 {'date': '2017-01', 'place':'天津', 'goods':'空调', 'price':4299, '销量':522}, 11 {'date': '2017-01', 'place':'上海', 'goods':'洗衣机', 'price':1299, '销量':544}, 12]; 13 14 15 data: Handsontable.helper.createEmptySpreadsheetData(100, 100), 16 data: Handsontable.helper.createSpreadsheetData(50, 50),
固定行列位置
属性
作用
fixedRowsTop:1
固定顶部多少行不能垂直滚动
fixedColumnsLeft:1
固定左侧多少列不能水平滚动
拖拽行头或列头改变行或列的大小
属性
作用
manualColumnResize:true | false
当值为 true 时，允许拖动
manualRowResize:true | false
当值为 false 时禁止拖动
延伸列的宽度
属性
作用
stretchH：last | all | none
延伸最后一列; 延伸所有列 ; 默认不延伸
拖动行或列到某一行或列之后
属性
作用
manualColumnMove：true | false
值为 true 时，列可拖拽移动到指定列
manualRowMove:true | false
值为 true 时，行可拖拽至指定行
设置当前行或列的样式
行分组或列分组
允许排序
显示行头列头
属性
作用
colHeaders:true | fals | array
列头
rowHeaders:true | fals | array
行头
右键菜单展示
属性
作用
contextMenu:true | fals | array
当值为 true 时，启用右键菜单
自适应列大小
属性
作用
autoColumnSize：true | false
自适应列大小
最小列数
属性
作用
minRows:1
最小行数
minCols: 1
最小列数
minSpareCols:1
最小列空间，不足则添加空列
maxCols:1
最大列数
maxRows:1
最大行数
minSpareRows:1
最小行空间，不足则添加空行
observeChanges
属性
作用
observeChanges：true | false
当值为 true 时，启用 observeChanges 插件
列宽
属性
作用
colWidths:1<br> colWidths : [100, 200, 300, 200, 100]
列宽
自定义边框
属性
作用
customBorders:true
自定义单元格边框
一个单元格
1customBorders: [ 2{ 3 row: 2, 4 col: 2, 5 left: { 6 width: 2, 7 color: 'red' 8 }, 9 right: { 10 width: 1, 11 color: 'green' 12 } 13}],
多个单元格
1customBorders: [{ 2 range: { 3 from: { // 起始位置 4 row: 1, 5 col: 1 6 }, 7 to: { // 结束位置 8 row: 3, 9 col: 4 10 } 11 }, 12 top: { 13 width: 2, 14 color: '#5292F7' 15 }, 16 left: { 17 width: 2, 18 color: 'orange' 19 }, 20 bottom: { 21 width: 2, 22 color: 'red' 23 }, 24 right: { 25 width: 2, 26 color: 'magenta' 27 } 28}], 29 30 31customBorders: [{ 32 range: { 33 from: {row: 1, col:1}, 34 to: {row: 3, col:3}}, 35 top: {width: 2, color: '#25e825'}, 36 right: {width: 2, color: '#25e825'}, 37 bottom: {width: 2, color: '#25e825'}, 38 left: {width: 2, color: '#25e825'} 39 },{ 40 row: 2, 41 col: 2, 42 top: {width: 2, color: '#7687c5'}, 43 right: {width: 2, color: '#7687c5'}, 44 bottom: {width: 2, color: '#7687c5'}, 45 left: {width: 2, color: '#7687c5'} 46 } 47],
单元格合并
属性
作用
mergeCells:true
单元格合并
className
className 属性
作用
htCenter
htLeft
左对齐
htRight
右对齐
htJustify
htTop
htMiddle
垂直居中
htBottom
className:'htRight htMiddle'
指定单元格的某些属性
参数
作用
editor: false
只读
1cell: [ 2 {row:0, col:0, className: 'htRight htMiddle', editor: false}, 3 {row:1, col:1, className: 'htLeft'} 4],
初始行数
初始列数
自动换行
属性
作用
wordWrap:true
自动换行
是否允许复制
允许键盘复制
属性
作用
copyable:true
允许键盘复制
允许拖动复制
如果设置为 false，则选中单元格后，在右下方不会出现可以拖动的点
属性
作用
fillHandle:true
允许拖动复制
fillHandle: 'vertical'
只可以垂直拖动复制
是否呈现所有行
如果是 true，则当你用键盘上下移动数据时，数据不会随着焦点的下移或上移同步移动
如果是 false，则当你用键盘上下移动数据时，滚动条也会随着焦点上下移动
属性
作用
renderAllRows:true
将禁用 handsontable 的虚拟呈现机制
操作单元格
语法
作用
hot.getData(1,1,2,2);
获取单元格范围值
hot.getDataAtCell(row,col);
获取单元格值
hot.getSelected();
获取选中的单元格
hot.setDataAtCell(row, col, value, source);
设置单元格值
hot.alter('remove_row',0);
删除行
hot.clear();
清空数据
hot.selectCell(1,1,2,2);
设置单元格为选中状态
样式
td.style.color = '#32CD32';
修改字体颜色
td.style = 'font-weight: bold;';
字体加粗
td.innerText = value != null ? numbro(value).format('0.000') : "";
格式化数据
td.style.textAlign = 'right';
右对齐
1function negativeValueRenderer(instance, td, row, col, prop, value, cellProperties) { 2 Handsontable.renderers.TextRenderer.apply(this, arguments); 3 if (prop == 'address') { 4 td.style.color = '#32CD32'; 5 } 6 else if (prop == 'price') { 7 td.innerText = value != null ? numbro(value).format('0.000') : ""; 8 } 9 else if (prop == 'sales') { 10 td.style.textAlign = 'right'; 11 td.innerText = value != null ? numbro(value).format('0,0.00') : ""; 12 } 13} 14Handsontable.renderers.registerRenderer('negativeValueRenderer', negativeValueRenderer); 15 16 17cells: function (row, col, prop) { 18 var cellProperties = {}; 19 cellProperties.renderer = "negativeValueRenderer"; 20 return cellProperties; 21},
事件
鼠标点击
1$(document).ready(function () { 2 function callBack(event,coords,td){ 3 var row = coords.row; 4 var col = coords.col; 5 } 6 Handsontable.hooks.add('afterOnCellMouseDown',callBack,hot); 7)};
修改单元格
1afterChange ( 2 changes:[row,prop,oldVal,newVal], 3 source: "alter","empty","populateFromArray","loadData","autofill","paste" 4) 5 6 7$(document).ready(function () { 8 function callBack(changes,source){ 9 } 10 Handsontable.hooks.add('afterChange',callBack); 11)};
单元格只读
指定单元格
1cell: [ 2 {row: 1, col: 0, readOnly: true} 3],
指定列
1columns: [{ 2 readOnly: true 3}],
所有单元格
1cells: function (row, col, prop) { 2 var cellProperties = {}; 3 cellProperties.readOnly = true 4 return cellProperties; 5},