Как отредактировать текст заголовка Handsontable?

Я хотел бы иметь возможность редактировать текст заголовков столбцов в Handsontable, но я не могу понять, возможно ли сделать их доступными для редактирования. Полагаю, я мог бы сделать заголовки еще одной строкой, но я бы хотел избежать этого, если это вообще возможно.

Чтобы уточнить: я действительно ищу способ разрешить пользователю редактировать значения заголовка (так как они будут иметь нормальную ячейку таблицы

Ответы

Ответ 1

Возможно, слишком поздно для OP, но кто-либо другой ищет тот же ответ, вы можете изменить заголовки столбцов (а также другие настройки) после того, как таблица уже была обработана следующим образом:

var hot = $container.data('handsontable');
hot.updateSettings({
  colHeaders: ['A','B','C']
});

Насколько я могу судить, вы можете передать любые настройки, доступные в конструкторе.

Ответ 2

В образце Backbone (http://handsontable.com/demo/backbone.html) они могут показать, что вы ищете:

var $container = $("#example1");
$container.handsontable({
  data: cars,
  dataSchema: makeCar,
  contextMenu: true,
  columns: [
    attr("make"),
    attr("model"),
    attr("year")
  ],
  colHeaders: ["Make", "Model", "Year"]
  //minSpareRows: 1 //see notes on the left for `minSpareRows`
});

Ответ 3

Один из способов сделать это - использовать afterGetColHeader.

Скопируйте с здесь

    afterGetColHeader: function (col, TH) {
        // nothing for first column
        if (col == -1) {
            return;
        }
        var instance = this;
        // create input element
        var input = document.createElement('input');
            input.type = 'text';
            input.value = TH.firstChild.textContent;

        TH.appendChild(input);

        Handsontable.Dom.addEvent(input, 'change', function (e){
            var headers = instance.getColHeader();
                headers[col] = input.value;
            instance.updateSettings({
                colHeaders: headers
            });
        });

        TH.style.position = 'relative';
        TH.firstChild.style.display = 'none';
    }