我使用colHeaders属性来设置标题。 但只有前五列可见,直到我粘贴超过 5 列的数据 代码:
var dataPrePop =["1","2","3","4","5","6","7","8"]
var container = document.getElementById('example');
var hot = new Handsontable(container, {
colHeaders: dataPrePop,
contextMenu: true
});
完整源代码 -
var dataPrePop = ["1", "2", "3", "4", "5", "6", "7", "8"]
var container = document.getElementById('example');
var hot = new Handsontable(container, {
colHeaders: dataPrePop,
//minSpareCols: 1,
//minSpareRows: 1,
//rowHeaders: true,
//colHeaders: true,
contextMenu: true
});
body {
margin: 20px 30px;
font-size: 13px;
font-family: 'Open Sans', Helvetica, Arial;
}
a {
color: #34A9DC;
text-decoration: none;
}
p {
margin: 5px 0 20px;
}
h2 {
margin: 20px 0 0;
font-size: 18px;
font-weight: normal;
}
<link href="https://docs.handsontable.com/0.34.4/bower_components/handsontable/dist/handsontable.full.css" rel="stylesheet" />
<script src="https://docs.handsontable.com/0.34.4/bower_components/handsontable/dist/handsontable.full.js"></script>
<h2>Handsontable Basic Example (100x10)</h2>
<p>
Head to <a href="https://handsontable.com" target="_blank">handsontable.com</a> to learn more about Handsontable.
</p>
<div id="example"></div>
<强> jsfiddle
最佳答案
我认为这对你有用 -
如果您愿意,可以设置minCols
minCols: 8 // -- this will do your job
正在为您创建一个工作示例。
var dataPrePop = ["1", "2", "3", "4", "5", "6", "7", "8"]
var container = document.getElementById('example');
var hot = new Handsontable(container, {
colHeaders: dataPrePop,
minCols: 8,
//minSpareCols: 1,
//minSpareRows: 1,
//rowHeaders: true,
//colHeaders: true,
contextMenu: true
});
body {
margin: 20px 30px;
font-size: 13px;
font-family: 'Open Sans', Helvetica, Arial;
}
a {
color: #34A9DC;
text-decoration: none;
}
p {
margin: 5px 0 20px;
}
h2 {
margin: 20px 0 0;
font-size: 18px;
font-weight: normal;
}
<link href="https://docs.handsontable.com/0.34.4/bower_components/handsontable/dist/handsontable.full.css" rel="stylesheet" />
<script src="https://docs.handsontable.com/0.34.4/bower_components/handsontable/dist/handsontable.full.js"></script>
<h2>Handsontable Basic Example (100x10)</h2>
<p>
Head to <a href="https://handsontable.com" target="_blank">handsontable.com</a> to learn more about Handsontable.
</p>
<div id="example"></div>
#2 方式应该使用数据
在下面的示例中 createSpreadsheetData(5, 8)
处理表格中的列数和行数。
var dataPrePop = Handsontable.helper.createSpreadsheetData(5, 8);
var container = document.getElementById('example');
var hot = new Handsontable(container, {
data: dataPrePop,
//minSpareCols: 1,
//minSpareRows: 1,
//rowHeaders: true,
//colHeaders: true,
contextMenu: true
});
body {
margin: 20px 30px;
font-size: 13px;
font-family: 'Open Sans', Helvetica, Arial;
}
a {
color: #34A9DC;
text-decoration: none;
}
p {
margin: 5px 0 20px;
}
h2 {
margin: 20px 0 0;
font-size: 18px;
font-weight: normal;
}
<link href="https://docs.handsontable.com/0.34.4/bower_components/handsontable/dist/handsontable.full.css" rel="stylesheet" />
<script src="https://docs.handsontable.com/0.34.4/bower_components/handsontable/dist/handsontable.full.js"></script>
<h2>Handsontable Basic Example (100x10)</h2>
<p>
Head to <a href="https://handsontable.com" target="_blank">handsontable.com</a> to learn more about Handsontable.
</p>
<div id="example"></div>
希望这对您有帮助。
关于javascript - Handsontable 未显示超过 5 列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46238412/