jquery - jqGrid 将 SubGrid 宽度设置为行宽

Question

我正在用一个简单的子网格创建 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});

Answer 1

我找到了替代解决方案，但它需要将 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        
});

Answer 2

你可以使用 CSS：

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