Ширина столбца jqgrid авто

Существует ли способ, которым ширина столбца jqgrid изменяется динамически в соответствии с содержимым этого столбца? Я использовал shrinkToFit и autoWidth, но не для них работал у меня. Я использую jqgrid 4.5.2. Я искал и читал другие вопросы, но они не работали для меня. Возможно, есть виджет для этого. Я буду благодарен, если вы поможете мне.

4 ответа

Здесь я реализую ширину столбца jqGrid на основе содержимого столбца. Добавьте это в событие gridComplete.

$(this).parent().append('<span id="widthTest">');
gridName = this.id;
$('#gbox_' + gridName + ' .ui-jqgrid-htable,#' + gridName).css('width', 'inherit');
$('#' + gridName).parent().css('width', 'inherit');
var columnNames = $("#" + gridName).jqGrid('getGridParam', 'colModel');
var thisWidth;
// Loop through Cols
for (var itm = 0, itmCount = columnNames.length; itm < itmCount; itm++) {
 var curObj = $('[aria-describedby=' + gridName + '_' + columnNames[itm].name + ']');
 var thisCell = $('#' + gridName + '_' + columnNames[itm].name + ' div');
 $('#widthTest').html(thisCell.text()).css({
 'font-family': thisCell.css('font-family'),
 'font-size': thisCell.css('font-size'),
 'font-weight': thisCell.css('font-weight')
 });
 var maxWidth = Width = $('#widthTest').width() + 24; 
 //var maxWidth = 0; 
 // Loop through Rows
 for (var itm2 = 0, itm2Count = curObj.length; itm2 < itm2Count; itm2++) {
 var thisCell = $(curObj[itm2]);
 $('#widthTest').html(thisCell.html()).css({
 'font-family': thisCell.css('font-family'),
 'font-size': thisCell.css('font-size'),
 'font-weight': thisCell.css('font-weight')
 });
 thisWidth = $('#widthTest').width();
 if (thisWidth > maxWidth) maxWidth = thisWidth; 
 } 
 $('#' + gridName + ' .jqgfirstrow td:eq(' + itm + '), #' + gridName + '_' + columnNames[itm].name).width(maxWidth).css('min-width', maxWidth);
 }
 $('#widthTest').remove();
</span>

Рабочий пример:

http://jsfiddle.net/Ba5yK/17/

Надеюсь, что это поможет,

Пол


Это хорошее решение, но при повторной калибровке ширина столбца переходит к начальной ширине. Это мое модифицированное решение как отдельная функция. Предназначен для работы с shrinkToFit, установленным в false, и запускается только один раз:

function setColumnWidths(gridName) {
 if ($('#' + gridName).attr('columnsSet')=='true') return;
 $('body').append('<span id="widthTest">WIDTHTEST</span>');
 $('#gbox_' + gridName + ' .ui-jqgrid-htable,#' + gridName).css('width', 'inherit');
 $('#' + gridName).parent().css('width', 'inherit');
 var containerWidth=$('#' + gridName).width() - 20;
 var columnNames = $("#" + gridName).jqGrid('getGridParam', 'colModel');
 var thisWidth;
 // Loop through Cols
 for (var itm = 0, itmCount = columnNames.length; itm < itmCount; itm++) {
 var curObj = $('[aria-describedby=' + gridName + '_' + columnNames[itm].name + ']');
 var thisCell = $('#' + gridName + '_' + columnNames[itm].name + ' div');
 $('#widthTest').html(thisCell.text()).css({
 'font-family': thisCell.css('font-family'),
 'font-size': thisCell.css('font-size'),
 'font-weight': thisCell.css('font-weight')
 });
 var maxWidth = $('#widthTest').width() + 40;
 //var maxWidth = 0; 
 // Loop through Rows
 for (var itm2 = 0, itm2Count = curObj.length; itm2 < itm2Count; itm2++) {
 var thisCell = $(curObj[itm2]);
 $('#widthTest').html(thisCell.html()).css({
 'font-family': thisCell.css('font-family'),
 'font-size': thisCell.css('font-size'),
 'font-weight': thisCell.css('font-weight')
 });
 thisWidth = $('#widthTest').width();
 if (thisWidth > maxWidth) maxWidth = thisWidth;
 }
 if (maxWidth > containerWidth) maxWidth=containerWidth;
 $("#" + gridName).jqGrid('setColProp','amount',{width: maxWidth});
 var gw = $("#" + gridName).jqGrid('getGridParam','width');
 $("#" + gridName).jqGrid('setGridWidth',gw,true);
 $('#' + gridName + ' .jqgfirstrow td:eq(' + itm + '), #' + gridName + '_' + columnNames[itm].name).width(maxWidth).css('min-width', maxWidth);
 }
 $('#widthTest').remove();
 $('#' + gridName).attr('columnsSet','true');
}


Я не уверен, что это ответили ранее или нет, но ниже - это решение, которое я реализовал, которое работает. Просто укажите ширину столбца в процентах, и суммирование всех столбцов должно достигнуть 100%. Но я не уверен, как бороться с добавлением/удалением столбцов во время выполнения.

Я тоже работаю над этим и обновляю все.

columns: [
 { text: 'CheckBox', datafield: 'ProjectSubstantialPOUADetailsID', width: '10%' },
 { text: 'Area/Phase Substantial', datafield: 'SubstantialPOUA', width: '30%' },
 { text: 'Type', datafield: 'SubstantialTypeName', width: '15%' },
 { text: 'Achieved', datafield: 'DateAchieved', width: '15%', cellsformat: 'd', formatter: "date", formatoptions: { srcformat: "ISO8601Long", newformat: "m/d/Y" } },
 { text: 'PL Final', datafield: 'DateFinal', width: '15%', cellsformat: 'd' },
 { text: 'Warranty?', datafield: 'Warranty', width: '15%', columntype: 'checkbox' }
 ]

Спасибо Rushi


colModel: [{name: "f_name", index: "f_name", width: '100%'}]

licensed under cc by-sa 3.0 with attribution.