常用
<!DOCTYPE html>
<html>
<head>
<!-- <meta charset="UTF-8"> -->
<title>Handsontable</title>
<script src="dist/jquery-1.11.1.min.js"></script>
<script src="dist/handsontable.full.js"></script>
<link rel="stylesheet" href="dist/handsontable.full.css" />
<link rel="stylesheet" type="text/css" href="dist/main.css">
</head>
<body>
<div id="example"></div>
<script>
$(document).ready(function () {
var data = [
{riqi:'2019-06-07', goods:'冰箱',price: '3399'},
{riqi:'2019-06-07', goods: '空調', price:'4299'},
{riqi:'2019-06-07', goods: '洗衣機',price: '1299'},
];
function negativeValueRenderer(instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
if (prop == 'riqi') {
td.style.color = '#32CD32';
}
else if (prop == 'goods') {
td.style.textAlign = 'right';
}
else if (prop == 'price') {
td.innerText = value != null ? numbro(value).format('0.00') : "";
}
}
Handsontable.renderers.registerRenderer('negativeValueRenderer', negativeValueRenderer);
var hot = new Handsontable(document.getElementById('example'),{
data: data,
colHeaders: ['日期', '商品', '單價'],
columns: [{
data: 'riqi',
type: 'date',
dateFormat: 'YYYY-MM-DD'
},{
data: 'goods',
type: 'text'
},{
data: 'price',
type: 'numeric'
}],
autoColumnSize: true,
cell: [
{row: 999, col: 999, readOnly: true}
],
contextMenu: {
items: {
"copy": { name: '復制', },
"hsep1": "---------",
"undo": { name: '撤銷' },
"redo": { name: '重做' },
}
},
cells: function (row, col, prop) {
var cellProperties = {};
cellProperties.renderer = "negativeValueRenderer";
return cellProperties;
},
});
function callBack(changes,source){
}
Handsontable.hooks.add('afterChange',callBack);
});
</script>
</body>
</html>
屬性
| 屬性 |
作用 |
| columnSorting: true |
列排序 |
| mergeCells: true |
合並單元格 |
| comments: true |
啟用批注 |
| search: true |
查詢 |
| currentRowClassName: 'currentRow' |
當前行的類名 |
| currentColClassName: 'currentCol' |
當前列的類名 |
| customBorders: true |
自定義邊框設置 |
| headerTooltips:true |
工具欄啟用 |
| dropdownMenu: true |
下拉菜單 |
| filters:true |
篩選條件 |
表格數據
data: [
['日期','銷售地點','銷售商品','單價','銷量'],
['2017-01', '北京', '冰箱', '3399', 530],
['2017-01', '天津', '空調', '4299', 522],
];
data: [
{'date': '2017-01', 'place':'北京', 'goods':'冰箱', 'price':3399, '銷量':530},
{'date': '2017-01', 'place':'天津', 'goods':'空調', 'price':4299, '銷量':522},
{'date': '2017-01', 'place':'上海', 'goods':'洗衣機', 'price':1299, '銷量':544},
];
data: Handsontable.helper.createEmptySpreadsheetData(100, 100),
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
colWidths : [100, 200, 300, 200, 100] |
列寬 |
自定義邊框
| 屬性 |
作用 |
| customBorders:true |
自定義單元格邊框 |
一個單元格
customBorders: [
{
row: 2,
col: 2,
left: {
width: 2,
color: 'red'
},
right: {
width: 1,
color: 'green'
}
}],
多個單元格
customBorders: [{
range: {
from: { // 起始位置
row: 1,
col: 1
},
to: { // 結束位置
row: 3,
col: 4
}
},
top: {
width: 2,
color: '#5292F7'
},
left: {
width: 2,
color: 'orange'
},
bottom: {
width: 2,
color: 'red'
},
right: {
width: 2,
color: 'magenta'
}
}],
customBorders: [{
range: {
from: {row: 1, col:1},
to: {row: 3, col:3}},
top: {width: 2, color: '#25e825'},
right: {width: 2, color: '#25e825'},
bottom: {width: 2, color: '#25e825'},
left: {width: 2, color: '#25e825'}
},{
row: 2,
col: 2,
top: {width: 2, color: '#7687c5'},
right: {width: 2, color: '#7687c5'},
bottom: {width: 2, color: '#7687c5'},
left: {width: 2, color: '#7687c5'}
}
],
單元格合並
| 屬性 |
作用 |
| mergeCells:true |
單元格合並 |
className
| className 屬性 |
作用 |
| htCenter |
|
| htLeft |
左對齊 |
| htRight |
右對齊 |
| htJustify |
|
| htTop |
|
| htMiddle |
垂直居中 |
| htBottom |
|
className:'htRight htMiddle'
指定單元格的某些屬性
cell: [
{row:0, col:0, className: 'htRight htMiddle', editor: false},
{row:1, col:1, className: 'htLeft'}
],
初始行數
初始列數
自動換行
是否允許復制
允許鍵盤復制
| 屬性 |
作用 |
| 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'; |
右對齊 |
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.000') : "";
}
else if (prop == 'sales') {
td.style.textAlign = 'right';
td.innerText = value != null ? numbro(value).format('0,0.00') : "";
}
}
Handsontable.renderers.registerRenderer('negativeValueRenderer', negativeValueRenderer);
cells: function (row, col, prop) {
var cellProperties = {};
cellProperties.renderer = "negativeValueRenderer";
return cellProperties;
},
事件
鼠標點擊
$(document).ready(function () {
function callBack(event,coords,td){
var row = coords.row;
var col = coords.col;
}
Handsontable.hooks.add('afterOnCellMouseDown',callBack,hot);
)};
修改單元格
afterChange (
changes:[row,prop,oldVal,newVal],
source: "alter","empty","populateFromArray","loadData","autofill","paste"
)
$(document).ready(function () {
function callBack(changes,source){
}
Handsontable.hooks.add('afterChange',callBack);
)};
單元格只讀
指定單元格
cell: [
{row: 1, col: 0, readOnly: true}
],
指定列
columns: [{
readOnly: true
}],
所有單元格
cells: function (row, col, prop) {
var cellProperties = {};
cellProperties.readOnly = true
return cellProperties;
},
