如何在 jqGrid 子网格中设置标题对齐方式？答案

【问题标题】：How do I set the header alignment in a jqGrid subgrid?如何在 jqGrid 子网格中设置标题对齐方式？
【发布时间】：2012-04-13 15:32:03
【问题描述】：

特别是简单的子网格，而不是“作为子网格的网格”。

我尝试了多种方法，但似乎都没有奏效。

如果我连接到subGridBeforeExpand，表格还没有准备好让我选择标题并设置 css。

如果我连接到subGridRowExpanded，subGrid 甚至不会渲染。

subGridModel 中的align 属性仅影响单元格值。

这是我的模型供参考：

subGrid: true,
subGridUrl: myUrl,                    
subGridModel: [{ 
     name: ["Item", "Qty"],
     width: ["200", "100"],
     align: ["right", "right"],
     param: ["Id"]
}]

【问题讨论】：

标签： javascript jquery jqgrid subgrid

【解决方案1】：

你是对的，Subgrids 和 Treegrids 中的回调太少了。不过，因为我发现你的问题非常有趣，挑战（+1 来自我）我确实找到了解决方法。

您可以执行以下操作：

var $grid = $("#grid"), sid;
$grid.jqGrid({
    //... your other settings
    subGrid: true,
    serializeSubGridData: function(p) {
        sid = p.id; // save id from the last request
        return p;
    },
    ajaxSubgridOptions: {
        complete: function (sxml) {
            var ts = $grid[0], $subgridHeaders;
            if (ts.p.subgridtype === "xml") {
                ts.subGridXml (sxml.responseXML, sid);
            } else {
                ts.subGridJson($.jgrid.parse(sxml.responseText), sid);
            }
            // now the subgrid is completed and we can modify
            // style of subgrid headers
            $subgridHeaders = $('#' + $.jgrid.jqID(ts.id + '_' + sid))
                .find("th.ui-th-subgrid");
            // now we can do some custom actions:
            $($subgridHeaders[0]).css("text-align", "left");
            $($subgridHeaders[1]).css("text-align", "right");
        }
    }
});

你可以here子网格展开后的demo如下：

【讨论】：

像往常一样，奥列格来救援。谢谢！

【解决方案2】：

我已经使用 CSS 选择器解决了问题，例如将第 7 列标题居中：

#GRIDID .subgrid-data th:first-child + th + th + th + th + th + th
{
    text-align: center;
}

或将整列居中：

#GRIDID .subgrid-data th:first-child + th + th + th + th + th + th,
#GRIDID .subgrid-data td:first-child + td + td + td + td + td + td
{
    text-align: center;
}

【讨论】：