jqgrid: панель инструментов subgrid не отображается

Question

Я использую jqgrid 4.8.2. Я пытаюсь следовать вместе с примерами на демонстрационном сайте. Я создал родительскую сетку и должен показать подсег (как сетку). По какой-то причине пейджер панели инструментов для подзаголовка не будет отображаться. Однако параметры rowNum, width и height работают. Я просмотрел демо, и я не вижу, что я делаю неправильно. Может кто-нибудь взглянуть на следующий код, пожалуйста?

var lastSelection; 

$(document).ready(function() { 

    $("#jqGrid").jqGrid({ 
    url: 'servlet/getData', 
    datatype: "json", 
    editurl: "servlet/updateProduct", 
    page: 1, 
    colModel: [ 
     { label: 'ID', name: 'ProductId', width: 75, key: true }, 
     { label: 'Category', name: 'CategoryName', width: 90 }, 
     { label: 'Name', name: 'ProductName', width: 100 }, 
     { label: 'Country', name: 'Country', width: 80 }, 
     { label: 'Price', name: 'Price', width: 80 }, 
     { label: 'Qty', name: 'Quantity', width: 80 }, 
     { label: 'Included?', name: 'Included', width: 80, 
       editable: true, 
       edittype: "checkbox", 
       editOptions: {value:"Yes:No"} } 
    ], 
    viewrecords: true, // show the current page, data range and total records on the toolbar 
    onSelectRow: function (rowid) { 
     var grid = $('#jqGrid'); 
     if (rowid && rowid !== lastSelection) { 
      grid.jqGrid('restoreRow', lastSelection); 
      lastSelection = rowid; 
     } 
     grid.jqGrid('editRow', lastSelection, {keys: true, 
      extraparam : { 
       home: "livonia", 
       productName: function(){ 
        var row = grid.getRowData(lastSelection); 

        // Both of these work: 
        var temp = row.ProductName; 
        var temp1 = row['ProductName']; 

        return row.ProductName; 
       } 
      } 
     } 
     ); 

    }, 
    width: 780, 
    height: 200, 
    rowNum: 10, 
    pager: "#jqGridPager", 

    subGrid: true, 
    subGridRowExpanded: function(subgrid_id, row_id) { 
     var lastSubgridSelection; 

     var grid = $('#jqGrid'); 
     var row = grid.getRowData(row_id); 
     var productId = row.ProductId; 

      var subgrid_table_id; 
      subgrid_table_id = subgrid_id + "_t"; 
      jQuery("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table>"); 
      jQuery("#"+subgrid_table_id).jqGrid({ 
       url: 'servlet/getProductWarehouses?q=2&id=' + row_id + '&productId=' + productId, 
       datatype: "json", 
       page: 1, 
       colModel: [ 
        { label: 'Product ID', name: 'ProductId', width: 75, key: false, hidden: true }, 
        { label: 'Whse ID', name: 'WhseId', width: 90, key: true }, 
        { label: 'Whse Name', name: 'WhseName', width: 90 }, 
        { label: 'Qty', name: 'Quantity', width: 80 }, 
        { label: 'Included?', name: 'Included', width: 80, 
        editable: true, 
        edittype: "checkbox", 
        editOptions: {value:"Yes:No"} } 
       ], 
      viewrecords: true, 
      height: '100%', 
      width: 400, 
      rowNum: 5, 
      pager: "#jqGridPager" + "_" + subgrid_id 
      }); 
     } 

}); 


}); 

Answer 1

Вы имеете в виду, вероятно, что пейджера (не на панель инструментов) будет не отображается в подсетях.

Причина очень проста, если вы понимаете, как функция grid as subgrid работает в jqGrid. Если вы просто добавите subGrid: true к сетке (к основной сетке), тогда jqGrid добавит дополнительный столбец в colModel с именем "subgrid". В столбце будут значки +, которые могут использоваться для подсекции «развернуть». Если пользователь нажимает на значок +, тогда новая строка будет добавлена ​​под строку с значком +. Строка будет содержать <td> со значком и <td> с пролетом по всей сетке. Последние <td> будут содержать поддиск. Перед вызовом subGridRowExpanded jqGrid создает пустую <div> в ячейке с идентификатором, построенным из идентификатора сетки, «_» и rowid (расширяющейся строки). Первый параметр subGridRowExpanded callback (subgrid_id в вашем коде) содержит идентификатор пустого <div>. На приведенном ниже рисунке показан описанный выше

я отметил в красном цвете подсеточной строки. Идентификатор пустого div равен jqGrid_10 в примере выше, потому что rowid равен 10, а идентификатор сетки - jqGrid.

Важно понимать, что вы должны создать элемент <table> для подсети динамически внутри обратного вызова subGridRowExpanded. Если вы хотите, чтобы у субграда был пейджер, вам также нужно создать <div> для пейджера. Проблема в вашем коде: вы просто используете опцию pager: "#jqGridPager" + "_" + subgrid_id для подзаголовка, но вы не создали <div> с соответствующим id.

Следующая проблема: каждая строка (<tr>) субграда будет иметь атрибут id (rowid). Поэтому нужно назначить его. Пользователь может одновременно открывать несколько субгридов. Проблема заключается в том, что возможно дублирование идентификаторов из-за использования того же id в двух разных субгридах или между подсетями и основной сеткой. Чтобы устранить проблему с конфликтами id, строго рекомендуется использовать параметр idPrefix для подсети со значением, которое отличается для каждой подсерии.

Возможной фиксированная реализация subGridRowExpanded может быть следующим:

subGridRowExpanded: function (subgridDivId, rowid) { 
    var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"), 
     subgridPagerId = subgridDivId + "_p"; 
    $("#" + subgridDivId) 
     .append($subgrid) 
     .append("<div id='" +subgridPagerId + "'></div>"); 

    $subgrid.jqGrid({ 
     url: 'servlet/getProductWarehouses', 
     postData: { 
      q: 2, 
      id: rowid, 
      productId: rowid 
     }, 
     datatype: "local", 
     colModel: [ 
      { label: 'Product ID', name: 'ProductId', width: 75, hidden: true }, 
      { label: 'Whse ID', name: 'WhseId', width: 90, key: true }, 
      { label: 'Whse Name', name: 'WhseName', width: 90 }, 
      { label: 'Qty', name: 'Quantity', width: 80 }, 
      { label: 'Included?', name: 'Included', width: 80, 
       editable: true, 
       edittype: "checkbox", 
       editOptions: {value:"Yes:No"} } 
     ], 
     viewrecords: true, 
     height: '100%', 
     width: 400, 
     rowNum: 5, 
     //idPrefix: subgridDivId + "_", 
     idPrefix: rowid + "_", 
     pager: "#" + subgridPagerId 
    }); 
} 

Кстати вы используете key: true свойства для столбца ProductId основной сетки. Таким образом, rowid основной сетки будет таким же, как и ProductId. Из-за этого я использовал productId: rowid в приведенном выше коде. Еще одно замечание. Я использовал idPrefix: rowid + "_" для подсети. Можно успешно использовать другие значения таким же образом, например idPrefix: subgridDivId + "_".