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结构的Stack Overflow问题 jqGrid get "th" and "thead" using jQuery ，但是如何使用它来调整列的大小？

我使用此代码显示网格：

$(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。最好直接设置正确的值。

在我看来，你应该使用jqGrid的shrinkToFit: false参数。您应该考虑jqGrid（this和this）的宽度计算中的一些错误。如果您使用jqGrid的developer version，则可以使用我发布的相应错误修复程序：this或this。如果您使用jqGrid的标准最小化版本，则可以通过设置jqGrid的正确width来解决问题。

jqGrid用columnChooser，如何防止列选择后自动调整大小？

1 个答案: