阅读排行

handsontable

---恢复内容开始---

很像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