2013-02-26 67 views
0

它是整個一天,我想有這個例子我的電腦上工作:jqGrid的複雜的演示工作不

http://trirand.com/blog/jqgrid/jqgrid.html

我不能去睡覺,直到我有這樣的成功合作,因此我迫切需要你幫忙!你有沒有使用jqgrid成功?

這是我的HTML文件中的代碼:

<table id="list2"> </table> 
<div id="pager2" > </div> 

下面是我的javascript部分代碼:

var theURL = 'matter_parties_model/<?php echo $matterID;?>'; 
alert('Donato'); 

$("#list2").jqGrid({ 
url:'server.php?q=2', 
datatype: "json", 
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], 
colModel:[ 
    {name:'id',index:'id', width:55}, 
    {name:'invdate',index:'invdate', width:90,editable:true}, 
    {name:'name',index:'name asc, invdate', width:100}, 
    {name:'amount',index:'amount', width:80, align:"right",editable:true,editrules:{number:true}}, 
    {name:'tax',index:'tax', width:80, align:"right",editable:true,editrules:{number:true}},   
    {name:'total',index:'total', width:80,align:"right"},  
    {name:'note',index:'note', width:150, sortable:false}  
], 
rowNum:10, 
rowList:[10,20,30], 
pager: '#pcelltbl', 
sortname: 'id', 
viewrecords: true, 
sortorder: "desc", 
caption:"Cell Edit Example", 
forceFit : true, 
cellEdit: true, 
cellsubmit: 'clientArray', 
afterEditCell: function (id,name,val,iRow,iCol){ 
    if(name=='invdate') { 
     jQuery("#"+iRow+"_invdate","#celltbl").datepicker({dateFormat:"yy-mm-dd"}); 
    } 
}, 
afterSaveCell : function(rowid,name,val,iRow,iCol) { 
    if(name == 'amount') { 
     var taxval = jQuery("#celltbl").jqGrid('getCell',rowid,iCol+1); 
     jQuery("#celltbl").jqGrid('setRowData',rowid,{total:parseFloat(val)+parseFloat(taxval)}); 
    } 
    if(name == 'tax') { 
     var amtval = jQuery("#celltbl").jqGrid('getCell',rowid,iCol-1); 
     jQuery("#celltbl").jqGrid('setRowData',rowid,{total:parseFloat(val)+parseFloat(amtval)}); 
    } 
}}); 

jQuery("#celltbl").jqGrid('navGrid','#pgwidth',{edit:false,add:false,del:false}); 

終於這是我的PHP代碼:

<?php 
include("../../connections/xxxxxxxx"); 
$page = $_GET['page']; // get the requested page 
$limit = $_GET['rows']; // get how many rows we want to have into the grid 
$sidx = $_GET['sidx']; // get index row - i.e. user click to sort 
$sord = $_GET['sord']; // get the direction 
if(!$sidx) $sidx =1; 
// connect to the database 
$db = mysql_connect($dbhost, $dbuser, $dbpassword) 
or die("Connection Error: " . mysql_error()); 

mysql_select_db("griddemo") or die("Error conecting to db."); 
$result = mysql_query("SELECT COUNT(*) AS count FROM invheader a, clients b WHERE   a.client_id=b.client_id"); 
$row = mysql_fetch_array($result,MYSQL_ASSOC); 
$count = $row['count']; 

if($count >0) { 
    $total_pages = ceil($count/$limit); 
} else { 
    $total_pages = 0; 
} 
if ($page > $total_pages) $page=$total_pages; 
$start = $limit*$page - $limit; // do not put $limit*($page - 1) 
$SQL = "SELECT a.id, a.invdate, b.name, a.amount,a.tax,a.total,a.note FROM invheader a,  clients b WHERE a.client_id=b.client_id ORDER BY $sidx $sord LIMIT $start , $limit"; 
$result = mysql_query($SQL) or die("Couldn t execute query.".mysql_error()); 
$responce = new stdClass(); 
$responce->page = $page; 
$responce->total = $total_pages; 
$responce->records = $count; 
$i=0; 
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) { 
    $responce->rows[$i]['id']=$row[id]; 
    $responce->rows[$i] ['cell']=array($row[id],$row[invdate],$row[name],$row[amount],$row[tax],$row[total],$row[not e]); 
    $i++; 
}   
echo json_encode($responce); 
?> 

現在網格顯示標題但不顯示可編輯的行。任何想法?我知道這是一個複雜的問題,我問你以前是否使用過這個例子?感謝您的幫助。

+0

您確定'Cell editing'模塊已啓用嗎?您是否使用jqGrid捆綁的演示包(http://www.trirand.com/blog/?page_id=6)以及您的'jquery.jqGrid.min.js'版本嘗試'celledit.html'? – tmuguet 2013-02-26 23:11:13

+0

親愛的tmuguet,是的,我嘗試過。這個例子甚至沒有顯示錶,當我嘗試從我的本地主機加載它! – user1536396 2013-02-26 23:48:35

+0

嗯,我並不感到驚訝,這不是我第一次看到jqGrid的演示神祕地不工作「開箱即用」。對不起,我無法幫助你,我從未使用過單元格編輯... – tmuguet 2013-02-26 23:59:42

回答

0

在你的代碼中,我看到很多問題。

  1. 將#celltbl的所有出現替換爲#list2,因爲您的表ID是list2。
  2. 出於同樣的原因,將所有#pgwidth & #pcelltbl替換爲#pager2。
  3. put error_reporting(E_ALL &〜E_NOTICE);在php處理,因爲代碼包含通知錯誤,將不會與JSON響應兼容

如果json輸出即將或未來,您也可以使用firebug> net> ajax響應進行調試。另外檢查jqgrid php包裝http://www.phpgrid.org作爲它非常方便使用。