Question

我有一个包含许多列的树网格，所有列都有指定的宽度。而男孩，它看起来很糟糕，因为标题与下面的列不同步，即使我的数据很短。

具体来说，如果列标题标题更短而不是此列宽，则标题会缩小到标题中文本的大小。

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

问题2：我注意到虽然文档说“width”选项以像素为单位，但我可以看到它实际上不是以像素为单位，而只是相对于网格中其他宽度的数字。例如。如果所有字段的大小都是10，那么它们的大小都相等，但宽度不是10像素。

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

Answer 1

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

Answer 2

我有同样的问题。结果是表格单元格上填充的现有的站点默认css定义。确保您的th和td标签之间的填充是一致的。我在网格上放了一个带有div类的div，并将以下内容添加到我的CSS中：

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

Answer 3

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"));
                    }
                }
            }

Answer 4

我遇到了同样的问题。我通过在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")); 
        } 
    } 
}

我希望上面的代码可以帮助您解决问题。

Answer 5

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

Answer 6

使用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;}

了解JQGrid列宽行为

6 个答案: