原文发表于个人博客>>欢迎使用HandsonTable简介Handsontable是一个类excel表格编辑器，支持丰富的显示和交互，支持各种单元格显示和配置。核心由原生js（es6）编写，通过webpack打包，同类Jspreadsheets项目中，点赞最多的，Jspreadsheets列出官网地址HandsonTable支持的特性Handsontable的一些主要功能：editContextmenuDrag-downDropdownFreezingMergecellsCommentsDatavalidationCustomHTMLsortingtable这里只列出主要功能，想了解更多，可以查看官方文档。下面是官方演示图：HowtoimplementahandsontableHandsontable的核心可以分为三个方面：配置，事件，方法：配置引入了handsontable包，以及一个新的Handsontable实例//CreateanewHansontableinstancevarcontainer=document.getElementById('dataGrid');varhot=newHandsontable(container,options);//选项如下//Handsontable的一些主要配置varoptions={data:Array||Object,//data是整个表的数据源，可以接收一个二维Array，也可以是一个对象rowHeaders:Boolean||数组||函数，colHeaders：布尔值||数组||function,cells:function,//row,col,propstretchH:String,//'all','none','last',columns:数组||函数，列排序：布尔值||object,manualColumnResize:true,renderer:function,}然后说说上面每个配置项的用法：datadata是整个表的数据源，可以接收一个二进制维数组，或者一个对象//作为数组data=[['','起亚','日产','丰田','本田','马自达','福特'],['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决定）newHandsontable(container,{data:data,colHeaders:true,columns:[{data:0},{data:2},{data:3},{数据:4},{数据:5},{数据:6}]});//作为对象数据data=[{id:1,name:'TedRight',address:''},{id:2,name:'FrankHonest',address:''},{id:3,name：'JoanWell'，地址：''}，{id：4，名称：'GailPolite'，地址：''}，{id：5，名称：'MichaelFair'，地址：''}，];newHandsontable(container5,{data:data,colHeaders:true,columns:[{data:'id'},{data:'name'},{data:'address'}],});rowHeadersrowHeaders属性用于设置表格每一行的表头，一共有三种形式：//如果为true，则行表头从1开始依次向后数{rowHeaders:true,}//设置为数组,然后根据数组的内容显示{rowHeader:[1,2,3,4,5]}//函数，接收一个index参数，更灵活{rowHeader:function(index){returnindex+'AB';}}cellscells属性用于设置每个单元格的属性//设置第一列只读{cells:function(row,col,prop){varcellProperties={};如果（col===0）{cellProperties.readOnly=true;}返回细胞属性；}}stretchHstretchH属性用于设置表格的展开方式，all表示整列按照最大宽度展开；none表示紧凑的表；last最后一列展开{stretchH:'all'//all所有列都按照最大宽度展开；没有一张紧凑的桌子；last展开最后一列}columnscolumns属性用于定义列属性，即每一列需要显示数据源的哪个属性另外，还可以定义每一列的数据属性，{columns:[{data:'id'},//第一列显示id属性{data:'name'},//第二列显示nameattribute{data:'age',type:'numeric'},//第三列显示年龄属性，只能填数字{data:'address'}//第四列显示地址属性],}columnSortingcolumnSorting用于设置表格的列是否可以排序，rendererrenderer属性可以自定义单元格的各种属性//用第三行数据给单元格着色{renderer:function(instance,td,row,col,prop,value,cellProperties){//渲染为文本类型，TimeRenderer和PasswordRenderer等不同类型可选Handsontable.renderers.TextRenderer.apply(this,arguments);//判断条件if(value&&row===2){td.style.backgroundColor='#e0ecff';}}}事件生成Handsontable实例后，会显示一个表格。如果要添加更多交互效果，需要注册监听事件。//实例对象varhot=newHandsontable(container,options);//使用实例方法addHook注册事件hot.addHook(key,callback);//key是事件名称//除了addHook方法，事件还可以是Name，写在配置中{afterChange:function(change){}}常见的事件afterChangeafterChange在cell变化时触发，比如编辑cell后，接收两个参数changeData,sourcehot.addHook('afterChange',function(changeData,source){//changeData是一个数组，第一个元素（array），记录所有修改信息if(!changeData)return;varchange=changeData[0],row=change[0],colProp=change[1],preData=change[2],newData=change[3];})afterOnCellMouseDownafterOnCellMouseDown在鼠标点击单元格后触发//afterOnCellMouseDown在鼠标点击单元格后触发，接收两个参数eventcellCoords//事件标准鼠标点击事件//cellCoords对象，保存row、col信息hot.addHook('afterOnCellMouseDown',function(event,cellCoords){varrow=cellCoords.row,col=cellCoords.col;})afterBeginEditingafterBeginEditing在单元格开始编辑时触发hot.addHook('afterBeginEditing',function(row,col){})methodgetCellgetCell(row,col)获取指定单元格alteralter(行动，index,amount,source,keepEmptyRows)alter方法用于改变表结构，即插入或删除行列数据动作可用于改变表结构操作insert_row、insert_col、remove_row、remove_colindex行列索引值，从0开始，insert操作会插入到索引中的前一行/列的值amount（可选，默认1）：要插入/删除的行数和列数source（可选）：行或列对象keepEmptyRows（可选）：防止删除空行，true/falsesetDataAtCellsetDataAtCell(row,col,value,source)设置单元格的数据rowindexcolcolumnindexvalue要设置的单元格数据source（可选）字符串标识符描述如何此更改将更改数组（为onAfterChange或onBeforeChange回调生成的html结构），如下代码所示。生成表的主体在ht_master中，rowHeader、colHeader和freezingCol会克隆主体的内容，放在它的兄弟节点中。同时编辑时的输入只会生成一个textarea。
