jqGrid头宽度不同于数据列的宽度 [英] jqGrid header width different from data column width

问题描述

我已经实现了jgGrid并启用了treeGrid。在Firefox上，标题行（带有标题的列）的宽度与数据行的宽度不同。
我已经附加了jqGrid的init代码和一个链接的截图图片关闭的问题（因为我是新来的网站，似乎我不能上传图像）

  jQuery（＃treegrid）。jqGrid（{
 treeGrid：true，
 treeGridModel：'nested'，
 ExpandColumn：'customer'，
 url：'index.php？page = 902& uid ='+ uid +'& forecast_pageno ='+ pageno，
 datatype：json，
 mtype：POST，
 colNames：[Id，Type，Customer，Year，％，Jan，Feb，Mar，Apr， May，Jun，Jul，Aug，Sep，Oct，Nov，Dec，Total，Status]，
 colModel：[
 {name：'id'，index：'id'，hidden：true}，
 {name：'type'，index：'type'，hidden：true}，
 {name：'客户'，索引：'customer'，宽度：225，align：left，sortable：false，fixed：true}，
 {name：'year'，index：'year'，width：45，sortable ：false，align：right}，
 {
 name：'market_increase'，
 index：'market_increase'，
 width：30，
 editable：true，editrules：{number：true}，$ b $ formatter：marketIncreaseFormatter，
 unformat：marketIncreaseUFormatter，sortable：false，align：right
}，
 {name：'jan'，index：'jan'，width：60，editable：true，editrules：{number ：true}，sortable：false，align：right}，
 {name：'feb'，index：'feb'，width：60，editable：true，editrules：{number：true} false，align：right}，
 {name：'mar'，index：'mar'，width：60，editable：true，editrules：{number：true}，sortable：false，align：right }，
 {name：'apr'，index：'apr'，width：60，editable：true，editrules：{number：true}，sortable：false，align：right}，
 {name：'may'，index：'may'，width：60，editable：true，editrules：{number：true}，sortable：false，align：right}，
 {name：'jun ，index：'jun'，width：60，editable：true，editrules：{number：true}，sortable：false，align：right}，
 {name：'jul'，index：'jul' ，width：60，editable：true，editrules：{number：true}，sortable：false，align：right}，
 {name：'aug'，index：'aug'，width：60，editable ：true，editrules：{number：true}，sortable：false，align：right}，
 {name：'sep'，index：'sep'，width：60，editable：true，editrules：{ number：true}，sortable：false，align：right}，
 {name：'oct'，index：'oct'，width：60，editable：true，editrules：{number：true}，sortable ：false，align：right}，
 {name：'nov'，index：'nov'，width：60，editable：true，editrules：{number：true}，sortable：false，align： ，
 {name：'dec'，index：'dec'，width：60，editable：true，editrules：{number：true}，sortable：false，align：right}，
 {name：'total'，index：'total'，width：60，sortable：false，align：right}，
 {name：s 
 $，b 
，
，
 cellEdit：true，
 rowNum：-1} ）; 
  

Gabriel

谢谢，Gabriel

I've implemented jqGrid with treeGrid enabled. On Firefox, the width off the header row (with the titles of the columns) is different from the width off the data rows. I've attached the init code for the jqGrid and a link with the screenshot image off the problem (because I'm new to the site, it appears I can't upload the image)

jQuery("#treegrid").jqGrid({
   treeGrid: true,
   treeGridModel: 'nested',
   ExpandColumn : 'customer',
   url: 'index.php?page=902&uid=' + uid + '&forecast_pageno=' + pageno,
   datatype: "json",
   mtype: "POST",
      colNames:["Id","Type","Customer","Year","%" , "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Total", "Status"],
      colModel:[
         {name:'id',index:'id',hidden:true},
         {name:'type',index:'type',hidden:true},
         {name:'customer',index:'customer', width:225, align:"left", sortable:false, fixed:true},
         {name:'year', index:'year', width:45, sortable:false, align:"right"},
     {
             name:'market_increase',
             index:'market_increase',
             width:30,
             editable:true, editrules:{number:true},
             formatter:marketIncreaseFormatter,
             unformat:marketIncreaseUFormatter, sortable:false, align:"right"
         },
         {name:'jan', index:'jan', width:60, editable:true, editrules:{number:true}, sortable:false, align:"right"},
         {name:'feb', index:'feb', width:60, editable:true, editrules:{number:true}, sortable:false, align:"right"},
         {name:'mar', index:'mar', width:60, editable:true, editrules:{number:true}, sortable:false, align:"right"},
         {name:'apr', index:'apr', width:60, editable:true, editrules:{number:true}, sortable:false, align:"right"},
         {name:'may', index:'may', width:60, editable:true, editrules:{number:true}, sortable:false, align:"right"},
         {name:'jun', index:'jun', width:60, editable:true, editrules:{number:true}, sortable:false, align:"right"},
         {name:'jul', index:'jul', width:60, editable:true, editrules:{number:true}, sortable:false, align:"right"},
         {name:'aug', index:'aug', width:60, editable:true, editrules:{number:true}, sortable:false, align:"right"},
         {name:'sep', index:'sep', width:60, editable:true, editrules:{number:true}, sortable:false, align:"right"},
         {name:'oct', index:'oct', width:60, editable:true, editrules:{number:true}, sortable:false, align:"right"},
         {name:'nov', index:'nov', width:60, editable:true, editrules:{number:true}, sortable:false, align:"right"},
         {name:'dec', index:'dec', width:60, editable:true, editrules:{number:true}, sortable:false, align:"right"},
         {name:'total', index:'total', width:60, sortable:false, align:"right"},
         {name:'status', index:'status', hidden:true}

      ],
   height:'auto',
   cellEdit: true,
   rowNum: -1});

Screenshot Image

Thanks, Gabriel

解决方案

Okey, there seems I was using a different css file for the jqGrid, from an older release. An update of the css solved the problem. Thanks, Gabriel

这篇关于jqGrid头宽度不同于数据列的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！