texto - jqGrid con columnChooser, ¿cómo evitar el aumento de tamaño después de la elección de columnas?

phpspreadsheet column width auto

Question

Tengo una tabla grande, 24 col, 2000 píxeles de gran tamaño, y quiero que el ancho de cada columna permanezca como está después de elegir las columnas de visibilidad o reordenar. Pero el componente parece reducir las columnas para adaptarse al tamaño global de la cuadrícula al final.

¿Cómo evito este cambio de tamaño y mantengo el ancho original de cada columna visible?

¿O cómo establecer el ancho de una columna? Encontré este código para obtener el ancho real de una columna,

mygrid=$("#list");
var width = 0, i = 0, headers = mygrid[0].grid.headers, l = headers.length;
var th = headers[4].el; // 5 th column in this sample
alert($(th).width());

Pero, ¿cómo configuro el nuevo ancho y visualizo el resultado?

Encontré la pregunta de jolgrid de Stack Overflow get "th" and "thead" usando jQuery sobre la estructura jqGrid, pero ¿cómo usarlo para cambiar el tamaño de una columna?

Yo uso este código para mostrar la grilla:

$(function(){ ''navGrid'',
$("#list").jqGrid({
url:''myfirstgrid.php?from=''+$("#from").val()+''&to=''+$("#to").val(),
datatype: ''json'',
loadError: function(xhr,status,error){alert(status+" "+error);},
mtype: ''GET'',
colNames:[''id'',''date'',''heure'',''expediteur'',''refcommande'',''retour'',''differe'',''identiclient'',''nomclient'',''adresse'',''postal'',''ville'',''zone'',''pays'',''telephone'',''nature'',''nbcolis'',''poids'',''typeexpe'',''message'',''portpaye'',''montantCR'',''valeur'',''aiguillage''],
colModel :[
{name:''id'', index:''id'', width:40, sorttype:"int",sortable:true,align:''right'',autowidth: false},
{name:''datedemande'', index:''datedemande'', width:40,align:''center'',datefmt:''d-m-Y'',autowidth: false},
{name:''heuredemande'', index:''heure'', width:35, align:''center'',autowidth: false},
{name:''expediteur'', index:''expediteur'', width:60, align:''left'',autowidth: false},
{name:''refcommande'', index:''refcommande'', width:60, align:''left'',autowidth: false},
{name:''retour'', index:''retour'', width:15, sortable:false, align:''center'',autowidth: false},
{name:''datediffere'', index:''datediffere'', width:35, align:''center'',autowidth: false},
{name:''identiclient'', index:''identiclient'', width:35,aligne:''left'',autowidth: false},
{name:''nomclient'', index:''nomclient'', width:70,aligne:''left'',autowidth: false},
{name:''adresse'', index:''adresse'', width:90,align:''left''},
{name:''postal'', index:''postal'', width:35,align:''right''},
{name:''ville'', index:''ville'', width:55},
{name:''zone'', index:''zone'', width:55},
{name:''pays'', index:''pays'', width:30},
{name:''telephone'', index:''telephone'', width:55,align:''right''},
{name:''nature'', index:''nature'', width:55},
{name:''nbcolis'', index:''nbcolis'', width:30, align:''right''},
{name:''poids'', index:''poids'', width:30, align:''right''},
{name:''typeexpe'', index:''typeexpe'', width:30},
{name:''message'', index:''message'', width:70,jsonmap:''message''},
{name:''portpaye'', index:''portpaye'', width:30 },
{name:''montantCR'', index:''montantCR'', width:30, align:''right''},
{name:''valeur'', index:''valeur'', width:30, align:''right''},
{name:''aiguillage'', index:''aiguillage'', width:45}
],
jsonReader: { repeatitems: false,root:"rows" },
pager: ''#pager'',
rowNum:10,
rowList:[10,15,20,25,30,40,50,100],
sortname: ''id'',
sortorder: ''desc'',
viewrecords: true,
autowidth: false,
eight:"100%",
idth:2000,
iddengrid: false,
overrows:true,
ortable:true,
ixed:true,
caption: ''Historique demandes''
});
jQuery("#list").jqGrid(''navGrid'',"#pager",{edit:false,add:false,del:false,search:true},{},{},{},{multipleSearch:true});
jQuery("#list").jqGrid(''navButtonAdd'',''#pager'',{
caption: "Columns",
title: "Reorder Columns",
onClickButton : function (){
jQuery("#list").jqGrid(''columnChooser'');
}
});
});

y esto en la parte del cuerpo:

<div id="parentDiv" style="width: 100%"><table id="list"></table><div id="pager"></div></div>

Actualizar

Lo probé con el nuevo valor de ancho. Me gusta:

pager: ''#pager'',
rowNum: 10,
rowList: [10,15,20,25,30,40,50,100],
sortname: ''id'',
sortorder: ''desc'',
viewrecords: true,
autowidth: false, //ne pas recalculer la largeur de chaque colonne.
height: "100%",
width: ''3000px'',
hiddengrid: false,
hoverrows: true,
sortable: true,
fixed: true,
ShrinkToFit: false,
caption: ''Historique demandes'' ,
shrinkToFit: false

También modifiqué el código para llamar a la llamada columnchooser como esta

jQuery("#list").jqGrid(''navButtonAdd'',''#pager'',{
caption: "Columns",
title: "Reorder Columns",
onClickButton : function (){
jQuery("#list").jqGrid(''columnChooser'',{shrinkToFit:false,autowidth: false});

¡Y funciona genial ahora!

Answer 1

En primer lugar, probablemente debería usar otros valores de width para todas las columnas. 2000px valores actuales se expandirán a 2000px . Es mejor establecer directamente el valor correcto.

Me parece que debes usar shrinkToFit: false parámetro shrinkToFit: false de jqGrid. Debe tener en cuenta algunos errores en el cálculo del ancho de jqGrid ( esto y esto ). Si usa la versión para desarrolladores de jqGrid, puede usar las correcciones de errores correspondientes que publiqué: esto o esto . Si usa la versión minimizada estándar de jqGrid, puede solucionar el problema simplemente configurando el width correcto de jqGrid.