如何将 jqgrid 列与列标题对齐？答案

【问题标题】：How to align jqgrid columns with column headers?如何将 jqgrid 列与列标题对齐？
【发布时间】：2015-11-18 09:41:33
【问题描述】：

我的列/列标题对齐有很多问题。

jqgrid 的图片：

如上图所示，我的第一列的宽度大于列标题。如果我将列标题宽度设置为更大的数字，则列单元格宽度也会增加。我一直在尝试打开和关闭shrinkToFit，向第一列单元格添加一个类并设置'max-widht'和'width'，但没有奏效。

jqgrid 的第一列应该是员工姓名，其余列代表月份中的日期。一个月中的每一天要么填充几个字母并为其背景着色，要么留空。

这是我的代码

$(document).ready(function () {
$("#tabs").tabs();

var ColModel1 = [];
ColModel1.push({ name: 'EMPLEADOS', label:'Empleados', index: 'EMPLEADOS',    align:'left', width:185    });
for (var i = 1; i < 32; i++) {
    ColModel1.push({ name: 'DIA_' + i, label: i, index: 'DIA_' + i, align: 'left', width: 27
    });
}
ConstruyeGridVacaciones(ColModel1);
});

function ConstruyeGridVacaciones(ColModel1) {
$("#GridMaestroVacaciones").jqGrid({
    datatype: 'local',
    altRows: true,
    altclass: 'jqgrid-altrow',
    rowNum: 1000,
    //scrollOffset: 0,
    shrinkToFit: false,
    height: 645,
    hidegrid: false,
    caption: "Vacaciones",
    width: 1180,
    colModel: ColModel1,
    pager: '#PaginadorGridMaestroMonedas',
    imgpath: '../shared/themes/basic/images',
    viewrecords: true,
    sortorder: 'asc',
});

var datos = {'EMPLEADOS':'1'};
for (var i = 1; i < 32; i++) {
    var key ='DIA_'+i;
    datos[key] = i;
}

$('#GridMaestroVacaciones').jqGrid('addRowData', '1', datos, 'last');

$('#GridMaestroVacaciones').jqGrid('addRowData', '2', datos, 'last');

$('#GridMaestroVacaciones').jqGrid('addRowData', '3', datos, 'last');

$('#GridMaestroVacaciones').jqGrid('addRowData', '4', datos, 'last');

$(".jqgrow td").first().addClass("ancho");
}

【问题讨论】：

您使用哪个版本的 jqGrid？您使用哪个 jqGrid 分支（free jqGrid、Guriddo jqGrid JS 或版本 addRowData 填充网格是不同的。相反，您应该为datos 数组的每个项目分配唯一的id 属性并使用jqGrid 的data: datos 选项。以您创建已填充数据的 jqGrid 的方式。您不应该将一些不清楚的类（参见.addClass("ancho")）分配给网格元素。你想以什么方式实现？
要在特定列的所有单元格上分配一个类，您可以使用classes: "ancho", labelClasses: "ancho"（labelClasses 仅存在于免费的 jqGrid 中）。我不确定您尝试显示什么，但数据透视表的使用可能是您真正需要的。见the wiki article
问题，从题图可以看出，网格的列标题不在对应列的上方。例如，它可能是一些 CSS 样式，它删除边框而不是使边框透明（参见 the answer 和 this one）
@Oleg 我正在使用 jqgrid 4.3.1。我考虑过使用 addRowData，因为大部分时间单元格都将留空，并且来自查询的原始数据需要处理。例如，员工可能要求每月只休息 1 天。然后 jqgrid 将员工行中的每一天单元格为空，并且对应于该天的单元格将写有“OF”并且背景颜色为绿色。 “ancho”类只是为了测试宽度属性是否有效，它没有。实际上，“ancho”在西班牙语中的意思是“宽度”，很抱歉造成误解。
使用addRowData 是填充网格最慢的方法。重要的是要理解，如果您修改页面上的一个元素，那么至少 整个页面 上其他元素的位置（但也可能是样式）可能会发生变化。因此，Web 浏览器必须在页面上重排并调整页面的 其他元素 的某些属性。它使得页面元素循环的变化非常缓慢。如果您使用data 参数创建网格并使用gridview: true，则jqGrid 用<tbody> 的一个分配者innerHTML 填充网格主体。

标签： jquery css jqgrid

【解决方案1】：

可以使用 setLabel 方法对齐标题。您可以使用以下代码更改列的对齐方式，例如 'empleados': 'empleados'：

grid.jqGrid ('setLabel', 'empleados', '', {'text-align':'center'});

希望它有效。

【讨论】：

我认为从问题的图片中可以看出主要问题是网格的列标题，它们不在相应列的上方。例如，它可能是一些 CSS 样式，它删除边框而不是使边框透明（参见 the answer 和 this one）

【解决方案2】：

感谢 Oleg，我尝试了不同版本的 jqgrid，它成功了。看起来我使用的 jqgrid 版本很久以前就被同事修改了样式，这可能导致了边框问题。

所以说到底是版本的修改，而不是bug。

【讨论】：