数据验证:在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;
}
})

  

  

  

 

  

handsontable-cell features的更多相关文章

  1. Codeforces 549D. Hear Features[贪心 英语]

    D. Haar Features time limit per test 1 second memory limit per test 256 megabytes input standard inp ...

  2. 转:Busy Developers' Guide to HSSF and XSSF Features

    Busy Developers' Guide to Features Want to use HSSF and XSSF read and write spreadsheets in a hurry? ...

  3. Looksery Cup 2015 D. Haar Features 暴力

    D. Haar Features Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/549/prob ...

  4. 1.6.3 Uploading Data with Solr Cell using Apache Tika

    1. Uploading Data with Solr Cell using Apache Tika solr使用Apache Tika工程的代码提供了一个框架,用于合并所有不同格式的文件解析器为so ...

  5. Handsontable 学习笔记-Methods

    Handson: 亲自实践 先给出数据源和基本配置: var data =[ ["A1","B1","C1","D1"] ...

  6. Handsontable对单元格的操作

    1.自动填充单元格数据 fillHandle:true/false    //当值为true时,允许拖动单元格右下角,将其值自动填充到选中的单元格 2.合并单元格 mergeCells:[{row:起 ...

  7. handsontable 合并单元格

    <!DOCTYPE html> <html> <head> <title>handsontable demo</title> <met ...

  8. handsontable 属性汇总

    常规属性: 1.固定行列位置 fixedRowsTop:行数 //固定顶部多少行不能垂直滚动 fixedColumnsLeft:列数 //固定左侧多少列不能水平滚动 2.拖拽行头或列头改变行或列的大小 ...

  9. ADF BC New Features

      Examining ADF Business Components New Features Purpose In this tutorial, you create a series of si ...

  10. handsontable 常用 配置项 笔记

    import React, { Component } from 'react'; import HotTable from 'react-handsontable'; import Handsont ...

随机推荐

  1. vs2015 去除 git 源代码 绑定

    第一次碰到这个问题,想将源代码签入TFS管理.添加到源码管理后,默认添加到Git源码管理. 研究过后,发现: 1)删除框内文件 2)Vs2015->工具->选项->源代码管理-> ...

  2. Java ScriptEngine 解析js

    Java ScriptEngine 解析js 1.脚本引擎 ① 通过脚本名称获取:      ScriptEngine engine = new ScriptEngineManager().getEn ...

  3. java io之管道流

    一.java.io中存在一中流叫管道流,类似管道的功能.PipedOutputStream和PipedInputStream分别是管道输出流和管道输入流.这个两个流必须同时使用. 二.作用:进行两个线 ...

  4. php去除换行符的方法小结(PHP_EOL变量的使用)

    本来在unix世界换行就用/n来代替,但是windows为了体现他的不同,就用/r/n,更有意思的是在mac中用/r.因此unix系列用 /n,windows系列用 /r/n,mac用 /r,这样就用 ...

  5. 图搜索——使用DFS和BFS耗时比较

    图测试数据生成代码: #include<bits/stdc++.h> using namespace std; int random(int mod) { return rand() % ...

  6. id取模分表

    场景 1 假设按用户id分2个库 每个库分10张表. 分表策略 1.用户id%2 确定库  用户id%3确定表. 2.(用户id%(2*10))/ 10  取整确定库,(用户id%(2*10)%10确 ...

  7. RESTful API终极版序列化封装

    urls: from django.conf.urls import url from app01 import views urlpatterns = [ # url(r"comment/ ...

  8. Spring IO Platform介绍

    为什么要用Spring IO Platform 今天无意间看到了一个关键词:"Spring IO Platform",第一直觉是不是有关于IO方面的框架或者包呢,查了一下,居然是为 ...

  9. 对List集合进行排序

    一.说明 使用Collections工具类的sort方法对list进行排序 新建比较器Comparator 二.代码 排序: import java.util.ArrayList; import ja ...

  10. Shder中实现TintColor

    [Shder中实现TintColor] TintColor实现上相当于一个滤镜,若TintColor的R为0,则原图的R通道颜色应该为0.基于此,实现TintColor很容易,原图颜色直接乘以Tint ...