以下代码实现的功能为,创建handsonTable可编辑表格,然后但击任意的cell设置新的内容到这个cell
HTML代码:
javascript代码:
HTML代码:
<html>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="http://handsontable.com//styles/main.css" rel="stylesheet">
<link href="http://handsontable.com//bower_components/handsontable/dist/handsontable.full.min.css" rel="stylesheet">
<script src="http://handsontable.com//bower_components/handsontable/dist/handsontable.full.min.js"></script>
<body>
<div id="basic_example"></div>
</body>
</html>
javascript代码:
$(document).ready(function () {
var container = document.getElementById('basic_example');
var data = function () {
return Handsontable.helper.createSpreadsheetData(100, 12);
};
var hot = new Handsontable(container, {
data: data(),
height: 396,
colHeaders: true,
rowHeaders: true,
stretchH: 'all',
columnSorting: true,
contextMenu: true
});
//单击事件的回调函数
function callBack(event,coords,td){
var row = coords.row;
var col = coords.col;
if(row!=0 && col!=0){
var ss = hot.getCell(row,col,true);//取出点击Cell
var currVal = $(ss).html();//取出点击Cell的内容
hot.setDataAtCell(row,col,"修改cell内容","edit");//设置cell的新内容
}
}
//单击事件
Handsontable.hooks.add('afterOnCellMouseDown',callBack,hot);
});