Я знаю, что это не соответствует сути вопроса, но на данный момент я выбрал простое решение, которое требует минимальных усилий и отвечает моим требованиям на данный момент. Так что это на тот случай, если другие тоже искали простое решение.
Я начал с поля ввода, где изменение значения изменило бы размер строки. Однако теперь я остановился на использовании слайдера. На самом деле, поскольку в моей сетке таких данных очень мало (гарантированно будет небольшое количество данных и очень мало строк), я динамически изменяю размер сетки по мере скольжения ползунка. Теперь я знаю, многие скажут, что это ужасная идея, потому что она может быть ужасно медленной, но опять же, я использую очень небольшое количество данных.
Ключ в том, что я заново создаю сетку с новым значением rowHeight, установленным в настройках.
- Включите пользовательский интерфейс jQuery:
- Создать элементы для ползунка и значение
- Убедитесь, что ваша сетка настроена и инициализирована для загрузки страницы.
Добавьте код для обработки ползунка и воссоздания сетки (в качестве альтернативы вы можете переместить то, что у меня есть в функции «слайд», в функцию «стоп», если вы не хотите перерисовывать каждый скользящий тик). ):
$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. , Затем создайте (или заново создайте) сетку.