Ширина столбца Slickgrid должна автоматически изменяться в соответствии с содержимым самой широкой строки.

В Slickgrid есть ли способ, при котором ширина столбца автоматически изменяется в соответствии с самым широким содержимым строки?

В примере примера я вижу, что значение столбца жестко закодировано для поля столбца http://mleibman.github.com/SlickGrid/examples/example2-formatters.html

var columns = [
    {id: "title", name: "Title", field: "title", width: 120, cssClass: "cell-title", formatter: formatter},
    {id: "duration", name: "Duration", field: "duration"},
    {id: "%", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar},
    {id: "start", name: "Start", field: "start", minWidth: 60},
    {id: "finish", name: "Finish", field: "finish", minWidth: 60},
    {id: "effort-driven", name: "Effort Driven", sortable: false, width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Slick.Formatters.Checkmark}
  ];

jquery slickgrid
person Anup Khandelwal    schedule 04.03.2013    source источник
comment
Неа. Вам нужно будет вычислить ширину каждой ячейки в каждой строке.   -  person idbehold    schedule 04.03.2013
comment
Есть хороший плагин, который выполняет эту функцию: github.com/naresh-n/ slickgrid-column-data-autosize   -  person phyatt    schedule 10.01.2018

Ответы (3)


arrow_upward
6
arrow_downward

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

 String.prototype.textWidth = function(font) {
    var f = font || '12px Helvetica,​Arial,​sans-serif',
      o = $('<div>' + this + '</div>')
            .css({'position': 'absolute', 'float': 'left', 'white-space': 'nowrap', 'visibility': 'hidden', 'font': f})
            .appendTo($('body')),
      w = o.width();

    o.remove();
  return w;
}

Я вычислил либо textWidth () заголовка. Значение «Имя». По крайней мере, столбец - это ширина текста заголовка. Что вы можете сделать, не беспокоясь о виртуализации. Fx ...

columns.push({ id: "col1", name: "Column 1", field: "col1", width: "Column 1".textWidth() + <Some padding?>});

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

person Tim    schedule 29.03.2013

arrow_upward
7
arrow_downward

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

Например, определение столбцов может выглядеть так:

{id: "duration", name: "Duration", field: "duration", minWidth:50, width:100, maxWidth:120}

и определение опций вроде этого:

options = {
        enableCellNavigation: true,
        enableColumnReorder: false,
        multiColumnSort: true,
        asyncEditorLoading: true,
        forceFitColumns: true // this one is important        
    };
person ghiscoding    schedule 04.03.2013
comment
На самом деле я только что понял, что при использовании forceFitColumns:true пропустите применяемые минимальные / максимальные значения и попытайтесь уместить все внутри ширины сетки, которую вы установили вначале. Хотя вместо изменения размера я со своей стороны добавляю подвыпивший заголовок в качестве средства форматирования для своих длинных столбцов. - person ghiscoding; 05.03.2013
comment
это сработало для меня, если установить minWidth и maxWidth. В сочетании с $ (window) .resize (function () {grid.resizeCanvas ();}); сетка прекрасно подстраивается под ширину экрана и учитывает минимальную и максимальную ширину столбца. - person Thomas Kremmel; 17.05.2013

arrow_upward
0
arrow_downward

Да, довести до нужного содержания контент можно, но вы должны сделать это сами. forceFitColumns звучит близко, но он растет, заполняя область просмотра, не заботясь о содержимом ячейки.

Идея @Tима верна, хотя я бы не стал говорить, что она уходит от точки виртуализации строк. Поскольку SlickGrid дает вам хороший доступ к области просмотра grid.getViewport().top // bottom, вы можете очень успешно вычислить размер только содержимого в области просмотра.

Я описываю, как здесь, в ответ на этот аналогичный вопрос: https://stackoverflow.com/a/22231459

person SimplGy    schedule 06.03.2014