JQGrid-标题和列未对齐

希望有人能给我指出正确的方向

我有时会面临这个问题

我尝试了从stackoverflow中找到的一些解决方案

e、 g

&其他来源，但没有解决我的问题。这个问题只有在升级到Chrome19及以上版本（我想！）和Safari6之后才会出现。当我在使用safari 5的第二台计算机上查看时，以及当我重新安装Chrome版本18时，我注意到没有问题

我尝试通过从trirand.net下载来更新一些js和css文件，但没有找到解决方案

目前我正在运行Safari版本6.0.1（8536.26.14）和Chrome版本26.0.1410.43

谢谢

更新2:更新到4.4.5图像后 &我忘了提到只有在我集成到lightbox（facebox）中时才会发生这种情况

更新3: @在更新到4.4.5之后，我才意识到这一点，或者只是粘贴了你的代码（内部评论） 我无法再使用我的自定义按钮（工作b4）。。什么也没发生

我使用的是javascript和php jqgrid，下面是我的代码：

<div align="center" id="grido"> </div>  
<script type="text/javascript">
 //var lastSel;
$(document).ready(function(){ 
//  $('#grido').load('form/housekeeping/dun_grid.php');
});
</script>

<script type="text/javascript">
<!-- dun_grid.js  --> 

jQuery(document).ready(function(){

  var lastSel;

 jQuery("#dun_grid").jqGrid({
  url:'form/housekeeping/dun_griddata.php',
  datatype: "json",
  colNames:['DUN ID','DUN Code', 'DUN Name'],    
  colModel:[
      {name:'int_dunid',index:'int_dunid', hidden:true, align:"center", width:50},
      {name:'txt_dcode',index:'txt_dcode', editable:true, align:"center", width:150},
      {name:'txt_dname',index:'txt_dname', editable:true, align:"center", width:150},

          ],
  pager: '#pagerdun', //pagination enable
  rowNum:15,
  rowList:[10,20,30],
  width:430,
  height:'auto',
  sortname: 'txt_dcode',
  sortorder: 'asc',
  hidegrid: false,  //show/hide  grid button on caption header

  viewrecords: true, //display the number of total records
  editurl:"form/housekeeping/dun.php?mode=edit",
  loadtext: "Loading Data, Please Wait...",
  rownumbers:true, // add row numbers on left side
  caption: '&nbsp; DUN List',


 ondblClickRow: function(id){
     if(id && id!==lastSel){ 
       jQuery('#dun_grid').restoreRow(lastSel); 
       lastSel=id; 
    } 
    jQuery('#dun_grid').editRow(id, true, "", refreshing); 
 },

  onSelectRow: function(id){ 
    if(id && id!==lastSel){ 
       jQuery('#dun_grid').restoreRow(lastSel); 
       lastSel=id; 
    }  
 },  


}); /* end of jqgrid */


    jQuery("#dun_grid").jqGrid('navGrid','#pagerdun',{edit:false, add:false, view:false, del:true, search:true}, 
      {}, // edit
      {}, // add
      {url: 'form/housekeeping/dun.php?mode=delete'},  // delete
      {multipleSearch : true},
      {closeOnEscape:true} 
      );  //end on navgrid

    jQuery("#dun_grid").jqGrid('navButtonAdd','#pagerdun',{caption:"", buttonicon :'ui-icon-plus', 

        onClickButton:function(id){
          jQuery('#dun_grid').restoreRow(lastSel);

              var datarow = {txt_dname:""};
              jQuery("#dun_grid").addRowData("0",datarow,"first");
              jQuery('#dun_grid').editRow("0", true, "", tiesto);
              lastSel=id;
          },//end of onClickButton
        title:"New Record", 
        position:"last"
        }); //end of custom button


function refreshing(id){ /* refresh grid */
    jQuery('#dun_grid').trigger("reloadGrid");
    $.blockUI({ message:"Saving Data!!"}); 
        setTimeout($.unblockUI, 700); 
    } 

function tiesto(){
    jQuery('#dun_grid').restoreRow(lastSel);
   jQuery('#dun_grid').trigger("reloadGrid");
    $.blockUI({ message:"New Data Saved!!"}); 
        setTimeout($.unblockUI, 700); 
    } 


});  /*end of document ready*/
</script>


<div align="center" class="gridpanel" >   
<!--------------------------- ## grid for add/edit ## ------------------------------------------>
   <table id="dun_grid" class="scroll" cellpadding="0" cellspacing="0"></table>
  <!-- pager definition -->
  <div id="pagerdun" class="scroll" style="text-align:center;"></div>

 </div> <!----------------------- grid panel end -------------------------------------->

//var lastSel；
$（文档）.ready（函数（）{
//$（'#grido'）.load（'form/housing/dun#u grid.php'）；
});
jQuery（文档）.ready（函数（）{
var lastSel；
jQuery（“dun#u网格”）.jqGrid({
url:'form/housing/dun_griddata.php'，
数据类型：“json”，
colNames:['DUN ID'，'DUN Code'，'DUN Name']，
colModel：[
{name:'int_dunid'，index:'int_dunid'，hidden:true，align:“center”，width:50}，
{名称：'txt\u dcode'，索引：'txt\u dcode'，可编辑：true，对齐：“中心”，宽度：150}，
{名称：'txt_dname'，索引：'txt_dname'，可编辑：true，对齐：“中心”，宽度：150}，
],
寻呼机：'#pagerdun'，//启用分页
rowNum:15，
行列表：[10,20,30]，
宽度：430，
高度：'自动'，
sortname:'txt\u dcode'，
排序器：“asc”，
hidegrid:false，//在标题标题上显示/隐藏网格按钮
viewrecords:true，//显示总记录数
editurl:“form/housing/dun.php？mode=edit”，
loadtext:“正在加载数据，请稍候…”，
rownumbers:true，//在左侧添加行号
标题：“邓列表”，
ondblClickRow:函数（id）{
如果（id&&id！==lastSel）{
jQuery（'dun#u grid'）.restoreRow（lastSel）；
lastSel=id；
} 
jQuery（“#dun_grid”）.editRow（id，true，”，刷新）；
},
onSetRow:函数（id）{
如果（id&&id！==lastSel）{
jQuery（'dun#u grid'）.restoreRow（lastSel）；
lastSel=id；
}  
},  
})；/*jqgrid的结尾*/
jQuery（#dun#u grid”）.jqGrid（'navGrid'，'#pagerdun'，{edit:false，add:false，view:false，del:true，search:true}，
{}，//编辑
{}，//添加
{url:'form/housing/dun.php？mode=delete'}，//delete
{multipleSearch:true}，
{closeOnEscape:true}
)；//在navgrid上结束
jQuery（“#dun#grid”）.jqGrid（'navbuttonad'，'#pagerdun'，{caption:，buttonicon:'ui-icon-plus'，
onClick按钮：功能（id）{
jQuery（'dun#u grid'）.restoreRow（lastSel）；
var datarow={txt_dname:“”}；
jQuery（“#dun#u grid”）.addRowData（“0”，datarow，“first”）；
jQuery（“#dun_grid”）.editRow（“0”，true，”，tiesto）；
lastSel=id；
}，//onclick按钮的结束
标题：“新纪录”，
位置：“最后”
})；//自定义按钮的结束
函数刷新（id）{/*刷新网格*/
jQuery（“#dun#u grid”）.trigger（“reloadGrid”）；
$.blockUI（{消息：“正在保存数据！！”}）；
setTimeout（$.unbui，700）；
} 
函数to（）{
jQuery（'dun#u grid'）.restoreRow（lastSel）；
jQuery（“#dun#u grid”）.trigger（“reloadGrid”）；
$.blockUI（{消息：“新数据已保存！！”}）；
setTimeout（$.unbui，700）；
} 
});  /*文件结束准备好了吗*/

PHP

---

尝试将属性

shrinkToFit

设置为

true

shrinkToFit : true,

如图所示：

此选项（如果设置）定义了应如何重新计算网格列的宽度，同时考虑网格的宽度。如果此值为true，并且还设置了列的宽度，则将根据其宽度按比例缩放每列。例如，如果我们定义了两个宽度分别为80和120像素的列，但希望网格的宽度为300像素，那么这些列将拉伸以适应整个网格，分配给它们的额外宽度将取决于列本身的宽度和可用的额外宽度。

---

我有同样的问题，并能够通过调整CSS来解决它。我在导致问题的

th

上设置了

padding

您的

th

可能继承了

padding

，这会弄乱对齐方式

---

如果

th

上的填充与网格单元格不同（特别是

左填充
和
右填充
），则会中断对齐。
将此代码添加到网格的
gridComplete
事件中。别忘了用您的网格id替换
gridName
：

var objHeader = $("table[aria-labelledby=gbox_" + gridName+ "] tr[role=rowheader] th");

for (var i = 0; i < objHeader.length; i++) {
   var col = $("table[id=" + gridName+ "] td[aria-describedby=" + objHeader[i].id + "]");
   var width= col.outerWidth();
   $(objHeader[i]).css("width", width);
}

var-objHeader=$（[table[aria-labelledby=gbox"+gridName+“]tr[role=rowheader]th”）；
对于（变量i=0；i

适用于v.4.6.0。
我的案例

jqgrid版本4.6.0


在网格中对标题进行分组


shrinkTofit不起作用


我在gridComplete事件中调用了以下函数

函数AlignColumnSwithHeaderGenel（gridName）{

var-objHeaders=$（[table[aria-labelledby=gbox"+gridName+“]tr[class=jqg第一行标题]th”）；
var objColumns=$（[table[id=“+gridName+”]tr[class=jqgfirstrow]td”）；
对于（变量i=0；i

}


斯特拉
var objHeader = $("table[aria-labelledby=gbox_" + gridName+ "] tr[role=rowheader] th");

for (var i = 0; i < objHeader.length; i++) {
   var col = $("table[id=" + gridName+ "] td[aria-describedby=" + objHeader[i].id + "]");
   var width= col.outerWidth();
   $(objHeader[i]).css("width", width);
}

 var objHeaders = $("table[aria-labelledby=gbox_" + gridName + "] tr[class=jqg-first-row-header] th");
 var objColumns = $("table[id=" + gridName + "] tr[class=jqgfirstrow] td");
 for (var i = 0; i < objHeaders.length; i++) {
     objHeaders[i].style.width = objColumns[i].style.width;
 }