Handontable не показывает более 5 столбцов

Question

Handontable не показывает более 5 столбцов

1

Я использовал свойство 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

Ritesh Suvarna 15 сен. 2017, в 13:46

Источник

Теги:

javascript

css

handsontable

1 ответ

Ещё вопросы

weBBer · Accepted Answer · 2017-09-15T10-32-00.000Z

Я думаю, что это сработает для вас -

если вы хотите, вы можете установить 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>

Надеюсь, это было полезно для вас.