JQGrid - 标题和列不对齐

时间：2013-04-03 09:19:41

标签： jqgrid

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

我有时会遇到这个问题。

http://imgur.com/j8S9ft5

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

e.g。jqGrid column not aligned with column headers

＆安培;其他来源，但没有解决我的问题。这个问题只有在升级到Chrome 19及更高版本（我认为！）和safari 6之后才会出现。我注意到在使用safari 5并重新安装Chrome ver 18的第二台计算机中查看时没有问题。

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

目前我正在运行Safari Version 6.0.1（8536.26.14）和Chrome Version 26.0.1410.43。

感谢

更新为4.4.5图片http://imgur.com/NlY786x后，

更新2： ＆安培;我忘了提到这只发生在我整合内部灯箱（facebox）

时

更新3： @Oleg我刚认识到更新到4.4.5之后或只是粘贴你的代码（内部评论）  我不能再使用我的自定义按钮了（工作b4）..没有任何事情发生。

我正在使用javascript＆amp;一个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 -------------------------------------->

PHP 

<?php 
 ini_set("display_errors","1"); 
require_once('../../Connections/jq-config.php');

// include the jqGrid Class 
require_once  "../../phpgrid/php/jqGrid.php";
// include the driver class
require_once "../../phpgrid/php/jqGridPdo.php";
// Connection to the server 
$conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD); 
 // Tell the db that we use utf-8 
$conn->query("SET NAMES utf8"); 

// Create the jqGrid instance 
$grid = new jqGridRender($conn); 
$grid->SelectCommand = 'SELECT int_bankid, txt_bank_code , txt_bank_name, txt_bank_address FROM tbl_bank'; 

// set the ouput format to json 
$grid->dataType = 'json'; 
$grid->table ="tbl_bank"; 
$grid->setPrimaryKeyId("int_bankid"); 

$grid->setColModel(); 
$grid->setUrl('form/housekeeping/bank_grid.php'); 
$grid->setGridOptions(array("editurl"=>"form/housekeeping/bank.php?mode=edit"));


// Set grid option
$grid->setGridOptions(array( 
    "caption"=>"&nbsp; List of Banks", 
    "rownumbers"=>true,
    "rowNum"=>10, 
    "rowList"=>array(10,20,50), 
    "sortname"=>"txt_bank_code", 
    "hoverrows"=>true,
    "hidegrid"=>false, 
    "height"=>'auto', 
    "width"=>460, 
        "sortorder"=>'desc', 
    "loadtext" => "meloading data...",
    "cmTemplate"=>array("searchoptions"=>array("sopt"=>array('eq','ne','lt','le','gt','ge','bw','bn','in','ni','ew','en','cn','nc')))
    )); 

// Change some property of the field(s) 
$grid->setColProperty("int_bankid", array("label"=>"ID", "width"=>50, "align"=>"center", "hidden"=>true)); 
$grid->setColProperty("txt_bank_code", array("label"=>"Code", "width"=>60, "align"=>"center", "editrules"=>array("required"=>true))); 
$grid->setColProperty("txt_bank_name", array("label"=>"Name", "width"=>130, "align"=>"center", "editrules"=>array("required"=>true))); 
$grid->setColProperty("txt_bank_address", array("label"=>"Address", "width"=>200, "align"=>"center")); 

// enable navbutton 
$grid->navigator = true; 

    $grid->setNavOptions('navigator', array("pdf"=>false,"excel"=>false,"add"=>false,"edit"=>false,"del"=>true,"view"=>false )); 
    $grid->setNavOptions('del',array("url"=>"form/housekeeping/bank.php?mode=delete")); 

// jscript for adding new row       
 $reloading = <<<RELOAD
 function(id)
  {
     jQuery("#grid").trigger('reloadGrid');
  }
RELOAD;

 $mycode = <<<NEWBUTTON
 function(id)
  {
    jQuery("#grid").jqGrid('restoreRow',lastSel);
    jQuery("#grid").jqGrid('addRowData',"0",{txt_bank_code:''},"first");
    jQuery("#grid").jqGrid('editRow', "0", true,'',$reloading); 
    lastSel=id;
  }
NEWBUTTON;

//jscript for inline editing    
$editrow = <<<DOUBLECLICK
  function(rowid)
  {
      if (rowid && rowid !== lastSel) {
          jQuery("#grid").jqGrid('restoreRow', lastSel); 
          lastSel = rowid; 
      } 
         jQuery("#grid").jqGrid('editRow', rowid, true,'',$reloading); 
  }
DOUBLECLICK;

//custom button setting for adding new row
$buttonoptions = array("#pager", array("caption"=>"", 'buttonicon' =>'ui-icon-circle-plus', "onClickButton"=> "js:".$mycode));

// inserting custom button
$grid->setGridEvent('ondblClickRow', $editrow);
$grid->callGridMethod("#grid", "navButtonAdd", $buttonoptions);
$grid->renderGrid('#grid','#pager',true, null, null, true,true); 
$conn = null; 


?>

4 个答案:

答案 0 :(得分：1)

我有同样的问题，并且能够通过调整CSS来修复它。我在导致此问题的padding上设置了th。

您的th可能会继承padding，这会弄乱路线。

如果th上的填充不同于网格单元格（尤其是padding-left和right），则会破坏对齐。

答案 1 :(得分：0)

尝试将属性shrinkToFit设置为true; 

shrinkToFit : true,

如wiki

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

答案 2 :(得分：0)

将此代码添加到网格的gridComplete事件中。不要忘记将gridName替换为您的网格id：

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);
}

适用于v.4.6.0。

答案 3 :(得分：0)

我的案子

  1. jqgrid版本4.6.0

  2. 网格中的组标题

  3. shrinkTofit无效

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

    function alignColumnsWithHeadersGENEL（gridName）{

     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;
 }

    }

  5. 为我的网格生成的HTML的结构类似于以下内容（删除不必要的填充）

  6. 标题和列的宽度之间存在某种差异

相关问题
最新问题