了解JQGrid列宽度行为

尝试使用“autowidth”和“shrinkToFit”jqGrid参数。例如,如果“shrinkToFit”为true,则列的宽度将更改,就像初始宽度定义百分比一样。阅读更多 here .

我也有同样的问题。它原来是现有的、站点默认的css定义,用于填充表格单元格。确保th和td标签之间的填充一致。我用一个div类在网格周围放置了一个div,并在CSS中添加了以下内容:

.grid td, .grid th {
    padding: 1pt 1ex !important;
}

colModel: [
{ name: 'Email', index: 'Email', editable: true, edittype: 'custom', width: 220,
                editoptions: {
                    custom_element: function(value, options) { return EmailAddressCustomElement(value, options); },
                    custom_value: function(elem) { var inputs = $("input", $(elem)[0]); return inputs[0].value; }
                }
            },
            { name: 'LocationAndRole', index: 'LocationAndRole', editable: true, align: "left", edittype: "button", width: 170,
                editoptions: { value: 'Edit Location And Role', dataEvents: [{ type: 'click', fn: function(e) { ShowUsersLocationAndRoles(e); } }, ] }
            },



gridComplete: function() {
var objRows = $("#list_accounts tr");
                var objHeader = $("#list_accounts .jqgfirstrow td");
                if (objRows.length > 1) {
                    var objFirstRowColumns = $(objRows[1]).children("td");
                    for (i = 0; i < objFirstRowColumns.length; i++) {
                        $(objFirstRowColumns[i]).css("width", $(objHeader[i]).css("width"));
                    }
                }
            }

我也有同样的问题。我通过在GridComplete中添加4行代码解决了这个问题。这4行将改变内容区td的样式[第一行td的样式修改就足够了]。这是jqgid中的一个问题。这实际上是在“”内设置td,但此样式未反映在内容区域的td中。在开发jqgrid时,他们假设更改一行tds的宽度会影响整个列的宽度,但他们只更改了“”的宽度,这是此处的持久性问题。

在ColModel中设置列宽:

colModel: [
    { 
        name: 'Email', 
        index: 'Email', 
        editable: true, 
        edittype: 'custom', 
        width: 220, 
        editoptions: { 
            custom_element: function(value, options) {
                return EmailAddressCustomElement(value, options); 
            },
            custom_value: function(elem) { 
                var inputs = $("input", $(elem)[0]); 
                return inputs[0].value; 
            } 
        }
    }, 
    { 
        name: 'LocationAndRole', 
        index: 'LocationAndRole', 
        editable: true, 
        align: "left", 
        edittype: "button", 
        width: 170, 
        editoptions: { 
            value: 'Edit Location And Role', 
            dataEvents: [{ 
                type: 'click', 
                fn: function(e) { ShowUsersLocationAndRoles(e); } 
            }] 
        } 
    },

在gridComplete事件中添加以下代码:

gridComplete: function() { 
    var objRows = $("#list_accounts tr"); 
    var objHeader = $("#list_accounts .jqgfirstrow td"); 
    if (objRows.length > 1) { 
        var objFirstRowColumns = $(objRows[1]).children("td"); 
        for (i = 0; i < objFirstRowColumns.length; i++) { 
            $(objFirstRowColumns[i]).css("width", $(objHeader[i]).css("width")); 
        } 
    } 
}

我希望上面的代码能帮助您解决这个问题。

<div id="pager"></div>
<span id='ruler' class='ui-th-column' style='visibility:hidden;font-weight:bold'></span>
<script type="text/javascript">
    var colNamesData = ['Inv No','Date Of the Transaction', 'Amount That Is Owed'];
    var colModelData = [
        {name:'invid', index:'invid', width:55},
        {name:'invdate', index:'invdate', resizeToTitleWidth:true},
        {name:'amount', index:'amount', align:'right', resizeToTitleWidth:true}];
    jQuery(document).ready(function() {
        var ruler = document.getElementById('ruler');
        for (var i in colNamesData) {
            if (colModelData[i].resizeToTitleWidth != true) {
                continue;
            }
            // Measure the title using the ruler span
            ruler.innerHTML = colNamesData[i];
            // The +26 allows for padding and to fit the sorting UI
            var newWidth = ruler.offsetWidth + 26;
            if (newWidth < 100) {
                // Nothing smaller than 100 pixels
                newWidth = 100;
            }
            colModelData[i].width = newWidth;
        }
        jQuery("#list").jqGrid({
            ...
            colNames: colNamesData,
            colModel: colModelData,
            shrinkToFit:false,
            ...
    });
</script>

按CSS设置每列宽度的百分比

添加css类,如下所示

table.ui-jqgrid-htable thead{display:table-header-group}
#JQGridClientMaster td, #ui-jqgrid-htable th{display:table-cell}

现在设置和的每列的宽度

#JQGridClientMaster td:nth-child(1),th#JQGridClientMaster_rn{width:2% !important;}