Javascript 了解JQGrid列宽度行为

我有一个带有许多列的树形网格，所有列都具有指定的宽度。天哪，这看起来很糟糕，因为标题与下面的列不同步，即使我的数据很短

特别是，如果列标题短于此列宽，则标题将缩小到标题中文本的大小

如何使标题与列的大小完全相同？

问题2：我注意到，尽管文档中说列“宽度”选项是以像素为单位的，但我可以看到它实际上不是以像素为单位的，而是相对于网格中其他宽度的一个数字。例如，如果所有字段的大小均为10，则所有字段的大小将相等，但宽度不等于10像素

---

提前感谢您的澄清，因为这个简单的问题似乎比我想象的有更深的根源。

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

colModel:[
{名称：'Email'，索引：'Email'，可编辑：true，编辑类型：'custom'，宽度：220，
编辑选项：{
自定义元素：函数（值，选项）{return EmailAddressCustomElement（值，选项）；}，
自定义_值：函数（elem）{var inputs=$（“input”，$（elem）[0]）；返回输入[0].value；}
}
},
{name:'LocationAndRole'，index:'LocationAndRole'，可编辑：true，align:“left”，edittype:“button”，宽度：170，
editoptions:{value:'Edit Location And Role'，dataEvents:[{type:'click'，fn:function（e）{ShowUsersLocationAndRoles（e）；}}}，]}
},
gridComplete:函数（）{
var objRows=$（“列出账户tr”）；
var objHeader=$（“#list_accounts.jqgfirstrow td”）；
如果（objRows.length>1）{
var objFirstRowColumns=$（objRows[1]）.children（“td”）；
对于（i=0；i

我也遇到了同样的问题。我通过在GridComplete中添加4行代码解决了这个问题。这4行代码将更改内容区td的样式[第一行td的样式修改就足够了]。这是jqgid中的一个问题。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")); 
        } 
    } 
}

gridComplete:function（）{
var objRows=$（“列出账户tr”）；
var objHeader=$（“#list_accounts.jqgfirstrow td”）；
如果（objRows.length>1）{
var objFirstRowColumns=$（objRows[1]）.children（“td”）；
对于（i=0；i

我希望以上代码将帮助您解决此问题。

<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>

var colNamesData=[“投资编号”，“交易日期”，“欠款金额]；
var colModelData=[
{名称：'invid'，索引：'invid'，宽度：55}，
{name:'invdate'，index:'invdate'，resizeToTitleWidth:true}，
{name:'amount'，index:'amount'，align:'right'，resizeToTitleWidth:true}]；
jQuery（文档）.ready（函数（）{
var-ruler=document.getElementById（'ruler'）；
for（colNamesData中的变量i）{
if（colModelData[i].resizeToTitleWidth！=true）{
继续；
}
//使用标尺测量标题的跨度
ruler.innerHTML=colNamesData[i]；
//+26允许填充并适合排序UI
var newWidth=标尺偏移网络宽度+26；
如果（新宽度<100）{
//不小于100像素
新宽度=100；
}
colModelData[i].width=newWidth；
}
jQuery（“#list”）.jqGrid({
...
colNames:colNamesData，
colModel:colModelData，
shrinkToFit：错，
...
});

我也遇到了同样的问题。这是现有的、站点默认的css表单元格填充定义。请确保您的填充在th和td标记之间是一致的。我在网格周围放置了一个div，并在css中添加了以下内容：

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

---

按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;}

有关注释，请参阅复制代码的源代码（应提及）：

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