原文地址:http://blog.csdn.net/mafan121/article/details/46119905html
1.自動填充單元格數據編輯器
fillHandle：true/false //當值爲true時，容許拖動單元格右下角，將其值自動填充到選中的單元格函數
2.合併單元格this
初始化配置：mergeCells：[{row:起始行數,cols:起始列數,rowspan:合併的行數,colspan:合併的列數},...]spa
或者初始化聲明：mergeCells:true //表示容許單元格合併.net
但單元格合併的操做，需以下操做：code
1 if(key == "merge") { 2 if(hot.mergeCells.mergedCellInfoCollection.length > 0) { 3 for(var k=0; k<hot.mergeCells.mergedCellInfoCollection.length; k++) { 4 if(hot.mergeCells.mergedCellInfoCollection[k].row == row && 5 hot.mergeCells.mergedCellInfoCollection[k].col == col) { 6 hot.mergeCells.mergedCellInfoCollection.splice(k,1); 7 return; 8 }else{ 9 hot.mergeCells.mergedCellInfoCollection.push({"row": row, "col": col, 10 "rowspan": rowspan, "colspan": colspan}); 11 break; 12 } 13 } 14 } else { 15 hot.mergeCells.mergedCellInfoCollection.push({"row": row, "col": col, "rowspan": rowspan, "colspan": colspan}); 16 }
3.初始化單元格或列的對齊方式orm
水平樣式：htLeft,htCenter,htRight,htJustifyhtm
垂直樣式：htTop,htMiddle,htBottomblog
4.只讀模式
列只讀，設置列屬性：readOnly：true
單元格只讀：cellProperties.readOnly = true
5.設置單元格的編輯類型
columns:[{type:類型}]
主要的類型有：
text：字符串
numeric：數字類型
date：日期框
checkbox：單選框
password:密碼框
下面幾種類型的使用比較特殊
select：下拉編輯器
columns:[
{editor:'select',
selectOption:[選項1，選項2，...]},
.......
]
dropdown：下拉選擇
columns：[
{type:'dropdown',
source:[選項1，選項2，...]},
......
]
autocomplete：自動匹配模式
columns：[
{type:'autocomplete',
source:[選項1，選項2，...],
strict:true/false, //值爲true，嚴格匹配
allowInvalid:true/false //值爲true時，容許輸入值做爲匹配內容，只能在strict爲true時使用
},
......
]
handsontable：表格模式
columns：[
{type:'handsontable',
handsontable:{...},
......
]
自定義模式
data=[{
title：html標籤，
description:描述，
comments：評論，
cover：封面
},
......
]
自定義邊界
customBorders:[
range:{
form:{row:行數，col：列數}, //起始行列
to:{row:行數，col：列數}, //終止行列
top/bottom/right/left:{ //上下右左邊線
width:像數，
color:顏色
}
}
]
6.查詢單元格的值
查詢單元格的值須要3個步驟：
a.設置hot的屬性search爲true
b.建立比對函數
c.渲染比對結果
示例代碼以下:
1 var 2 data = [ 3 ['Nissan', 2012, 'black', 'black'], 4 ['Nissan', 2013, 'blue', 'blue'], 5 ['Chrysler', 2014, 'yellow', 'black'], 6 ['Volvo', 2015, 'yellow', 'gray'] 7 ], 8 example = document.getElementById('example1'), 9 searchFiled = document.getElementById('search_field'), 10 hot; 11 12 hot = new Handsontable(example, { 13 data: data, 14 colHeaders: true, 15 search: true 16 }); 17 18 function onlyExactMatch(queryStr, value) { 19 return queryStr.toString() === value.toString(); 20 } 21 22 Handsontable.Dom.addEvent(searchFiled, 'keyup', function (event) { 23 var queryResult = hot.search.query(this.value); 24 25 console.log(queryResult); 26 hot.render(); 27 });
7.評論
comments：true/false //當值爲true時能夠顯示評論，右鍵菜單可添加刪除評論。
當值爲true時，可設置單元格的評論內容，格式爲：
cell：[
{
row:行數，
col：列數，
comment：評論內容
}
]