在 jqGrid 中设置多个子网格的样式，使它们水平对齐

Styling multiple subgrids in jqGrid so they are horizontally aligned.

本文关键字：样式 对齐 水平 网格 jqGrid 设置      更新时间：2023-09-26

嗨，我一直在试图弄清楚是否有可能采用带有 3 个子网格的 jqGrid 并将它们对齐以便它们水平对齐。喜欢这个：

====
======================================================|____| |_____| |_____|

我试过将每个设置为向左/向右浮动等......但即使设置为"重要"，样式也会被覆盖。任何帮助将不胜感激。

subGridRowExpanded: function(subGridDivId,rowId){
        $("#ClassGroupGrid").jqGrid('setSelection',rowId);
        var subgridClassTableId = subGridDivId + "_class_t";
        var subgridCreationTableID = subGridDivId + '_creation_t';
        var subgridConnectionTableID = subGridDivId + '_connection_t';
        $("#" + subGridDivId).html("<table style='float: left !important' id='" +      subgridClassTableId + "'></table>");
        $("#" + subgridClassTableId).jqGrid({
            datatype: 'local',
            data: classGroupData[parseInt(rowId) -1],
            colNames:['Classes'],
            colModel:[
                {name:'Classes', formatter: classGroupClassesFormatter}
            ],
            shrinkToFit: true
        });
        $('#' + subGridDivId).append("<table id='" + subgridCreationTableID + "'></table>");
        $("#" + subgridCreationTableID).jqGrid({
            datatype: 'local',
            data: classGroupData[parseInt(rowId) -1],
            colNames:['Creation Rules'],
            colModel:[
                {name:'Creation Rules', formatter: classGroupCreationFormatter}
            ],
            shrinkToFit: true
        });
        $('#' + subGridDivId).append("<table style='float: right !important' id='" + subgridConnectionTableID + "'></table>");
        $("#" + subgridConnectionTableID).jqGrid({
            datatype: 'local',
            data: classGroupData[parseInt(rowId) -1],
            colNames:['Connection Rules'],
            colModel:[
                {name:'Connection Rules', formatter: classGroupConnectionFormatter}
            ],
            shrinkToFit: true
        });
    }

看起来 jqGrid 将每个表放在自己的div内。 如果是这样的话，那么把float: left放在桌面上不会有太大区别;你必须把它放在包含的div上。 试试这个：

$("#" + subGridDivId).css("float", "left");

但是，如果不查看生成的 HTML，我无法确定这是否是正确的元素。 "黄金法则"是，你向左浮动的元素都应该是HTML中彼此的兄弟姐妹。

所以布里利安的想法很接近，并引导我找到答案。子网格的结构如下：

<td role='row' class='ui-subgrid'>
<td role='row' class='ui-widget-content subgrid-cell'>
    <div class=tablediv>
        //divs containing subgrids

在尝试了其中的几个之后，我终于能够找到正确的父级作为"ui-subgrid"。如果你向左浮动，然后向左浮动每个子网格，你会得到你想要的答案，除了一些警告。您需要设置"ui-subgrid"的宽度，以便能够包含所有子网格。所以这样做的css是（至少我是如何设置的）：

.ui-subgrid{
float:left !important;
width: 1000px !important;
}

然后在您的子网格行扩展函数中：

$('#gbox_' + subgridClassTableId).css("float", "left");

子网格类表ID 是每个子网格的唯一 ID

的任何内容。
相关文章：