使用js或者jquery页面使用handsontable插件时直接引用即可
<script type="text/javascript" src="webpage/ims/handsontable.full.min.js"></script>
<link href="webpage/com/handsontable.full.min.css" rel="stylesheet" type="text/css">
创建表格
<body>
<div id ="example" class="dataTable"></div>
</body style="overflow:hidden">
<script type="text/javascript">
var hot;
$(function(){
var container = document.getElementById('example');
hot = new Handsontable(container, {
data:[['第1页','','','','','','']
],
rowHeaders: true,
colHeaders: ['页数','次数','项目代号', '编号', '名称', '备注'],
colWidths: [64,40,220, 200, 250, 150, 200],
columns: [
{readOnly: true},{readOnly: true},{},{},{},{},{}
],
contextMenu: {
items: {
"remove_row":{
name:"移除行"
},
"row_below": {
name: "插入行"
},
"free": {
name: "自定义",
callback: function(key, options) {
//这里可以自定义功能
//option可以获取起始和结束行等位置
var row =options[0].start.row;
}
}
},
beforeRowMove:(movedRows,finalIndex,dropIndex,movePossible,orderChanged)=>{
//这里是监听函数，拖拽前除法
},
afterRowMove: (movedRows,finalIndex,dropIndex,movePossible,orderChanged)=>{
//这里是监听函数，拖拽后除法
},
cells: function(row,col){
var cellproperties = {};
var data = this.instance.getData();
cellproperties.renderer = firstRowRenderer;
return cellproperties;
},
filters: false,
dropdownMenu: false,
manualRowMove: true,
beforeMergeCells:true,
licenseKey: 'non-commercial-and-evaluation',
minRows:33
});
});
function firstRowRenderer(instance,td,row,col,prop,value,cellPropert){
Handsontable.renderers.TextRenderer.apply(this,arguments);
var flag = judgeRow(row);
if(col===0&&flag){
td.style.background = '#cdd4dc';
}
if(col===1){
td.style.color = '#85a1d2';
}
}
以上用到的api包括
data：用来加载数据，数据的格式为json数组，数组内包含多个数组。
colHeaders：列标题。
colWidths：列宽。
columns：列属性。
contextMenu：右击的菜单，可以使用callback进行自定义按钮如上面的“自定义”按钮，或者采用官方的现有的api，具体的如下菜单预设属性。
filters：设置首行的过滤器。
minRows：初始加载最少多少行。
。。。后续更新
305
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
