handsontable-developer guide-cell type

单元格类型:这里有很多没见过的用法,得好好总结一下

//预定义的类型
Text Numeric Checkbox Date Select Dropdown Autocomplete Password Handsontable in Handsontable Custom
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
}]

 

posted on 2015-07-18 10:17  j.w  阅读(467)  评论(0编辑  收藏  举报