带columnChooser的jqGrid,如何防止在选择列后自动调整大小?

带columnChooser的jqGrid,如何防止在选择列后自动调整大小?,jqgrid,resize,Jqgrid,Resize,我有一个大表,24列,2000像素大,希望在选择可见性或重新排序列后,每个列宽保持不变。但该组件似乎会收缩柱,以适应最后的网格全局大小 我如何防止这种调整大小并保持每列的原始宽度保持可显示 或者如何设置列的宽度? 我发现这段代码是为了得到一列的实际宽度 mygrid=$("#list"); var width = 0, i = 0, headers = mygrid[0].grid.headers, l = headers.length; var th = headers[4].el; // 5

我有一个大表,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结构的StackOverflow问题,但是如何使用它来调整列的大小呢

我使用以下代码显示网格:

$(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>
我还修改了代码来调用columnchooser调用,如下所示

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

现在它工作得很好

首先,您可能应该为所有列使用其他值
width
。当前值将扩展到
2000px
。最好直接设置正确的值

在我看来,您应该使用jqGrid的
shrinkToFit:false
参数。在jqGrid(和)的宽度计算中,您应该考虑一些错误。如果您使用jqGrid,您可以使用我发布的相应错误修复:或。如果使用jqGrid的标准最小化版本,只需设置jqGrid的正确
宽度
,即可解决此问题

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