<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../static/js/jquery-1.9.1.min.js"></script>
<link type="text/css" rel="stylesheet" href="../static/js/hst/handsontable.full.css"/>
<script type="text/javascript" src="../static/js/hst/handsontable.full.js"></script>
<script src="../static/js/hst/languages/zh-CN.js"></script>
</head>
<body>
<div id="ee"></div>
</body>
<script>
$(function(){
var container = document.getElementById('ee');
// 参数类型
// var options = {
// data: Array || Object, // data 是整个表格的数据源,可以接收一个二维数组,或者一个对象
// rowHeaders: Boolean || Array || function,//上边的标题
// colHeaders: Boolean || Array || function,//左边的标题
// cells: function, // row, col, prop//单元格标题
// stretchH: String, // 'all', 'none', 'last',
// columns: Array || function,//data具体的展示列
// columnSorting: Boolean || Object,//设置是否可以排序
// manualColumnResize: true,//
// renderer: function,// 属性可以自定义单元格的各种属性
// }
// // 作为对象数据
// data = [
// {td1: "b0_0", td2: "b0_1", td3: "b0_2"},
// {td1: "b1_0", td2: "b1_1", td3:"b1_2"},
// {td1: "b2_0", td2: 'b2_1', td3:"b2_2"},
// {td1: "b3_0", td2: 'b3_1', td3:"b3_2"},
// {td1: "b4_0", td2: 'b4_1', td3:"b4_2"},
// {td1: "b5_0", td2: 'b5_1', td3:"b5_2"},
// ];
// new Handsontable(container, {
// data: data,
// colHeaders: true,
// columns: [
// {data: 'td1'},
// {data: 'td2'},
// {data: 'td3'}
// ],
// });
//使用数组做对象
let data = [
['', 'Kia', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
['2012', 10, 11, 12, 13, 15, 16],
['2013', 10, 11, 12, 13, 15, 16],
['2014', 10, 11, 12, 13, 15, 16],
['2015', 10, 11, 12, 13, 15, 16],
['2016', 10, 11, 12, 13, 15, 16]
];
// 相应配置(每一列显示哪些数据由columns决定)
let hot = new Handsontable(container, {
data: data,
colHeaders: true,//上标题 //应该是一样的
rowHeaders: true,//左标题//可以是数组也可以是函数
//cells 设置单元格的属性 设置第一列未只读 (只能是属性?不能是样式???)
cells: function (row, col, prop) {
var cellProperties = {};
if (col === 0) {
cellProperties.readOnly = true;
}
return cellProperties;
},
stretchH: 'none', // all 全列按最大宽度展开; none 紧缩的表格; last 最后一列展开
columns: [//columns 决定显示数组中对应的数据 如第一行显示 0 2 3...( 1不显示)
{data: 0},
{data: 2},
{data: 3},
{data: 4},
{data: 5},
{data: 6}
],
renderer: function (instance, td, row, col, prop, value, cellProperties) {
// 渲染为text类型,可选的有TimeRenderer、PasswordRenderer等不同的类型
Handsontable.renderers.TextRenderer.apply(this, arguments);
// 判断条件
if (value && row === 2) {
td.style.backgroundColor = '#e0ecff';
}
}
});
hot.addHook('afterChange', function (changeData, source) {
// changeData 是一个数组,第一个元素(数组),记录所有修改信息
if (!changeData) return;
var change = changeData[0],
row = change[0],
colProp = change[1],
preData = change[2],
newData = change[3];
})
let a= hot.getCell(0, 0)
debugger
})
</script>
</html>
handsontable 例子。
最新推荐文章于 2024-01-09 08:37:46 发布