0

嗨，我一直在试图弄清楚是否有可能采用带有 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
        });
    }
4

2 回答 2

1

似乎 jqGrid 将每个表放在自己的div. 如果是这样，那么放在float: left桌子上不会有太大的不同；你必须把它放在包含的 div 上。试试这个：

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

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

于 2012-05-30T21:24:06.783 回答
0

因此，Brilliand 的想法很接近并让我找到了答案。子网格的结构是这样的：

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

然后在您的 subgridrowexpanded 函数中：

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

subgridclasstableid 是每个子网格的唯一 ID。

于 2012-05-31T16:19:17.873 回答