如何在表中添加列

Question

尝试将新列添加到我的手持表末尾时收到错误消息

错误：无法创建新列。当数据源位于对象中时，您只能拥有第一个数据行、数据模式或“列”设置中定义的列数。如果您希望能够添加新列，则必须使用数组数据源。

<!-- 
Error: Cannot create new column. When data source is an object, you can only have as many columns as defined in the first data row, data schema, or in the 'columns' setting. 
If you want to be able to add new columns, you have to use an array data source.
-->


<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js"></script>

<div class="mt-3">
  <h2 id="dadoslab">Laboratory Data</h2>
  <button type="button" class="m-3 btn btn-primary" id="add-test">Add test</button>
  <div class="container">
    <div id="exam-table-container"></div>
  </div>
  <button type="button" class="m-3 btn btn-primary" id="add-test-2">Add test</button>
  <input type="hidden" name="handsontable_data" id="handsontable_data">
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const container = document.getElementById('exam-table-container');

        // Initial data definition as a two-dimensional array
        const data = [
            ['test Date'],
            ['test'],
            
        ];

        // Handsontable initialization
        const hot = new Handsontable(container, {
            data: data,
            colHeaders: function (colIndex) {
                if (colIndex === 0) {
                    return 'Exam'; // Header for the first column
                } 
                return `Exam ${colIndex}`; // Dynamic headers for other columns
            },
            columns: [
                { readOnly: true },
                { 
                    type: 'date',
                    dateFormat: 'DD/MM/YYYY',
                    correctFormat: true,
                    defaultDate: moment().format('DD/MM/YYYY'),
                    datePickerConfig: {
                        firstDay: 1, // Monday
                        showWeekNumber: true,
                        i18n: {
                            previousMonth: 'Previous month',
                            nextMonth: 'Next month',
                            months: ['January','February','March','April','May','June','July','August','September','October','November','December'],
                            weekdays: ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
                            weekdaysShort: ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']
                        },
                        disableDayFn: function(date) {
                            return date.getDay() === 0 || date.getDay() === 6; // Disable Sunday and Saturday
                        }
                    }
                }
            ],
            cells: function(row, col) {
                var cellProperties = {};
                if (row === 0) {
                    cellProperties.type = 'date';
                } else {
                    cellProperties.type = 'text';
                }
                return cellProperties;
            },
            rowHeaders: true,
            stretchH: 'all',
            width: '100%',  
            height: 'auto', 
            contextMenu: true,
        });

        // Add a new column when the button is clicked
        document.getElementById('add-test').addEventListener('click', function() {
            hot.alter('insert_col_end');
        });

        document.getElementById('add-test-2').addEventListener('click', function() {
            hot.alter('insert_col_end');
        });
    });
</script>

https://codepen.io/ViniciusDevelopment/pen/qBzaqzm

https://jsfiddle.net/DevelopmentSagaz/mctf30jd/

Answer 1

当您使用

columns

或基于对象的数据集时，通过上下文菜单选项添加列将被阻止。发生这种情况是因为，Handsontable 在底层使用了

later()

方法。

在这种情况下，您需要创建一个自定义上下文菜单并更改列数组，例如

cols.push({});
  hot.updateSettings({
    columns: cols
  })