2011-06-07 69 views
0

我已經按照這個例子創建了一個新的jqGrid。數據加載並顯示正常。行數工作正常。唯一的問題是,只是在普通的網格框中顯示數據(如下圖)。沒有圖層。即使排序按鈕不顯示/工作。即使鏈接指向正確的文件夾,也沒有CSS效果。jqGrid - 只顯示網格形式的數據

col1 | col2 | col3 
-------------------------- 
data1a | data1b | data1c 
-------------------------- 
data2a | data2b | data2c 

下面是HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>My First Grid</title> 
<link rel="stylesheet" type="text/css" media="screen" href="../theme/css/ui.jqgrid.css" /> 

<style> 
html, body { 
    margin: 0; 
    padding: 0; 
    font-size: 50%; 
} 
</style> 

<script src="../theme/js/jquery-1.6.1.js" type="text/javascript"></script> 
<script src="../theme/js/grid.locale-en.js" type="text/javascript"></script> 
<script src="../theme/js/src/grid.loader.js" type="text/javascript"></script> 
<script src="../theme/js/jquery.jqGrid.src.js" type="text/javascript"></script> 
<script src=「../theme/js/src/jqDnR.js」 type=「text/javascript」></script> 
<script src=「../theme/js/src/jqModal.js」 type=「text/javascript」></script> 


<script type="text/javascript"> 
$(function(){ 
    $("#list").jqGrid({ 
    url:'JQ.php', 
    datatype: 'xml', 
    mtype: 'GET', 
    colNames:['UNIT ID','ROLE ID', 'CREATED DATE','CREATED BY','Inactive'], 
    colModel :[ 
     {name:'UNIT_ID', index:'UNIT_ID', width:55}, 
     {name:'ROLE_ID', index:'ROLE_ID', width:90}, 
     {name:'CREATED_DT', index:'CREATED_DT', width:100}, 
     {name:'CREATED_BY', index:'CREATED_BY', width:80}, 
     {name:'INACTIVE', index:'INACTIVE', width:80, sortable:false} 
    ], 
    pager: '#pager', 
    rowNum:10, 
    rowList:[10,20,30,50], 
    sortname: 'UNIT_ID', 
    sortorder: 'desc', 
    viewrecords: true, 
    gridview: true, 
    width: 500, 
    height: "100%", 
    caption: 'My first gridder' 
    }); 
}); 
</script> 
+0

我的第一gridder UNIT ID角色ID創建的日期創建者不活動 30100 TTT 11-JUN-02 UTECHGEÑ 30200 TTT 11-JUN-02 UTECHGEÑ 10000 TTT 11-JUN-02 UTECHGEÑ 30000 TTT 11 -JUN-02 UTECHGE N 10000 QA-ADMIN 20-MAY-11 UTECHGE N 20000 TEST-USER 20-MAY-11 UTECHGE N 20000 QA-ADMIN 20-MAY-11 UTECHGE N 20100 TEST-USER 20-MAY -11 UTECHGE N 20100 QA-ADMIN 20-MAY-11 UTECHGE N 20200測試用戶20-MAY-11 UTECHGE N 第4頁 – 2011-06-07 15:29:02

+0

爲什麼包含相同的JavaScript代碼MES?你使用了哪個'grid.loader.js'?裏面是什麼?爲什麼你插入'jqModal.js'和'jqDnR.js'?如果您使用jqGrid 4.0.0中的'jquery.jqGrid.src.js',則不需要包含'grid.loader.js','jqModal.js'和'jqDnR.js'。 – Oleg 2011-06-07 15:55:38

回答

0

你不包含網頁的一個非常重要 CSS文件:

<link rel="stylesheet" type="text/css" 
     href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/redmond/jquery-ui.css" /> 

而且包括你相同的JavaScript代碼很多次,這是錯誤的?您使用哪種grid.loader.js?裏面是什麼?你可以用任何文本編輯器打開它。爲什麼插入jqModal.jsjqDnR.js?如果您使用jqGrid 4.0.0中的jquery.jqGrid.src.js,則不需要包括grid.loader.js,jqModal.jsjqDnR.js。確切的包含jquery.jqGrid.src.js可以取決於您在下載jqGrid時選擇的模塊列表。您可以打開jquery.jqGrid.min.js並檢查文件開頭的註釋行。該文件的標準(完整)版本包含以下模塊:

Modules:grid.base.js; jquery.fmatter.js; grid.custom.js; grid.common.js; grid.formedit.js; grid.filter.js; grid.inlinedit.js; grid.celledit.js; jqModal.js; jqDnR.js; grid.subgrid.js; grid.grouping.js; grid.treegrid.js; grid.import.js; JsonXml.js; grid.tbltogrid.js; grid.jqueryui.js;

所以你不能再包含相同的模塊。

+0

謝謝...得到它的工作.. – 2011-06-13 14:55:35

+0

@gt:不客氣!主要問題是什麼?我可以幫您嗎? – Oleg 2011-06-13 14:59:23