All geek questions in one place

JqGrid hidden plus / minus / open icon column makes the subgrade less wide as the main row

Following this post about hiding the column column plus / minus / expansion, I applied these suggestions, so in the CSS file:

.subgrid-cell { display: none; }

Everything is good:

enter image description here

but the subgraph does not fill the width of the right column of the main grid. enter image description here

Please have an error in my code,

 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');});

or is there a way to solve or work around this problem?

Many thanks to anyone who can help me. To have a good day

Jihel

0
source share
1 answer

If I understand your question correctly, you can fix the problem by adding

 autowidth: true

for both subgrid (see the two subGridRowExpanded you use).

I recommend that you additionally check your code for tools such as JSLint or JSHint. You will see that your code uses many undefined variables ( colModel , sortName , rowdata ). In addition, it is strongly recommended to use the idPrefix parameter in jqGrid with subgrids to prevent possible duplicate identifiers.

UPDATED : after you sent the violinist demo I understand the problem. To fix this, I suggest setting the colspan attribute to <td> with the subgrid-data class. For example, you can include a line in a subGridRowExpanded callback

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

in your demo to fix the problem. See http://jsfiddle.net/Cs9CP/11/ (or full screen demo ). In addition, I recommend using height: "auto" for all sub-grids. As a result, you will see something like

enter image description here

If you want, you can optionally hide the first empty column in the subtitle with the line

 $("# + subgrid_id).closest(".ui-subgrid").find("td[colspan=1]").first().hide();

See http://jsfiddle.net/Cs9CP/12/ (or full screen demo ):

enter image description here

+2
source

Source: https://habr.com/ru/post/1305439/

More articles:


All Articles