Geek asks and answers

How to adjust header alignment in jqGrid subnets?

In particular, it’s a simple subtask, not a net like a hook.

I tried various methods, but nobody works.

If I connect to subGridBeforeExpand, the table is not ready to select headers and install css.

If I connect to subGridRowExpanded, subGrid will not even render.

Property alignin subGridModelaffects only the value of the cell.

Here is my model for reference:

subGrid: true,
subGridUrl: myUrl,                    
subGridModel: [{ 
     name: ["Item", "Qty"],
     width: ["200", "100"],
     align: ["right", "right"],
     param: ["Id"]
}]
+3
source share
2 answers

You are correct that there are too few callbacks in Subgrids and Treegrids. However, because I found your question a very interesting call (+1 from me), I found a workaround.

You can do the following:

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

, :

enter image description here

+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;
}
0

More articles:


All Articles