Handontable不显示超过5列

Question

我用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

Answer 1

我认为这 如果你愿意，你可以设置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方式应该使用data

在下面的样品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>

我希望这是对您有所帮助。