jqGrid將子網格寬度設置爲行寬度

我使用一個簡單的子網格創建了jqGrid。我已經設置了屬性jqGrid將子網格寬度設置爲行寬度

autowidth:true

使得的jqGrid擴展到父元素的寬度。當我展開該行時，子網格不會展開爲jqGrid的寬度。子網格的寬度仍然是所有子網格列的總和。這是預期的行爲還是錯誤？

我需要使用jQuery來手動設置子網格的寬度還是有另一種方式？

這是我使用的代碼的一個例子：

jQuery("#list").jqGrid({ 
    url:'some-url.php', 
    mtype: "POST", 
    datatype: "json", 
    colNames:['Inv No','Date','Total'], 
    colModel:[ 
       {name:'id',index:'id', width:55}, 
       {name:'amount',index:'amount', width:55}, 
       {name:'tax',index:'tax', width:55} 
    ], 
    multiselect: false, 
    autowidth: true, 
    rowNum:10, 
    rowList:[10,20,30], 
    pager: '#pager', 
    sortname: 'id', 
    sortorder: "desc", 
    viewrecords: true, 
    subGrid : true, 
    subGridUrl: 'some-other-url.php', 
    subGridModel: [ {name:['CustomerId','CustomerName'], width:[55,55,]} ], 
    caption: "Subgrid Example", 
    sortable: true   
}); 

jQuery("#list").jqGrid('navGrid','#pager',{add:false,edit:false,del:false});

來源

2011-05-18 Christian P

我發現替代的解決方案，但它需要創建的jqGrid作爲子網格。然後，可以根據需要調整子網格的寬度。

這是作爲例子的代碼，我希望有人會發現它有用：

$("#list").jqGrid({ 
    url:'some-url.php', 
    mtype: "POST", 
    datatype: "json", 
    colNames:['Inv No','Date','Total'], 
    colModel:[ 
       {name:'id',index:'id', width:55}, 
       {name:'amount',index:'amount', width:55}, 
       {name:'tax',index:'tax', width:55} 
    ], 
    multiselect: false, 
    autowidth: true, 
    rowNum:10, 
    rowList:[10,20,30], 
    pager: '#pager', 
    sortname: 'id', 
    sortorder: "desc", 
    viewrecords: true, 
    subGrid : true, 
    subGridRowExpanded: function(subgrid_id, row_id) { 
    var subgrid_table_id, subgrid_pager_id, desired_width; 
      subgrid_table_id = subgrid_id+"_t"; 
      subgrid_pager_id = "p_"+subgrid_table_id; 
      desired_width = $("#list").width(); 
      desired_width -= 25; // adjust this value as needed 
      $("#"+subgrid_id).html("<table id='"+subgrid_table_id+ 
      "' class='scroll'></table><div id='"+subgrid_pager_id+"' class='scroll'></div>"); 
       jQuery("#"+subgrid_table_id).jqGrid({ 
       url:"subgrid-url.php?id="+row_id, 
       datatype: "json", 
       colNames: ['No','Item','Qty','Unit','Line Total'], 
       colModel: [ {name:"num",index:"num",width:80,key:true}, 
          {name:"item",index:"item",width:130}, 
          {name:"qty",index:"qty",width:70,align:"right"}, 
          {name:"unit",index:"unit",width:70,align:"right"},   
          {name:"total",index:"total",width:70,align:"right",sortable:false} 
       ], 
       rowNum:20, 
       pager: pager_id, 
       sortname: 'num', 
       sortorder: "asc", 
       height: '100%', 
       autowidth: false, 
       width: desired_width 
      }); 
     }, 
    caption: "Subgrid Example", 
    sortable: true   
});

來源

2011-05-25 11:41:24

我看你聲明desired_width但不使用它。我錯過了什麼嗎？ – Shinigamae 2013-06-05 04:27:57

@Shinigamae - 感謝您指出 - 修復。 – 2013-06-05 07:01:52

很高興它幫助:) – Shinigamae 2013-06-06 02:32:33

你可以使用CSS：

td.subgrid-data div.tablediv table { 
    width: 100% 
}

來源

2012-07-05 17:26:08

jqGrid將子網格寬度設置爲行寬度

回答

相關問題