Question

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

Answer 1

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

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

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

Answer 2

所以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。

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

2 个答案: