2
希望有人可以指向我正確的方向..JQGrid - 標題和列不對齊
我很有時面臨這個問題。
我嘗試一些我從計算器
如發現解決方案jqGrid column not aligned with column headers
&其他來源，但沒有解決我的問題。這個問題只發生在升級到Chrome 19或更高版本（我認爲！）和safari 6之後。我注意到在我的第二臺使用Safari 5的計算機上以及重新安裝Chrome版本18時沒有問題。
我試試通過從trirand.net下載更新一些js和css文件，但沒有解決方案。
目前我正在運行Safari V6.0.1（8536.26.14）和Chrome版本26.0.1410.43。
感謝
更新2：更新到4.4.5圖像http://imgur.com/NlY786x &後，我忘了提及這隻有當我整合內部燈箱（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: ' 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"=>" 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;
?>
不是每個jqGrid都有你描述的問題。 Screenshort可以理解你的問題，但它無法幫助找到問題的原因。您應該修改問題的文本，幷包含可用於重現問題的JavaScript代碼。如果您有一些在線演示，那麼發佈相應的URL會很好。在演示中使用'jquery.jqGrid.src.js'而不是'jquery.jqGrid.min.js'來調試問題很重要。 – Oleg
我更新了jquery.jqGrid.min.js ...並且問題是最小化..但不完全解決... FYI @Oleg，我在2011年購買了php套件，並且我沒有續訂我的訂閱，是否可以我只是更新文件，例如新的一個JS？現在，我試圖編譯我到目前爲止在一個新的文件夾中分享到這裏..我希望我可以讓你進入系統，但有很多東西在那裏，我不允許這樣做..將更新。 .. – aznan
你的意思是jqSuite？我自己並沒有使用它，所以我不知道你可以在當前版本的jqGrid上升級它。我只是嘗試將'jquery.jqGrid.src.js'和'jquery.jqGrid.min.js'升級到版本4.4.5。如果它不會幫助你修改'jquery.jqGrid.src.js'就像我描述的[這裏]（http://stackoverflow.com/a/10621951/315935）並生成新的'jquery.jqGrid.min.js'使用[Microsoft Ajax Minifier]（http://ajaxmin.codeplex.com/）。 – Oleg