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

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

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

Ответ 1

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

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

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

Здесь примерно то, что я изменил в Slick.Grid.js

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

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

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

Ответ 2

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

Ответ 3

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

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

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

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

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

$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, Затем создайте (или воссоздайте) сетку.

Ответ 4

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

Ответ 5

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

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

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

Ответ 6

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

Ответ 7

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

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

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

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

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

Вид на море

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

JLynch7

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

Доби сетки

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

Ответ 8

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

Ответ 9

Определите эту переменную снаружи....

var tableHeight = 0;

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

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

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();
});

Ответ 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.