带columnChooser的jqGrid,如何防止在选择列后自动调整大小?
我有一个大表,24列,2000像素大,希望在选择可见性或重新排序列后,每个列宽保持不变。但该组件似乎会收缩柱,以适应最后的网格全局大小 我如何防止这种调整大小并保持每列的原始宽度保持可显示 或者如何设置列的宽度? 我发现这段代码是为了得到一列的实际宽度带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
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});