Notes on the plug-in of handsontable imitating excel

Post a link to the official website of handsontable first Click to open the link

The biggest advantage of this plug-in is to move excel from the local to the web, and the operation is basically the same as excel. Users do not need to relearn, which is very consistent with the operation habits of the clerks. First, briefly introduce the following operation steps:

1. Initialize table

/*Table initialization*/
var container = document.getElementById('Your form id');
var hot = new Handsontable(container, {
data: 'Your data', //Array format [{k,v}](k should match the data field in the following columns, otherwise the data is invalid)
rowHeaders: false, //Enable default header
dataSchema: {time: null, num:null,total:null,option: null}, //Initialize each field
colHeaders: [" number","time","Number","Amount of money","operation"], //Custom header
columns: [
 {data: 'number',className:"htCenter",readOnly: true}, //readOnly whether to turn on read-only className is to set text centered typesetting 
 {data: 'time',className:"htCenter",readOnly: true}, //readOnly = false to check and adjust the data in the box
 {data: 'num',className:"htCenter",readOnly: true},
 {data: 'total',className:"htCenter",readOnly: true},
 {data: 'option',className:"htCenter",readOnly: true,renderer: coverRenderer()}
], //Column property settings (in this case, buttons are added to the list dynamically through js)
height:500, //Default table height
stretchH:'all', //self-adaption
contextMenu:false, //Right click menu
columnSorting:true, //Allow sorting
minRows:20, //Minimum number of rows
})

/*Button generation method*/
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\">Show details</button>"
 +"<button type=\"button\" data-id='' class=\"btn btn-xs btn-primary optionBtn\">Add contrast</button>";	
td.className="htCenter";
td.innerHTML = btns;
return td;
}

Rendering display


Here the table is created, it's so simple.

2. Now share some problems encountered in the project

a. In order to avoid too little data, a default table is set

minRows:20, //Minimum number of rows
It turns out to be embarrassing. Look at the picture below


The minimum number of rows in the table is out, but the buttons at the back are all added.
The reason for the problem should be that Baidu didn't make a judgment when generating the button and whether there was data in the line. After Baidu didn't find the same problem in a circle, it figured out a simple way to directly determine whether the number of lines is greater than the data length. Based on this, it judged whether to initialize the button, and finally achieved the effect of Figure 1.

// if((row+1)>arrayLength){
// 	return ;
// }
Come here first today, and then update this article. Have a happy New Year!

Tags: Excel

Posted on Fri, 01 May 2020 03:05:02 -0700 by Petrushka