Возможна ли переменная rowheight в SlickGrid?

Question

Я хотел бы предоставить переменную высоту строки в зависимости от размера содержимого. возможно ли это в Slickgrid?

Можете ли вы указать мне на любые примеры?

Answer 1

Обычный и простой, это не поддерживается в SlickGrid и, вероятно, никогда не будет. Сожалею.

Answer 2

Это возможно, но это не тривиально, и вы, вероятно, получите штраф за выполнение. Как работает SlickGrid, он должен иметь возможность быстро ответить на следующие два вопроса:

• Для данной строки X, какое верхнее смещение для этой строки?
• Для данного смещения Y, какая строка находится на этом смещении?

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

Вот примерно то, что я изменил в Slick.Grid.js

• Добавить новый массив для отслеживания размеров строк. Инициализировать все строки до размера по умолчанию
• Удалить правила css в createCssRules, которые задают высоту ячейки
• Добавить код в конце renderRows, который проверяет высоту рендеринга каждой ячейки в строке, а затем устанавливает высоту всех (и сохраняет высоту в массиве размера строки). Вам также необходимо настроить верхнее смещение, основанное на сумме высот строк выше текущей.
• Добавить код в конец рендера, чтобы изменить размер холста на сумму всех высот строк.
• Обновить getViewport, чтобы вернуть верхнюю и нижнюю строки на основе сумм высот строк.
• Есть несколько других мест, где используются опции options.rowHeight. Вы можете игнорировать некоторые из них, но, по крайней мере, везде, где изменяется размер холста, необходимо изменить.

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

Я надеюсь, что это поможет.

Answer 3

Я знаю, что это не отвечает сути вопроса, но решило сейчас простое решение, которое является минимальным усилием и отвечает моим требованиям на данный момент. Таким образом, это на всякий случай, если другие ищут простое решение.

Я начал с окна ввода, в котором изменение значения изменило бы размер строки. Однако теперь я решил использовать слайдер. На самом деле, поскольку у меня есть такие маленькие данные в моей сетке (гарантированные небольшие объемы данных и очень мало строк), я динамически изменяю размер сетки по мере слайдера слайдера. Теперь я знаю, что многие скажут, что это ужасная идея, потому что это может быть ужасно медленным, но опять же, я использую очень небольшой объем данных.

Ключ в том, что я снова создаю сетку с новым значением rowHeight, установленным в параметрах.

1. Включить JQuery UI:
2. Создать элементы для ползунка и значение
3. Убедитесь, что Ваша сетка устанавливается и инициализируется для при загрузке страницы.

4. Добавьте код для обработки слайдера и воссоздания сетки (в качестве альтернативы вы можете переместить то, что у меня есть в функции «слайд», к функции «стоп», если вы не хотите перерисовывать на каждом скользящем тике):

   $j("#resizeRowSlider").slider({ 
        range:"min" 
       , min: 50 
       , max: 200 
       , value: 50 
       , create: function(even, ui) { 
        $j("rowResizeValue").html("50"); 
       } 
       , slide: function(event, ui) { 
        $j("rowResizeValue").html(ui.value); 
   
        options.rowHeight = ui.value; 
   
        // I do a manual resize; you could use autoHeight:true in grid options 
        resizeGrid(); 
   
        grid = new Slick.Grid("#" + gridElemId, json, columns , options); 
        grid.setSelectionModel(new Slick.RowSelectionModel()); 
   
        refreshGrid(); // Handle invalidate, resizeCanvas 
       } 
       , stop: function(event, ui) { 
       } 
   }); 
   

Кроме того, следует отметить, что это не на каждый ряд основе, но опять же, это соответствует моим потребностям на данный момент. Это не идеально, но это работает. Кроме того, если вам действительно нужно визуализировать сетку в первый раз без переполнения, вы можете создать скрытый div всякий раз, когда вы получите соответствующий текст, и добавьте display:table-cell, а затем получите высоту div и установите для этого значения параметры сетки для rowHeight. Затем создайте (или воссоздайте) сетку.

Answer 4

Я реализовал это в своем проекте, с помощью ответа @Stephen Robinson здесь.
Если кому-то это интересно, они могут проверить:
https://github.com/vihari/Seaview/blob/version3.0/SlickGrid-master/slick.grid.js.
Он может быть включен с указанным выше файлом, если вы установите для параметра options.enableWrap значение true.
Спасибо.

Answer 5

Решение Vihari Piratla - я загрузил Seaview, изменил его /SlickGrid-master/examples/example1-simple.html, чтобы добавить новую опцию enableWrap - во время моего теста example1-simple.html продолжает работать как ожидалось когда для параметра enableWrap установлено значение false, но когда его значение равно true, сетка будет пуста без содержимого. Мне было интересно, если есть специальный способ использования опции enableWrap?

Answer 6

Существует также переменная реализации Высота JLynch7 на GitHub:

https://github.com/JLynch7/SlickGrid/tree/variableRowHeight

Насколько я понимаю, высота задается пользователем и не вычисляется автоматически на основе содержания клеток Роу (я только посмотрел пример/example-variable-row-height-dataview.html)

Answer 7

Недавно я разблокировал SlickGrid, чтобы добавить в себя множество новых функций, включая переменные (и изменяемые по размеру) строки. Вы можете попробовать его здесь: https://github.com/globexdesigns/doby-grid

Answer 8

Определите эту переменную вне ....

вар tableHeight = 0;

Перед созданием пятна сетки, используйте ниже линию:

// 30 точек для каждой строки это будет охватывать заголовок ... Вы можете изменить это значение для вашего стола.

tableHeight = dataTable.length * 30;  

if(tableHeight > ($(window).height() - 400)){ 
     $("#myGrid").height($(window).height() - 400); 
}else{ 
     $("#myGrid").height(tableHeight); 
} 

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

$(window).resize(function() { 

    // For grid height 
    if(tableHeight > ($(window).height() - 400)){ 
     $("#myGrid").height($(window).height() - 400); 
    }else{ 
     $("#myGrid").height(tableHeight); 
    } 

    // For grid width 
    $("#myGrid").width("100%"); 

    // Resize the grid dynamically. 
    gridName.resizeCanvas(); 
}); 

Answer 9

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

Обратите внимание, существуют также различия между:

• Высота строки могут быть изменены отдельно для каждой строки.
• Текст может быть перенесен на следующую строку.
• Высота строки может автоматически регулироваться в соответствии с содержанием.

Удивительно, но со всеми вариантами SlickGrid выше (и многими другими библиотеками DataGrid) вы можете получить один или два из перечисленных выше, но не все три.

Если вы не так обеспокоены официальной поддержке и производства готовой, то это мои впечатления от тестирования 3 SlickGrid вариантов, перечисленных выше:

Seaview

• Пользователи сообщают о проблемах с только отображение белого, не проверено с редактированием ячеек (предупреждение), разбиение на страницы может не работать (предупреждение).
• Мой тест демонстрации показал, что он обернул текст и автоматически изменил высоту ячейки ok, но имеет ошибку, что строки/границы отключены на несколько пикселей. Таким образом, можно использовать, но не готово к производству.
• Я попытался загрузить и использовать его. У него есть обтекание текста в ячейках - хорошо. Его автоматическая регулировка высоты ячейки очень сломана/неполна, что делает обертку текста практически бесполезной (если вы не исправляете высоту строки - не очень). Я частично исправил автоматическую настройку высоты ячеек, но еще немного работы. Не простая задача. Не работает из коробки. Определенно не готовность производства.

JLynch7

• Нет демо не запускать без загрузки.
• Я попытался загрузить и использовать его. Это багги (я должен был исправить это, чтобы заставить его работать), добавляет переменную высоту строки, но НЕ кажется, что он обертывает текст и НЕ автоматически настраивает высоту строки на основе текста !. Он активно не поддерживается. И не очень популярен, поэтому не очень хорошо поддерживается. Seaview кажется более продвинутым, хотя его функция «auto adjust the row height» нарушена.

Доби сетки

• ли в альфа - не готовый к производству. Похоже на значительную вилку - много изменений.
• Я попробовал. Начало работы сбивает с толку, но оно работает. Нужен баузер и требуется JS.
• options.resizableRows - это половина того, что мы хотим - вы можете динамически изменять высоты строк вручную. НО нет автоматического повторного выбора высоты строки, чтобы соответствовать контенту !! ?? !!
• This issue заявляет, что «добавление действительно динамической высоты строки (которая зависит от содержимого строки) потребует от нас отключения многих функций». Они предлагают пару возможных решений, но один из них решился, и у него было много проблем. Он мог бы заставить его работать, иначе он мог бы отказаться. Я не собираюсь рисковать.

Answer 10

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

Я рассматриваю «жизнеспособные альтернативы», которые полностью поддерживают переменную высоту строки: каждая строка может иметь разную высоту строки, которая автоматически адаптируется для соответствия содержимому и позволяет переносить текст на следующую строку.

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

Существует немало жизнеспособных альтернатив, которые требуют оплаты для коммерческого использования: dhtmlxGrid, jQuery EasyUI DataGrid, jQWidgets, виджет Wijmo Grid, JideTable и Sencha ExtJS Grids. Из них я бы сказал, что лучше всего dhtmlxGrid http://dhtmlx.com/docs/products/dhtmlxGrid/ - Бесплатная версия GPL, версия Pro - 199 долларов.