Как мне автоматически изменить размер столбца в SlickGrid?

Question

Я хочу, чтобы slickgrid автоматически изменял размер столбцов на основе самого широкого содержимого или текста заголовка - в зависимости от того, что шире. Проще говоря, я хочу, чтобы он имитировал поведение по умолчанию обычных таблиц HTML, когда дело доходит до размера столбца. Как я могу сделать это в Slickgrid?

Answer 1

При построении ваших опций вы можете использовать forceFitColumns: true

var options = {
    enableCellNavigation: true,
    forceFitColumns: true
};

. Это позволит столбцам заполнить всю ширину вашей сетки.

Answer 2

ОП ищет столбцы для увеличения в соответствии с их содержимым. grid.autosizeColumns() увеличивает ячейки до родительского контейнера, что не одно и то же.

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

Алгоритм измерения - ваше большое решение. Вы можете убрать контент с экрана и измерить его, как предлагает @jay. Это работает, но это самый медленный метод, так как он требует перерисовки для вставки и перерисовки при удалении. Могут быть способы для оптимизации. Решение, которое я выбрал, состоит в том, чтобы измерить ширину каждой буквы алфавита, а также других типографских символов, с которыми мы сталкиваемся, и суммировать их, чтобы получить ширину. Да, это звучит абсурдно. У него много ограничений: размер шрифта должен быть одинаковым, он не поддерживает изображения, не может быть возврата строки и многое другое. Если вы можете жить с ограничениями, вы можете рассчитать размеры для огромного видового экрана сетки в <5ms, потому что ширина символов измеряется только один раз.

После того, как вы получите размеры столбцов, вы назначаете их столбцам, используя grid.setColumns().

Answer 3

Slickgrid не будет поддерживать автоматический размер столбца на основе данных. Вам нужно написать плагин или разветвить ядро ​​slickgrid для изменения.

Вот ссылка, которую я создал, чтобы обработать плагин для автоматического определения размера slickgrid https://github.com/naresh-n/slickgrid-column-data-autosize

Answer 4

Я добавил это после того, как сетка нарисована, и она отлично работает.

$(window).resize(function() {
var cols = grid.getColumns();
grid.setColumns(cols);
})

Answer 5

Вы должны быть в состоянии вызвать метод autosizeColumns() объекта сетки.

grid.autosizeColumns();

Answer 6

Выполните эту простую настройку для https://github.com/naresh-n/slickgrid-column-data-autosize, Нареша в функции init:

• Добавить $container.ready(resizeAllColumns); к функции инициализации.

Это обеспечивает автоматическое изменение размера столбцов при начальной загрузке

Answer 7

Вставьте текст в неэкранный элемент и получите ширину элемента.Это то, что делает excanvas для измерения текста.Используйте это, чтобы установить ширину столбца, так как он ожидает значение в пикселях.