handsontable 仿excel表格插件备忘

先贴一个handsontable官网链接点击打开链接

这款插件的最大优点就是把excel从本地搬到了web上，而且操作与excel基本一致，使用者不需要重新学习，非常符合文员的操作习惯，先简单介绍下操作步骤：

1.初始化table

/*表格初始化*/
var container = document.getElementById('你的表格id');
var hot = new Handsontable(container, {
data: '你的数据', //数组格式[{k,v}](k要与下面columns中的data字段匹配，否则数据无效)
rowHeaders: false, //是否开启默认表头
dataSchema: {time: null, num:null,total:null,option: null}, //初始化各字段
colHeaders: [" 编号","时间","数量","金额","操作"], //自定义表头
columns: [
 {data: 'number',className:"htCenter",readOnly: true}, //readOnly是否开启只读 className是设置文字居中排版 
 {data: 'time',className:"htCenter",readOnly: true}, //readOnly = false则可以选中并调整选框中的数据
 {data: 'num',className:"htCenter",readOnly: true},
 {data: 'total',className:"htCenter",readOnly: true},
 {data: 'option',className:"htCenter",readOnly: true,renderer: coverRenderer()}
], //列属性设置(此处是通过js动态向列表中添加了按钮)
height:500, //默认表格高度
stretchH:'all', //自适应
contextMenu:false, //右键菜单
columnSorting:true, //允许排序
minRows:20, //最小行数
})

/*按钮生成方法*/
function coverRenderer(instance, td, row, col, prop, value, cellProperties) {
// if((row+1)>arrayLength){
// 	return ;
// }
 var btns = "<button type=\"button\" data-id='1' class=\"btn btn-xs btn-primary optionBtn\">展示详情</button>"
 +"<button type=\"button\" data-id='' class=\"btn btn-xs btn-primary optionBtn\">加入对比</button>";	
td.className="htCenter";
td.innerHTML = btns;
return td;
}

效果图展示

到这里表格就创建好了,就这么简单。

2.现在分享些项目中遇到的问题

a.为避免数据太少表格展示不太美观的情况，给表格设置了一个默认的

minRows:20, //最小行数

结果就尴尬了，看下图

表格的最小行数是出来了，但是后面的按钮也全给加上了。
问题的原因应该是生成按钮时没有做判断，所在行是否有数据，百度了一圈没有发现相同的问题后，自己琢磨了一个简单的，就是直接判断行数是否大于数据长度，根据这个来判断是否初始化按钮，最终就实现了图一的效果。

// if((row+1)>arrayLength){
// 	return ;
// }

今天就先到这，之后还会更新这篇文章，祝大家新年愉快！