标签：
---恢复内容开始---
很像excel的jquery插件。关于它的中文资料不多，自己只能看看英文的了。记录如下：
数据绑定：
1、更新局部数据，需要使用render方法；
2、如果引用的数据是：JSON.parse(JSON.stringify(data2))，则不会被更改
3、保存之前clone表格，使用afterChange的var tmpData = JSON.parse(JSON.stringify(data3));语句。
数据源：
1、数组
2、隐藏第二列
load and save
1、afterChange：function(change[改变后的data], source[默认值是‘loadData‘]){}
2、http://docs.handsontable.com/0.16.0/tutorial-load-and-save.html 代码挺不错的。不过handsontable不能用$取对象。
3、把数据保存在本地
可在初始化或更新方法中设置persistentState为true：persistentStateSave, persistentStateLoad(把value存在valuePlaceholder.value), persistentStateReset,
为什么要使用persistentState？可以把多个实例存储的数据分隔开。
还不知道怎么用。
设定选项
1、cell数组
cell: [
{row: 0, col: 0, readOnly: true}
]
2、cells函数
cells: function(row, col, prop){
var cellProperties = {};
if(row === 0 && col === 0){
cellProperties.readOnly = true;
}
return cellProperties;
}
3、串联设置：第一列可以编辑；第一列的第一行 和 其他 都是只读的。
readOnly: true,
columns: [
{readOnly: false},
{},
{}
],
cells: function (row, col, prop) {
var cellProperties = {}
if (row === 0 && col === 0) {
cellProperties.readOnly = true;
}
return cellProperties;
}
4、串联配置模型
//constructor
new Handsontable(document.getElementById(‘example‘), {
option: ‘value‘
});
//columns
new Handsontable(document.getElementById(‘example‘), {
columns: {
option: ‘value‘
}
});
//cells
new Handsontable(document.getElementById(‘example‘), {
cells: function(row, col, prop) {
}
});
回调函数好复杂
单元格类型：这里有很多没见过的用法，得好好总结一下
var data = [
{id: 1, name: ‘Ted‘, isActive: true, color: ‘orange‘, date: ‘2015-01-01‘},
{id: 2, name: ‘John‘, isActive: false, color: ‘black‘, date: null},
{id: 3, name: ‘Al‘, isActive: true, color: ‘red‘, date: null},
{id: 4, name: ‘Ben‘, isActive: false, color: ‘blue‘, date: null}
],
container = document.getElementById(‘example‘),
hot,
yellowRenderer,
greenRenderer;
yellowRenderer = function(instance, td, row, col, prop, value, cellProperties){
//renderer，少加了个s
Handsontable.renderers.TextRenderer.apply(this, arguments);
td.style.backgroundColor = ‘yellow‘;
};
greenRenderer = function(instance, td, row, col, prop, value, cellProperties){
Handsontable.renderers.TextRenderer.apply(this, arguments);
td.style.backgroundColor = ‘green‘;
};
hot = Handsontable(container, {
data:data,
startRows: 5,
colHeader: true,
minSpareRows: 1,
columns: [
{data:‘id‘},
{data:‘name‘, renderer:yellowRenderer},
{data:‘isActive‘, type:‘checkbox‘},
//date写成了data
{data:‘date‘, type:‘date‘, deteFormat:‘YYYY-MM-DD‘},
{data:‘color‘, type:‘autocomplete‘, source:[‘yellow‘, ‘red‘, ‘orange‘, ‘blue‘, ‘green‘]}
],
cell: [
{row:1, col:0, renderer: greenRenderer}
],
cells: function(row, col, prop){
if(row === 0 && col === 0){
this.renderer = greenRenderer;
}
}
});
columns: [{
type: ‘text‘
}]
等于
columns: [{
renderer: Handsontable.renderers.TextRenderer,
editor: Handsontable.editors.TextEditor
}]
看到单元格编辑
标签：
原文地址：http://www.cnblogs.com/wang-jing/p/4639637.html
