jqGrid устанавливает ширину SubGrid равной ширине строки - PullRequest
Новая
       10

jqGrid устанавливает ширину SubGrid равной ширине строки

2 голосов
/ 18 мая 2011

Я создаю 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});

Ответы [ 2 ]

3 голосов
/ 25 мая 2011

Я нашел альтернативное решение, но оно требует создания 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        
});
1 голос
/ 05 июля 2012

Вы можете использовать CSS: 

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