在单元格中呈现自定义的元素：不能使用html元素
var
data = [
{
title: "<a href='http://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691'>Professional JavaScript for Web Developers</a>",
description: "This <a href='http://bit.ly/sM1bDf'>book</a> provides a developer-level introduction along with more advanced and useful features of <b>JavaScript</b>.",
//'★★★★☆'
comments: "I would rate it ★★★★☆",
cover: "http://ecx.images-amazon.com/images/I/51bRhyVTVGL._SL50_.jpg"
},
{
title: "<a href='http://shop.oreilly.com/product/9780596517748.do'>JavaScript: The Good Parts</a>",
description: "This book provides a developer-level introduction along with <b>more advanced</b> and useful features of JavaScript.",
comments: "This is the book about JavaScript",
cover: "http://ecx.images-amazon.com/images/I/51gdVAEfPUL._SL50_.jpg"
},
{
title: "<a href='http://shop.oreilly.com/product/9780596805531.do'>JavaScript: The Definitive Guide</a>",
description: "<em>JavaScript: The Definitive Guide</em> provides a thorough description of the core <b>JavaScript</b> language and both the legacy and standard DOMs implemented in web browsers.",
comments: "I've never actually read it, but the <a href='http://shop.oreilly.com/product/9780596805531.do'>comments</a> are highly <strong>positive</strong>.",
cover: "http://ecx.images-amazon.com/images/I/51VFNL4T7kL._SL50_.jpg"
}
],
container1,
hot1;
container1 = document.getElementById('example1');
hot1 = new Handsontable(container1, {
data: data,
colWidths: [200, 200, 200, 80],
colHeaders: ["Title", "Description", "Comments", "Cover"],
columns: [
{data: "title", renderer: "html"},
{data: "description", renderer: "html"},
{data: "comments", renderer: safeHtmlRenderer},
{data: "cover", renderer: coverRenderer}
]
});
// original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// 只允许input中包含allowed中指定的标签
function strip_tags(input, allowed) {
var tags = /</?([a-z][a-z0-9]*)[^>]*>/gi,
commentsAndPhpTags = /<!--[sS]*?-->|<?(?:php)?[sS]*??>/gi;
// making sure the allowed arg is a string containing only tags in lowercase (<a><b><c>)
allowed = (((allowed || "") + "").toLowerCase().match(/<[a-z][a-z0-9]*>/g) || []).join('');
return input.replace(commentsAndPhpTags, '').replace(tags, function ($0, $1) {
return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '';
});
}
function safeHtmlRenderer(instance, td, row, col, prop, value, cellProperties) {
//这种方法我还没有用过
var escaped = Handsontable.helper.stringify(value);
escaped = strip_tags(escaped, '<em><b><strong><a><big>'); //be sure you only allow certain HTML tags to avoid XSS threats (you should also remove unwanted HTML attributes)
td.innerHTML = escaped;
return td;
}
function coverRenderer (instance, td, row, col, prop, value, cellProperties) {
var escaped = Handsontable.helper.stringify(value),
img;
if (escaped.indexOf('http') === 0) {
img = document.createElement('IMG');
img.src = value;
Handsontable.Dom.addEvent(img, 'mousedown', function (e){
//防止出现异常情况
e.preventDefault(); // prevent selection quirk
});
Handsontable.Dom.empty(td);
td.appendChild(img);
}
else {
// render as text
//如果不是http开头的话，当前的renderer就是用textrenderer
Handsontable.renderers.TextRenderer.apply(this, arguments);
}
return td;
}
thead中呈现自定义元素：呈现自定义元素，都是通过renderer函数
var
isChecked,
container2 = document.getElementById('example2'),
hot2;
hot2 = new Handsontable(container2, {
columns: [
{},
{renderer: customRenderer}
],
colHeaders: function (col) {
var txt;
switch (col) {
case 0:
return '<b>Bold</b> and <em>Beautiful</em>';
case 1:
txt = "Some <input type='checkbox' class='checker' ";
txt += isChecked ? 'checked="checked"' : '';
txt += "> checkbox";
return txt;
}
}
});
function customRenderer(instance, td) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
if (isChecked) {
td.style.backgroundColor = 'yellow';
}
else {
td.style.backgroundColor = 'white';
}
return td;
}
Handsontable.Dom.addEvent(container2, 'mousedown', function (event) {
if (event.target.nodeName == 'INPUT' && event.target.className == 'checker') {
//阻止事件传播
event.stopPropagation();
}
});
Handsontable.Dom.addEvent(container2, 'mouseup', function (event) {
if (event.target.nodeName == 'INPUT' && event.target.className == 'checker') {
isChecked = !event.target.checked;
//调用customRenderer
hot2.render();
}
});
在thead中，通过下拉菜单，改变单元格的类型
cell type numeric：使用Numeral.js来进行格式化
cell type date：需要引入pikaday.js, pikaday.css, moment.js; 默认的格式是DD/MM/YYYY, 设置dateFormat和correctFormat之后，会改变
{
type: 'date',
dateFormat: 'MM/DD/YYYY',
correctFormat: true,
defaultDate: '01/01/1900'
},
checkbox：只有两个值（默认为true，false）的话，可以使用checkbox；如果想使用其他值的话
{
data: "comesInBlack",
type: "checkbox",
checkedTemplate: 'yes',
uncheckedTemplate: 'no'
}
select：双击之后，才会出现下拉菜单
{
editor: 'select',
selectOptions: ['Kia', 'Nissan', 'Toyota', 'Honda']
},
dropdown：不用双击，就能看到下拉菜单；跟autocomplete很像
{
type: 'dropdown',
source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white']
},
//type:'dropdown' 相当于 type:'autocomplete', strict:true, filter:false
autocomplete：可以选择， 可以编辑
{
type: 'autocomplete',
source: ['BMW', 'Chrysler', 'Nissan', 'Suzuki', 'Toyota', 'Volvo'],
strict: false
},
//默认是lazy mode
strict
ajax
password：hashLenght：10：黑点相同，都有10个
handsontable