Укладка нескольких субгрид в jqGrid, чтобы они были выровнены по горизонтали.

Question

Привет, я пытался выяснить, возможно ли даже сделать 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

Итак, идея Бриллианда была близка и привела меня к ответу. Структура подсетей такова:

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

Попробовав пару из них я, наконец, смог найти правильный родитель, как «Ui-Подсеточный». Если вы плаваете влево, а затем плаваете по каждой из ваших подсетей, вы получите ответ, который вам нужен, за исключением небольшого оговорки. Вам нужно установить ширину «ui-subgrid», чтобы она могла содержать все субгриды. Таким образом, CSS, чтобы сделать это (по крайней мере, как я установить его):

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

Затем в subgridrowexpanded функции:

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

subgridclasstableid быть любой ваш уникальный идентификатор для каждого Подсеточное бытия.

Answer 2

Оказывается, что jqGrid помещает каждую таблицу внутри своей собственной div. Если это так, то размещение float: left на столе не имеет большого значения; вы должны поместить его в содержащий div. Попробуйте следующее:

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

Не смотря на сгенерированный HTML, я не могу точно знать, является ли это правильным элементом. «Золотое правило» состоит в том, что элементы, которые вы плаваете влево, должны быть братьями и сестрами друг друга в HTML.