jqGrid с columnChooser, как предотвратить авторазмер после выбора столбцов?

Question

У меня есть большая таблица, 24 столбца, 2000 пикселей, и я хочу, чтобы ширина каждого столбца оставалась неизменной после выбора столбцов видимости или изменения порядка. Но компонент, кажется, сокращает столбцы, чтобы соответствовать глобальному размеру сетки в конце.

Как предотвратить это изменение размера и сохранить исходную ширину каждого столбца, который остается видимым?

Или как установить ширину для столбца? Я нашел этот код, чтобы получить фактическую ширину столбца,

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());

Но как мне установить новую ширину и отобразить результат?

Я нашел вопрос переполнения стека jqGrid получить "th" и "thead", используя jQuery о структуре jqGrid, но как использовать его для изменения размера столбца?

Я использую этот код, чтобы показать сетку:

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

и это в части тела:

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

---

Обновить

Я проверил это с новым значением ширины. Подобно:

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

Я также изменил код для вызова вызова columnchooser, как это

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

И это прекрасно работает сейчас!

Answer 1

Прежде всего, вы, вероятно, должны использовать другие значения width для всех столбцов. Ваши текущие значения будут расширены до 2000px, Лучше прямо установить правильное значение.

Мне кажется, что вы должны использовать shrinkToFit: false параметр jqGrid. Вы должны принять во внимание некоторые ошибки в вычислении ширины jqGrid ( это и это). Если вы используете версию jqGrid для разработчиков, вы можете использовать соответствующие исправления ошибок, которые я опубликовал: это или это. Если вы используете стандартную свернутую версию jqGrid, вы можете решить проблему, просто установив правильную width jqGrid.