Question

我有一个完美的铬合金jqgrid。但是在IE和FF中我看到了这个： enter image description here

列标题单元格未与表格单元格的主体对齐。

以下是相关代码：

jQuery.extend(jQuery.jgrid.defaults, {

    datatype: 'json',
    mtype: 'GET',
    jsonReader: {
        repeatitems: false,
        id: "Id"
    },
    pager: '#pager',
    rowNum: 10,
    page: '1',
    sortname: 'Name',
    sortorder: 'asc',
    viewrecords: true,
    caption: null,
    height: 'auto',
    scroll: false,
    altRows: true,
    altclass: 'altrow',
    autowidth: true,
    forceFit: true,
    rowTotal: 0,
    loadonce: true,
    shrinkToFit: true,
    pginput: false,
    autoencode: true,
    multiselect: false,
    width: '100%'
});

和具体表格：

$("#ctable").jqGrid({
                    data: mydata,
                    datatype: "local",
                    colNames: ['Date', 'Urls', 'Errors', 'Warnings', 'Infos', 'Time', 'Size', 'Delete', 'Id Hidden'],
                    colModel: [
                            { name: 'Date', sorttype: "date", width: 2, datefmt: "m/d/Y H:i:s",editrules:{date:true} },
                            { name: 'UrlCount', sorttype: "int", width: 1 },
                            { name: 'ViolationsError', sorttype: "string", width: 1, formatter:violationserrorformatter },
                            { name: 'ViolationsWarning', sorttype: "string", width: 1, formatter:violationswarningformatter },
                            { name: 'ViolationsInfo', sorttype: "string", width: 1, formatter:violationsinfoformatter },
                            { name: 'TimeElapsed', sorttype: "date", width: 1, datefmt: "H:i:s",editrules:{date:true}  },
                            { name: 'Size', sorttype: "number", width: 1 },
                            { name: 'Delete', sorttype: "", width: 1, align:"center" },
                            { name: 'Id', sorttype: "int", width: 1, hidden:true }
                        ],
                    sortname: 'Date',
                    sortorder: 'desc',
                    rowNum:20
                });

我已经尝试取出样式表，js，周围的模板html甚至取出一些列，看起来这个错误仍然存在于对齐中。我卡住了，有什么想法吗？

Answer 1

我检查了你发送给我的每个电子邮件的演示，并发现你修改了jqGrid的原始ui.jqgrid.css。与其他更改一起，您将padding个th元素增加到7px：

.ui-jqgrid .ui-jqgrid-htable th.ui-th-column
{
    border-bottom:1px solid #ccc;
    background-color:#EEE;
    padding:7px;
}

您应该使用默认padding-right: 2px和padding-left: 2px来计算正确的列宽。

我建议您不要更改border-width，padding-right，padding-left，margin-left和margin-right以及th或{{ 1}}网格的元素。

Answer 2

将此代码块插入网格的gridComplete事件中。将gridName替换为您的网格id，就是这样！：）

var objHeader = $("table[aria-labelledby=gbox_" + gridName+ "] tr[role=rowheader] th");

for (var i = 0; i < objHeader.length; i++) {
   var col = $("table[id=" + gridName+ "] td[aria-describedby=" + objHeader[i].id + "]");
   var width= col.outerWidth();
   $(objHeader[i]).css("width", width);
}

适用于v.4.6.0。

Answer 3

这对我有用..

$（$（'。ui-jqgrid-bdiv'）。find（'table'）[0]）。css（'max-width'，'none'）

FF，IE中的jqgrid对齐体和头

3 个答案: