console
const container = document.getElementById('example');
const hot = new Handsontable(container, {
data: [
['','A1','B1','C1','D1','E1','F1','G1'],
['','A2','B2','C2','D2','E2','F2','G2'],
['','A3','B3','C3','D3','E3','F3','G3'],
['','A4','B4','C4','D4','E4','F4','G4'],
['','A5','B5','C5','D5','E5','F5','G5'],
['','A6','B6','C6','D6','E6','F6','G6'],
['','A7','B7','C7','D7','E7','F7','G7'],
['','A8','B8','C8','D8','E8','F8','G8'],
['','A9','B9','C9','D9','E9','F9','G9'],
['','A10','B10','C10','D10','E10','F10','G10'],
],
licenseKey: 'non-commercial-and-evaluation',
colWidths: 100,
width: '100%',
height: 320,
rowHeights: 23,
rowHeaders: false,
colHeaders: true,
layoutDirection: 'rtl',
fixedColumnsStart: 4,
multiColumnSorting: true,
nestedHeaders: [
['','','','合计','' , '', '', ''],
['','215','123','215','' , '', '', ''],
['<input type = "checkbox" id="cusGroupCheck" class="checker" name="cusGroupCheck"/>','A','B','C','D','E' , 'F', 'G']
],
mergeCells: [
{ row: -1, col: 0, rowspan: 3, colspan: 3 }
],
columns:[
{
type: 'checkbox',
className: 'htCenter',
},
{
type: 'text',
editor: false,
},
{
type: 'text',
editor: false,
},
{
type: 'text',
editor: false,
},
{
type: 'text',
editor: false,
},
{
type: 'text',
editor: false,
},
{
type: 'text',
editor: false,
},
{
type: 'text',
editor: false,
},
]
});
hot.selectCell(0, 0, 3, 4);
<div id="example"></div>
<script src="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.css">
.wtBorder.current,
.wtBorder.area {
background-color: rgba(0, 0, 0, 0) !important;
}
.handsontable td.area:before {
background: white !important;
}
.htCore thead tr:nth-child(1) th:nth-child(8){
display: none
}
.htCore thead tr:nth-child(1) th:nth-child(7){
display: none
}
.htCore thead tr:nth-child(1) th:nth-child(6){
display: none
}
.htCore thead tr:nth-child(1) th:nth-child(5){
display: none
}
.htCore thead tr:nth-child(1) th:nth-child(3){
background-color: rgba(0, 0, 0, 0);
border:none;
}
.htCore thead tr:nth-child(1) th:nth-child(4){
border-right:1px solid gainsboro
}
.htCore thead tr:nth-child(1) th:nth-child(2){
opacity: 0;
border: none;
}
.htCore thead tr:nth-child(1) th:nth-child(1){
opacity: 0;
border: none;
}
.htCore thead tr:nth-child(2) th:nth-child(8){
display: none
}
.htCore thead tr:nth-child(2) th:nth-child(7){
display: none
}
.htCore thead tr:nth-child(2) th:nth-child(6){
display: none
}
.htCore thead tr:nth-child(2) th:nth-child(5){
display: none
}
.htCore thead tr:nth-child(2) th:nth-child(3){
border-top:1px solid gainsboro
}
.htCore thead tr:nth-child(2) th:nth-child(2){
border-top:1px solid gainsboro
}
.htCore thead tr:nth-child(2) th:nth-child(1){
background-color: rgba(0, 0, 0, 0);
border:none;
}
.htCore thead tr:nth-child(3) th:nth-child(8){
border-top:1px solid gainsboro
}
.htCore thead tr:nth-child(3) th:nth-child(7){
border-top:1px solid gainsboro
}
.htCore thead tr:nth-child(3) th:nth-child(6){
border-top:1px solid gainsboro
}
.htCore thead tr:nth-child(3) th:nth-child(5){
border-top:1px solid gainsboro
}
.htCore thead tr:nth-child(3) th:nth-child(1){
border-top:1px solid gainsboro
}