jqgrid列宽自动 [英] jqgrid column width auto

问题描述

有没有一种方法可以使jqgrid的列宽根据该列的内容动态变化?我使用了rinkleToFit和autoWidth，但是它们都不适合我.我使用jqgrid 4.5.2.我已经搜索并阅读了其他问题，但这些问题对我没有用.也许有一个小部件可以做到这一点.如果您能帮助我，我将不胜感激.

Is there a way that the column width of jqgrid change dynamically according to the content of that column? I used shrinkToFit and autoWidth but non of them worked for me. I use jqgrid 4.5.2. I have searched and read the other questions but those didn't work for me. Maybe there is a widget to do that. I will be thankful if you help me.

推荐答案

pphillips001答案对我有用，但随着网格的增长，调整大小的速度会变慢.我刚刚更新了逻辑，现在性能非常好.

pphillips001 answer works for me but resizing is to slow when the grid grows. I just updated the logic and the performance is very good now.

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 = 0;

    // 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
        var maxText = 0;
        var theCell;
        for (var itm2 = 0, itm2Count = curObj.length; itm2 < itm2Count; itm2++) {
            thisCell = $(curObj[itm2]);
            if (maxText < thisCell.text().length) {
                maxText = thisCell.text().length;
                theCell = thisCell;
            }
        }
        if (theCell !== undefined) {
            $('#widthTest').html(theCell.html()).css({
                'font-family': theCell.css('font-family'),
                'font-size': theCell.css('font-size'),
                'font-weight': theCell.css('font-weight')
            });

            thisWidth = $('#widthTest').width() + 5;
        }
        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');

}

这篇关于jqgrid列宽自动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！