handsontable-cell features
数据验证:在columns中设置validator,进行同步或异步验证,还可添加beforeValidate, afterValidate函数,allowInvalid:true可以不用验证
var people = [ {id: 1, name: {first: 'Joe', last: 'Fabiano'}, ip: '0.0.0.1', email: 'Joe.Fabiano@ex.com'}, {id: 2, name: {first: 'Fred', last: 'Wecler'}, ip: '0.0.0.1', email: 'Fred.Wecler@ex.com'}, {id: 3, name: {first: 'Steve', last: 'Wilson'}, ip: '0.0.0.1', email: 'Steve.Wilson@ex.com'}, {id: 4, name: {first: 'Maria', last: 'Fernandez'}, ip: '0.0.0.1', email: 'M.Fernandez@ex.com'}, {id: 5, name: {first: 'Pierre', last: 'Barbault'}, ip: '0.0.0.1', email: 'Pierre.Barbault@ex.com'}, {id: 6, name: {first: 'Nancy', last: 'Moore'}, ip: '0.0.0.1', email: 'Nancy.Moore@ex.com'}, {id: 7, name: {first: 'Barbara', last: 'MacDonald'}, ip: '0.0.0.1', email: 'B.MacDonald@ex.com'}, {id: 8, name: {first: 'Wilma', last: 'Williams'}, ip: '0.0.0.1', email: 'Wilma.Williams@ex.com'}, {id: 9, name: {first: 'Sasha', last: 'Silver'}, ip: '0.0.0.1', email: 'Sasha.Silver@ex.com'}, {id: 10, name: {first: 'Don', last: 'Pérignon'}, ip: '0.0.0.1', email: 'Don.Pérignon@ex.com'}, {id: 11, name: {first: 'Aaron', last: 'Kinley'}, ip: '0.0.0.1', email: 'Aaron.Kinley@ex.com'} ], example1 = document.getElementById('example1'), example1console = document.getElementById('example1console'), settings1, ipValidatorRegexp, emailValidator; ipValidatorRegexp = /^(?:\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\b|null)$/; emailValidator = function (value, callback) { setTimeout(function(){
//还能这样验证 if (/.+@.+/.test(value)) { callback(true); } else { callback(false); } }, 1000); }; settings1 = { data: people,
//hooks beforeChange: function (changes, source) {
//changes是数组,数组的元素也是数组,包含四个属性0:10,1:'name.last',2:'Kinley',3:'foo' for (var i = changes.length - 1; i >= 0; i--) { // gently don't accept the word "foo" (remove the change at index i)
//如果想改为foo,会把这次修改删掉 if (changes[i][3] === 'foo') { changes.splice(i, 1); } // if any of pasted cells contains the word "nuke", reject the whole paste
//如果想改为nuke,只是拒绝,而不会删除此次修改 else if (changes[i][3] === 'nuke') { return false; } // capitalise first letter in column 1 and 2 else if ((changes[i][1] === 'name.first' || changes[i][1] === 'name.last') && changes[i][3].charAt(0)) { changes[i][3] = changes[i][3].charAt(0).toUpperCase() + changes[i][3].slice(1); } } }, afterChange: function (changes, source) { if (source !== 'loadData') { example1console.innerText = JSON.stringify(changes); } }, colHeaders: ['ID', 'First name', 'Last name', 'IP', 'E-mail'], columns: [ {data: 'id', type: 'numeric'}, {data: 'name.first'}, {data: 'name.last'},
//给ip加事件处理程序,可以不通过验证 {data: 'ip', validator: ipValidatorRegexp, allowInvalid: true}, {data: 'email', validator: emailValidator, allowInvalid: false} ] }; var hot = new Handsontable(example1, settings1);
往下拖
var data = [ ['', 'Kia', 'Nissan', 'Toyota', 'Honda'], ['2012', 10, 11, 12, 13], ['2013', 20, 11, 14, 13], ['2014', 30, 15, 12, 13], ['2015', '', '', '', ''], ['2016', '', '', '', ''] ], container = document.getElementById('example1'), hot1; hot1 = new Handsontable(container, { rowHeaders: true, colHeaders: true,
//默认为true,如果为"horizontal",则只能水平拖动 fillHandle: true // possible values: true, false, "horizontal", "vertical" }); hot1.loadData(data);
合并单元格
var container = document.getElementById('example1'), hot; hot = new Handsontable(container, { data: Handsontable.helper.createSpreadsheetData(100, 18), colWidths: [47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47], rowHeaders: true, colHeaders: true, contextMenu: true,
//使用mergeCells提供合并单元格的细节 mergeCells: [ {row: 1, col: 1, rowspan: 3, colspan: 3}, {row: 3, col: 4, rowspan: 2, colspan: 2}, {row: 5, col: 6, rowspan: 3, colspan: 3} ] });
布局:在cell中设置位置;水平方向:htLeft, htCenter, htRight, htJustify;垂直方向:htTop, htMiddle, htBottom
var container = document.getElementById('example1'), hot1; hot1 = new Handsontable(container, { data: Handsontable.helper.createSpreadsheetData(100, 18), colWidths: [47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47], rowHeaders: true, colHeaders: true, contextMenu: true, mergeCells: [ {row: 1, col: 1, rowspan: 3, colspan: 3}, {row: 3, col: 4, rowspan: 2, colspan: 2} ],
//预定义了很多类 className: "htCenter", cell: [ {row: 0, col: 0, className: "htRight"}, {row: 1, col: 1, className: "htLeft htMiddle"}, {row: 3, col: 4, className: "htLeft htBottom"} ],
//在这个hooks中,可以捕获到布局的改变 afterSetCellMeta: function (row, col, key, val) { console.log("cell meta changed", row, col, key, val); } });
列和单元格的只读属性
var container1 = document.getElementById('example1'), hot1; hot1 = new Handsontable(container1, { data: getCarData(), colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'], columns: [ { data: 'car',
//列只读 readOnly: true }, { data: 'year' }, { data: 'chassis' }, { data: 'bumper' } ] });
//单元格只读
var container2 = document.getElementById('example2'), hot2; hot2 = new Handsontable(container2, { data: getCarData(), colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'] }); hot2.updateSettings({ cells: function (row, col, prop) { var cellProperties = {}; if (hot2.getData()[row][prop] === 'Nissan') { cellProperties.readOnly = true; } return cellProperties; } })
列和单元格不可编辑:non-edit cell仍然可以拖动填充,复制粘贴,只是不能编辑;只读属性:不能做任何操作
var container1 = document.getElementById('example1'), hot1; hot1 = new Handsontable(container1, { data: getCarData(), colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'], columns: [ { data: 'car', editor: false }, { data: 'year', editor: 'numeric' }, { data: 'chassis', editor: 'text' }, { data: 'bumper', editor: 'text' } ] });
var container2 = document.getElementById('example2'), hot2; hot2 = new Handsontable(container2, { data: getCarData(), colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'] }); hot2.updateSettings({ cells: function (row, col, prop) { var cellProperties = {}; if (hot2.getData()[row][prop] === 'Nissan') { cellProperties.editor = false; } else { cellProperties.editor = 'text'; } return cellProperties; } })