Question

关于隐藏加/减/打开图标列的这个post之后，我已经应用了这些建议，所以在CSS文件中：

.subgrid-cell { display: none; }

一切都好：

enter image description here

但是子网格没有填充主网格右列的宽度。 enter image description here

请问，我的代码中有错误，

jQuery(document).ready(function ($) {
var OldSelectedRow=null;
var height=$('body').height()-210;
var numRows=Math.floor(height/23)-(Math.floor(height/23)%5);
var heightRows=numRows*23;
var myGrid = $("#tab22");
myGrid.jqGrid({
    caption:"Recherche d'un ARTICLE dans les PARCS CLIENTS",
    hidegrid:false,
    url:'sub22.php',
    datatype: "json",
    height:heightRows,
    shrinkToFit: true,
    rowNum:numRows,
    rownumbers:true,
    rownumWidth: 40, 
    gridview: true,
    colNames:['Id','Code', 'Désignation', 'Famille','S/famille','Marque','Matière','Réf.constructeur','PV base'],
    colModel:[ 
        {name:'a.id',index:'a.id', width:60, align:"right",hidden:true}, 
        {name:'a.code',index:'a.code', width:150}, 
        {name:'a.descr',index:'a.descr', width:200}, 
        {name:'f.code',index:'f.code', width:80}, 
        {name:'s.code',index:'s.code', width:80}, 
        {name:'k.code',index:'k.code', width:80}, 
        {name:'m.code',index:'m.code', width:80},
        {name:'a.refc',index:'a.refc', width:150},
        {name:'t.pnc',index:'t.pnc', width:80, align:"right"}
    ], 
    pager: '#tab22p', 
    sortname: 'a.code', 
    sortorder: "asc", 
    viewrecords: true,
    emptyrecords: 'Aucune donnée correspondante...',        
    altRows:true,
    altclass:'myAltRowClass',
    onSortCol: function (index, idxcol, sortorder) {
        //  montre la colonne sélectionnée pour le tri de la grille
        if (this.p.lastsort >= 0 && this.p.lastsort !== idxcol
                        && this.p.colModel[this.p.lastsort].sortable !== false) {
                $(this.grid.headers[this.p.lastsort].el).find(">div.ui-jqgrid-sortable>span.s-ico").show();
                $(this.grid.headers[this.p.lastsort].el).removeClass('ui-state-active');
        }
        $(this.grid.headers[idxcol].el).addClass('ui-state-active');
    },
    gridComplete:function(){
        OldSelectedRow=null;
        colModel = myGrid.jqGrid('getGridParam', 'colModel');
        sortName = myGrid.jqGrid('getGridParam', 'sortname');
        $('#gbox_' + $.jgrid.jqID(myGrid[0].id) +
                ' tr.ui-jqgrid-labels th.ui-th-column').each(function (i) {
                var cmi = colModel[i], colName = cmi.name;
                if (cmi.sortable !== false) {
                        $(this).find('>div.ui-jqgrid-sortable>span.s-ico').show();
                } else if (!cmi.sortable && colName !== 'rn' && colName !== 'cb' && colName !== 'subgrid') {
                        $(this).find('>div.ui-jqgrid-sortable').css({cursor: 'default'});
                }
                if (cmi.name === sortName) {
                        $(this).addClass('ui-state-active');
                        //alert(i);
                        var gridId = myGrid.jqGrid('getDataIDs');
                        for (var countRow = 0; countRow < gridId .length; countRow ++)
                        {
                            var rowId = gridId [countRow ];
                            var dataFromTheRow = myGrid.jqGrid ('getRowData', rowId);
                            myGrid.jqGrid('setCell',rowId, i, '','ui-widget-header');
                            myGrid.jqGrid('setCell',rowId, i, '',{'border-top':0,'border-left':0});
                        }
                }
        });
    },
    onSelectRow:function(id,status){
        if(OldSelectedRow!=id){
            if(OldSelectedRow!=null){
                myGrid.jqGrid ('collapseSubGridRow', OldSelectedRow);
                $('#tab22_'+OldSelectedRow+'_t').remove();
                $('#'+OldSelectedRow).removeClass('ui-state-highlight');
            }
            $('#'+id).addClass('ui-state-highlight');
            OldSelectedRow=id;
            myGrid.jqGrid('expandSubGridRow',id);
        }else{
                myGrid.jqGrid ('collapseSubGridRow', id);
                $('#tab22'+id+'_t').remove();
                $('#'+id).removeClass('ui-state-highlight');
                OldSelectedRow=null;
        }
    },
    subGrid: true,
    subGridRowExpanded: function(subgrid_id, row_id) { 
        rowdata = $("#tab22").jqGrid('getRowData',row_id);
        var art=rowdata['a.id'],lastId;
        var subgrid_table_id, pager_id; 
        subgrid_table_id = subgrid_id+"_t"; 
        pager_id = "p_"+subgrid_table_id; 
        $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>"); 
        $("#"+subgrid_table_id).jqGrid({ 
            url:"sg22.php?id="+row_id+"&art="+art, 
            datatype: "json", 
            colNames: ['Id','Groupe','Client', 'Nom','Ville','Matériel','Marque','Machine','Série','Type','Modèle','Désignation','N° série'],
            colModel: [ 
                {name:'p.id',index:'p.id', width:60, align:"right",hidden:true}, 
                {name:'g.code',index:'g.code', width:80}, 
                {name:'c.code',index:'c.code', width:60},
                {name:'c.descr',index:'c.descr', width:200}, 
                {name:'c.ville',index:'c.ville', width:200}, 
                {name:'q.code',index:'q.code',width:80},
                {name:'k.code',index:'k.code', width:80}, 
                {name:'2h.code',index:'2h.code', width:60}, 
                {name:'2s.code',index:'2s.code', width:60}, 
                {name:'2t.code',index:'2t.code', width:60}, 
                {name:'2m.code',index:'2m.code', width:60}, 
                {name:'2m.descr',index:'2m.descr', width:200}, 
                {name:'p.numserie',index:'p.numserie', width:80}
            ], 
            pager: pager_id, 
            rownumbers: true,
            rowNum:15,
            rowNumWidth:40,             
            viewrecords: true,
            emptyrecords: 'Aucune donnée correspondante...',    
            caption:"Liste des PARCS CLIENTS contenant l'ARTICLE sélectionné",
            hidegrid:false,
            rownumWidth: 40,
            autowidth:true,     
            altRows:true,
            altclass:'myAltRowClass',
            sortname: 'c.code', 
            sortorder: "asc", 
            height: 345,
            onSortCol: function (index, idxcol, sortorder) {
                //  montre la colonne sélectionnée pour le tri de la grille
                if (this.p.lastsort >= 0 && this.p.lastsort !== idxcol
                                && this.p.colModel[this.p.lastsort].sortable !== false) {
                        $(this.grid.headers[this.p.lastsort].el).find(">div.ui-jqgrid-sortable>span.s-ico").show();
                        $(this.grid.headers[this.p.lastsort].el).removeClass('ui-state-active');
                }
                $(this.grid.headers[idxcol].el).addClass('ui-state-active');
            },
            onSelectRow:function(id,status){
                if(lastId!=id){
                    if(lastId!=null){
                        $("#"+subgrid_table_id).jqGrid ('collapseSubGridRow', lastId);
                        $('#'+subgrid_table_id+'t').remove();
                        $('#'+id).removeClass('ui-state-highlight');
                    }
                    $('#'+id).addClass('ui-state-highlight');
                }
                lastId=id;
                $("#"+subgrid_table_id).jqGrid('expandSubGridRow',id);
            },
            gridComplete:function(){
                //  montre la colonne triée au chargement des données
                colModel = $("#"+subgrid_table_id).jqGrid('getGridParam', 'colModel');
                sortName = $("#"+subgrid_table_id).jqGrid('getGridParam', 'sortname');
                $('#gbox_' + $.jgrid.jqID($("#"+subgrid_table_id)[0].id) +
                        ' tr.ui-jqgrid-labels th.ui-th-column').each(function (i) {
                        var cmi = colModel[i], colName = cmi.name;
                        if (cmi.sortable !== false) {
                                $(this).find('>div.ui-jqgrid-sortable>span.s-ico').show();
                        } else if (!cmi.sortable && colName !== 'rn' && colName !== 'cb' && colName !== 'subgrid') {
                                $(this).find('>div.ui-jqgrid-sortable').css({cursor: 'default'});
                        }
                        if (cmi.name === sortName) {
                                $(this).addClass('ui-state-active');
                                var gridId = $("#"+subgrid_table_id).jqGrid('getDataIDs');
                                for (var countRow = 0; countRow < gridId .length; countRow ++)
                                {
                                    var rowId = gridId [countRow ];
                                    var dataFromTheRow = $("#"+subgrid_table_id).jqGrid ('getRowData', rowId);
                                    $("#"+subgrid_table_id).jqGrid('setCell',rowId, i, '','ui-widget-header');
                                    $("#"+subgrid_table_id).jqGrid('setCell',rowId, i, '',{'border-top':0,'border-left':0});
                                }
                        }
                });
            },
            subGrid: true,
            subGridRowExpanded: function(subgrid2_id, row2_id) { 
                rowdata = $(this).jqGrid('getRowData',row2_id);
                var parc=rowdata['p.id'],lastId=null;
                var subgrid2_table_id, pager2_id; 
                subgrid2_table_id = subgrid2_id+"_tt"; 
                pager2_id = "p_"+subgrid2_table_id; 
                $("#"+subgrid2_id).html("<table id='"+subgrid2_table_id+"' class='scroll'></table><div id='"+pager2_id+"' class='scroll'></div>"); 
                $("#"+subgrid2_table_id).jqGrid({ 
                    url:"sg22b.php?id="+row2_id+"&parc="+parc, 
                    datatype: "json",
                    caption:"Détail du PARC",
                    hidegrid:false,
                    colNames:['Id','Ensemble','Article', 'Désignation', 'Famille','S/Famille','Matière','PV base','% Remise','PV net'],
                    colModel:[ 
                        {name:'a.id',index:'a.id', width:60, align:"right",hidden:true}, 
                        {name:'c.code',index:'c.code', width:100,sortable:false}, 
                        {name:'a.code',index:'a.code', width:100,sortable:false}, 
                        {name:'a.descr',index:'a.descr', width:400,sortable:false}, 
                        {name:'f.code',index:'f.code', width:80,sortable:false},
                        {name:'s.code',index:'s.code', width:80,sortable:false},
                        {name:'m.code',index:'m.code', width:80,sortable:false},
                        {name:'t.pnc',index:'t.pnc', width:80,align:'right',sortable:false},
                        {name:'rem',index:'rem', width:80,align:'center',sortable:false},
                        {name:'pv',index:'pv', width:80,align:'right',sortable:false}
                    ], 
                    pager: pager2_id, 
                    rownumbers: true, 
                    viewrecords: true,
                    emptyrecords: 'Aucune donnée correspondante...',        
                    rownumWidth: 40, 
                    altRows:true,
                    altclass:'myAltRowClass',
                    sortname: 'c.code', 
                    sortorder: "asc", 
                    scroll:true,
                    maxheight: 230,
                    onSortCol: function (index, idxcol, sortorder) {
                        //  montre la colonne sélectionnée pour le tri de la grille
                        if (this.p.lastsort >= 0 && this.p.lastsort !== idxcol
                                        && this.p.colModel[this.p.lastsort].sortable !== false) {
                                $(this.grid.headers[this.p.lastsort].el).find(">div.ui-jqgrid-sortable>span.s-ico").show();
                                $(this.grid.headers[this.p.lastsort].el).removeClass('ui-state-active');
                        }
                        $(this.grid.headers[idxcol].el).addClass('ui-state-active');
                    },
                    gridComplete:function(){
                        //  montre la colonne triée au chargement des données
                        colModel = $("#"+subgrid2_table_id).jqGrid('getGridParam', 'colModel');
                        sortName = $("#"+subgrid2_table_id).jqGrid('getGridParam', 'sortname');
                        $('#gbox_' + $.jgrid.jqID($("#"+subgrid2_table_id)[0].id) +
                                ' tr.ui-jqgrid-labels th.ui-th-column').each(function (i) {
                                var cmi = colModel[i], colName = cmi.name;
                                if (cmi.sortable !== false) {
                                        $(this).find('>div.ui-jqgrid-sortable>span.s-ico').show();
                                } else if (!cmi.sortable && colName !== 'rn' && colName !== 'cb' && colName !== 'subgrid') {
                                        $(this).find('>div.ui-jqgrid-sortable').css({cursor: 'default'});
                                }
                                if (cmi.name === sortName) {
                                        $(this).addClass('ui-state-active');
                                        var gridId = $("#"+subgrid2_table_id).jqGrid('getDataIDs');
                                        for (var countRow = 0; countRow < gridId .length; countRow ++)
                                        {
                                            var rowId = gridId [countRow ];
                                            var dataFromTheRow = $("#"+subgrid2_table_id).jqGrid ('getRowData', rowId);
                                            $("#"+subgrid2_table_id).jqGrid('setCell',rowId, i, '','ui-widget-header');
                                            $("#"+subgrid2_table_id).jqGrid('setCell',rowId, i, '',{'border-top':0,'border-left':0});
                                        }
                                }
                        });
                    }
                })
                $("#"+subgrid2_table_id).jqGrid('navGrid',"#"+pager2_id,{edit:false,add:false,del:false,search:false});
                $("#"+subgrid2_table_id).jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
            }
        }); 
        $("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:false,del:false,search:false});
        $("#"+subgrid_table_id).jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
        $("#"+subgrid_table_id).jqGrid('hideCol', 'subgrid');
    },
    subGridRowColapsed: function(subgrid_id, row_id) { 
        // this function is called before removing the data 
        var subgrid_table_id; 
        subgrid_table_id = subgrid_id+"_t"; 
        $("#"+subgrid_table_id).remove();
        myGrid.jqGrid('resetSelection');            
    }
});
myGrid.jqGrid('navGrid','#tab22p',{search:false,del:false,edit:false,add:false});   
myGrid.jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
myGrid.closest("div.ui-jqgrid-view")
        .children("div.ui-jqgrid-titlebar")
        .css({
            textAlign: "center"
        })
        .children("span.ui-jqgrid-title")
        .css({
            float: "none",
            color:'red',
            fontSize:'16px'
        });
myGrid.jqGrid('hideCol', 'subgrid');
$(window).bind('resize', function() {
        myGrid.jqGrid('setGridWidth',$('body').width()-22);
        var height=$('body').height()-210;
        numRows=Math.floor(height/23)-(Math.floor(height/23)%5);
        heightRows=numRows*23;
        myGrid.jqGrid('setGridParam', {height:heightRows,rowNum:numRows});
        myGrid.jqGrid('setGridHeight',heightRows);
        myGrid.trigger("reloadGrid");
}).trigger('resize');});

或者有什么方法可以解决或扭转这种麻烦吗？

非常感谢谁能给我一些帮助。祝你有愉快的一天

JiheL

Answer 1

如果我理解您的问题，您可以通过添加

来解决问题

autowidth: true

两个子网格的
选项（请参阅您使用的两个回调subGridRowExpanded。）

我建议您另外使用JSLint或JSHint等工具验证您的代码。您会看到您的代码使用了许多未定义的变量（colModel，sortName，rowdata）。此外，严格建议在jqGrid中使用带有子网格的idPrefix选项，以防止可能的id重复。

更新：发布the fiddler demo后，我了解问题所在。要解决此问题，我建议在colspan类<td>上设置subgrid-data属性。例如，可以在subGridRowExpanded中回调该行

$("#" + subgrid_id).closest("td").attr("colspan", 3);

在您的演示中解决问题。请参阅http://jsfiddle.net/Cs9CP/11/（或the full screen demo）。另外，我建议对所有子网格使用height: "auto"。结果你会看到像
这样的东西

如果需要，还可以使用行
隐藏子网格中的第一个空列
$("# + subgrid_id).closest(".ui-subgrid").find("td[colspan=1]").first().hide();

请参阅http://jsfiddle.net/Cs9CP/12/（或the full screen demo）：

jqGrid隐藏加/减/打开图标列使子网格不如主行宽

1 个答案: