Установите максимальную ширину и максимальную высоту для ячеек таблицы

Question

Можно ли установить max-width а также max-height для клеток в Handsontable?

Я пытался установить это с помощью CSS на <th> а также <td> элементы, но это не работает.

Я видел в документах, что вы можете установить столбцы определенной ширины, но не максимумы.

Answer 1

Таким образом, решение состоит в том, чтобы использовать ваши горячие экземпляры manualColumnWidths массив. Этот массив автоматически устанавливает ширину всех столбцов. Он вложен где-то в код, так что в любое время происходит изменение в DOM, которое он обновляет, поэтому использование CSS или jQuery для ширины самих элементов не работает. Это хорошая структура, нам просто нужно, чтобы это было где-то более четко написано.

Обратите внимание, что вы можете повторить это для rows просто используя manualRowHeights вместо этого, как и остальные row методы.

Теперь, вот как вы должны установить максимумы и минимумы для событий изменения размера столбцов. Установить afterColumnResize вариант этой следующей функции:

function setAfterColumnResize() {
  return function(col, size) {

    var headers = $(".colHeader"); // first is empty if there are rowHeaders
    var maxW = [10, 200, 400]; // note that the first is the row header
    var minW = [1, 100, 100]; // note that the first is the row header

    var actualCol = col + 1; // this is to account for the row header

    var maxColW = maxW[actualCol];
    var minColW = minW[actualCol];
    var actualW = $(headers[actualCol]).parent().parent().width();

    if (hot && maxColW && actualW > maxColW) {
      hot.manualColumnWidths[col] = maxColW;
      hot.render()
    }

    if (hot && minColW && actualW < minColW) {
      hot.manualColumnWidths[col] = minColW;
      hot.render()
    }
  }
}

Теперь позвольте мне объяснить это. Когда это событие запускается, вы сначала находите заголовок, используя col Индекс это дает вам. Исправьте это, если у вас установлены заголовки строк true (что я и делаю здесь и на скрипке). Затем вы устанавливаете массивы максимальной / минимальной ширины (конечно, вы можете сделать это более элегантно в своем коде).

Затем возьмите текущую текущую ширину рассматриваемого столбца, посмотрев на родительский элемент родительского диапазона (это немного грязно, но это самый простой способ, который я нашел). Условный после должен быть самоочевидным.

И, наконец, важные биты. Вы можете увидеть это, зайдя hot.manualColumnWidths Вы можете установить желаемую ширину. Я установил его на максимум, если моя текущая ширина превышает его. Тогда просто перерисовать и все готово!

Есть несколько проблем, например, тот факт, что эти события вызываются только после изменения размера, поэтому, если вы изначально настроили отображение таблицы с шириной, превышающей максимальную, она ничего не сделает. Если это так, просто вызовите эту функцию после рендеринга таблицы в первый раз (вызывайте ее один раз для каждого столбца).

Это также будет иметь место, если вы не хотите использовать событие изменения размера столбца; в этом случае это будет обычная функция, которую вы вызываете после рендеринга.

Надеюсь это поможет! Вот демонстрационная скрипка, показывающая это в действии:D