Javascript 如何让jqGrid演示正常工作？

我对jQuery和JavaScript没有任何经验。我必须使用jqGrid，但是我没有运行任何演示

我的结构如下：

.
├── css
│   ├── ui.jqgrid.css
│   └── ui-lightness
│       ├── images
│       │   ├── animated-overlay.gif
│       │   ├── ui-bg_diagonals-thick_18_b81900_40x40.png
│       │   ├── ui-bg_diagonals-thick_20_666666_40x40.png
│       │   ├── ui-bg_flat_10_000000_40x100.png
│       │   ├── ui-bg_glass_100_f6f6f6_1x400.png
│       │   ├── ui-bg_glass_100_fdf5ce_1x400.png
│       │   ├── ui-bg_glass_65_ffffff_1x400.png
│       │   ├── ui-bg_gloss-wave_35_f6a828_500x100.png
│       │   ├── ui-bg_highlight-soft_100_eeeeee_1x100.png
│       │   ├── ui-bg_highlight-soft_75_ffe45c_1x100.png
│       │   ├── ui-icons_222222_256x240.png
│       │   ├── ui-icons_228ef1_256x240.png
│       │   ├── ui-icons_ef8c08_256x240.png
│       │   ├── ui-icons_ffd27a_256x240.png
│       │   └── ui-icons_ffffff_256x240.png
│       ├── jquery-ui-1.10.4.css
│       └── jquery-ui-1.10.4.min.css
├── dbconfig.php
├── example.html
├── example.php
├── js
│   ├── Changes.txt
│   ├── i18n
│   │   ├── grid.locale-ar.js
│   │   ├── grid.locale-bg1251.js
│   │   ├── grid.locale-bg.js
│   │   ├── grid.locale-cat.js
│   │   ├── grid.locale-cn.js
│   │   ├── grid.locale-cs.js
│   │   ├── grid.locale-da.js
│   │   ├── grid.locale-de.js
│   │   ├── grid.locale-dk.js
│   │   ├── grid.locale-el.js
│   │   ├── grid.locale-en.js
│   │   ├── grid.locale-es.js
│   │   ├── grid.locale-fa.js
│   │   ├── grid.locale-fi.js
│   │   ├── grid.locale-fr.js
│   │   ├── grid.locale-gl.js
│   │   ├── grid.locale-he.js
│   │   ├── grid.locale-hr1250.js
│   │   ├── grid.locale-hr.js
│   │   ├── grid.locale-hu.js
│   │   ├── grid.locale-id.js
│   │   ├── grid.locale-is.js
│   │   ├── grid.locale-it.js
│   │   ├── grid.locale-ja.js
│   │   ├── grid.locale-kr.js
│   │   ├── grid.locale-lt.js
│   │   ├── grid.locale-mne.js
│   │   ├── grid.locale-nl.js
│   │   ├── grid.locale-no.js
│   │   ├── grid.locale-pl.js
│   │   ├── grid.locale-pt-br.js
│   │   ├── grid.locale-pt.js
│   │   ├── grid.locale-ro.js
│   │   ├── grid.locale-ru.js
│   │   ├── grid.locale-sk.js
│   │   ├── grid.locale-sr.js
│   │   ├── grid.locale-sr-latin.js
│   │   ├── grid.locale-sv.js
│   │   ├── grid.locale-th.js
│   │   ├── grid.locale-tr.js
│   │   ├── grid.locale-tw.js
│   │   ├── grid.locale-ua.js
│   │   └── grid.locale-vi.js
│   ├── install.txt
│   ├── jquery-1.11.0.min.js
│   ├── jquery.jqGrid.min.js
│   └── jquery.jqGrid.src.js
├── plugins
│   ├── grid.addons.js
│   ├── grid.postext.js
│   ├── grid.setcolumns.js
│   ├── jquery.contextmenu.js
│   ├── jquery.searchFilter.js
│   ├── jquery.tablednd.js
│   ├── searchFilter.css
│   ├── ui.multiselect.css
│   └── ui.multiselect.js
├── src
│   ├── css
│   │   ├── ui.jqgrid.css
│   │   └── ui.multiselect.css
│   ├── grid.base.js
│   ├── grid.celledit.js
│   ├── grid.common.js
│   ├── grid.custom.js
│   ├── grid.filter.js
│   ├── grid.formedit.js
│   ├── grid.grouping.js
│   ├── grid.import.js
│   ├── grid.inlinedit.js
│   ├── grid.jqueryui.js
│   ├── grid.loader.js
│   ├── grid.pivot.js
│   ├── grid.subgrid.js
│   ├── grid.tbltogrid.js
│   ├── grid.treegrid.js
│   ├── i18n
│   │   ├── grid.locale-ar.js
│   │   ├── grid.locale-bg1251.js
│   │   ├── grid.locale-bg.js
│   │   ├── grid.locale-cat.js
│   │   ├── grid.locale-cn.js
│   │   ├── grid.locale-cs.js
│   │   ├── grid.locale-da.js
│   │   ├── grid.locale-de.js
│   │   ├── grid.locale-dk.js
│   │   ├── grid.locale-el.js
│   │   ├── grid.locale-en.js
│   │   ├── grid.locale-es.js
│   │   ├── grid.locale-fa.js
│   │   ├── grid.locale-fi.js
│   │   ├── grid.locale-fr.js
│   │   ├── grid.locale-gl.js
│   │   ├── grid.locale-he.js
│   │   ├── grid.locale-hr1250.js
│   │   ├── grid.locale-hr.js
│   │   ├── grid.locale-hu.js
│   │   ├── grid.locale-id.js
│   │   ├── grid.locale-is.js
│   │   ├── grid.locale-it.js
│   │   ├── grid.locale-ja.js
│   │   ├── grid.locale-kr.js
│   │   ├── grid.locale-lt.js
│   │   ├── grid.locale-mne.js
│   │   ├── grid.locale-nl.js
│   │   ├── grid.locale-no.js
│   │   ├── grid.locale-pl.js
│   │   ├── grid.locale-pt-br.js
│   │   ├── grid.locale-pt.js
│   │   ├── grid.locale-ro.js
│   │   ├── grid.locale-ru.js
│   │   ├── grid.locale-sk.js
│   │   ├── grid.locale-sr.js
│   │   ├── grid.locale-sr-latin.js
│   │   ├── grid.locale-sv.js
│   │   ├── grid.locale-th.js
│   │   ├── grid.locale-tr.js
│   │   ├── grid.locale-tw.js
│   │   ├── grid.locale-ua.js
│   │   └── grid.locale-vi.js
│   ├── jqDnR.js
│   ├── jqModal.js
│   ├── jquery.fmatter.js
│   ├── jquery.jqGrid.js
│   └── JsonXml.js
└── themes
    ├── basic
    │   ├── grid.css
    │   └── images
    │       ├── cd_run.gif
    │       ├── dirty.gif
    │       ├── down.gif
    │       ├── find.gif
    │       ├── first.gif
    │       ├── folder.png
    │       ├── grid-blue-ft.gif
    │       ├── grid-blue-hd.gif
    │       ├── headerbg.gif
    │       ├── headerleft.gif
    │       ├── headerright.gif
    │       ├── ico-close.gif
    │       ├── last.gif
    │       ├── line3.gif
    │       ├── minus.gif
    │       ├── next.gif
    │       ├── nochild.gif
    │       ├── off-first.gif
    │       ├── off-last.gif
    │       ├── off-next.gif
    │       ├── off-prev.gif
    │       ├── plus.gif
    │       ├── prev.gif
    │       ├── refresh.gif
    │       ├── resize.gif
    │       ├── row_add.gif
    │       ├── row_delete.gif
    │       ├── row_edit.gif
    │       ├── sort_asc.gif
    │       ├── sort_desc.gif
    │       ├── spacer.gif
    │       ├── tab_close-on.gif
    │       ├── tree_leaf.gif
    │       ├── tree_minus.gif
    │       ├── tree_plus.gif
    │       └── up.gif
    ├── coffee
    │   ├── grid.css
    │   └── images
    │       ├── cd_run.gif
    │       ├── dirty.gif
    │       ├── down.gif
    │       ├── find.gif
    │       ├── first.gif
    │       ├── folder.png
    │       ├── grid-blue-ft.gif
    │       ├── grid-blue-hd.gif
    │       ├── headerbg.gif
    │       ├── headerleft.gif
    │       ├── headerright.gif
    │       ├── ico-close.gif
    │       ├── last.gif
    │       ├── line3.gif
    │       ├── minus.gif
    │       ├── next.gif
    │       ├── nochild.gif
    │       ├── off-first.gif
    │       ├── off-last.gif
    │       ├── off-next.gif
    │       ├── off-prev.gif
    │       ├── plus.gif
    │       ├── prev.gif
    │       ├── refresh.gif
    │       ├── resize.gif
    │       ├── row_add.gif
    │       ├── row_delete.gif
    │       ├── row_edit.gif
    │       ├── sort_asc.gif
    │       ├── sort_desc.gif
    │       ├── spacer.gif
    │       ├── tab_close-on.gif
    │       ├── tree_leaf.gif
    │       ├── tree_minus.gif
    │       ├── tree_plus.gif
    │       └── up.gif
    ├── green
    │   ├── grid.css
    │   └── images
    │       ├── cd_run.gif
    │       ├── cross-disabled.png
    │       ├── cross.png
    │       ├── dirty.gif
    │       ├── down.gif
    │       ├── find.gif
    │       ├── first.gif
    │       ├── folder.png
    │       ├── grid-blue-ft.gif
    │       ├── grid-blue-hd.gif
    │       ├── headerbg.gif
    │       ├── headerleft.gif
    │       ├── headerright.gif
    │       ├── ico-close.gif
    │       ├── last.gif
    │       ├── leaf.gif
    │       ├── line3.gif
    │       ├── mail_arrow-disabled.png
    │       ├── mail_arrow.png
    │       ├── minus.gif
    │       ├── next.gif
    │       ├── nochild.gif
    │       ├── off-first.gif
    │       ├── off-last.gif
    │       ├── off-next.gif
    │       ├── off-prev.gif
    │       ├── plus-disabled.png
    │       ├── plus.gif
    │       ├── plus.png
    │       ├── prev.gif
    │       ├── refresh.gif
    │       ├── resize.gif
    │       ├── row_add.gif
    │       ├── row_delete.gif
    │       ├── row_edit.gif
    │       ├── search.png
    │       ├── sort_asc.gif
    │       ├── sort_desc.gif
    │       ├── spacer.gif
    │       ├── tab_close-on.gif
    │       ├── tree_leaf.gif
    │       ├── tree_minus.gif
    │       ├── tree_plus.gif
    │       └── up.gif
    ├── jqModal.css
    └── sand
        ├── grid.css
        └── images
            ├── cd_run.gif
            ├── dirty.gif
            ├── down.gif
            ├── find.gif
            ├── first.gif
            ├── folder.png
            ├── grid-blue-ft.gif
            ├── grid-blue-hd.gif
            ├── headerbg.gif
            ├── headerleft.gif
            ├── headerright.gif
            ├── ico-close.gif
            ├── last.gif
            ├── line3.gif
            ├── minus.gif
            ├── next.gif
            ├── nochild.gif
            ├── off-first.gif
            ├── off-last.gif
            ├── off-next.gif
            ├── off-prev.gif
            ├── plus.gif
            ├── prev.gif
            ├── refresh.gif
            ├── resize.gif
            ├── row_add.gif
            ├── row_delete.gif
            ├── row_edit.gif
            ├── sort_asc.gif
            ├── sort_desc.gif
            ├── spacer.gif
            ├── tab_close-on.gif
            ├── tree_leaf.gif
            ├── tree_minus.gif
            ├── tree_plus.gif
            └── up.gif

我的example.html有以下内容

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jqGrid Demos</title>

<!-- In head section we should include the style sheet for the grid -->
<link rel="stylesheet" type="text/css" media="screen" href="themes/sand/grid.css" />

<!-- Of course we should load the jquery library -->
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>

<!-- and at end the jqGrid Java Script file -->
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>

<script type="text/javascript">
// We use a document ready jquery function.
jQuery(document).ready(function(){
  jQuery("#list2").jqGrid({
    // the url parameter tells from where to get the data from server
    // adding ?nd='+new Date().getTime() prevent IE caching
    url:'example.php?nd='+new Date().getTime(),
                          // datatype parameter defines the format of data returned from the server
                          // in this case we use a JSON data
                          datatype: "json",
                          // colNames parameter is a array in which we describe the names
                          // in the columns. This is the text that apper in the head of the grid.
                          colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
                          // colModel array describes the model of the column.
                          // name is the name of the column,
                          // index is the name passed to the server to sort data
                          // note that we can pass here nubers too.
                          // width is the width of the column
                          // align is the align of the column (default is left)
                          // sortable defines if this column can be sorted (default true)
                          colModel:[
                          {name:'id',index:'id', width:55},
                          {name:'invdate',index:'invdate', width:90},
                          {name:'name',index:'name asc, invdate', width:100},
                          {name:'amount',index:'amount', width:80, align:"right"},
                          {name:'tax',index:'tax', width:80, align:"right"},    
                          {name:'total',index:'total', width:80,align:"right"},   
                          {name:'note',index:'note', width:150, sortable:false}   
                          ],
                          // pager parameter define that we want to use a pager bar
                          // in this case this must be a valid html element.
                          // note that the pager can have a position where you want
                          pager: jQuery('#pager2'),
                          // rowNum parameter describes how many records we want to
                          // view in the grid. We use this in example.php to return
                          // the needed data.
                          rowNum:10,
                          // rowList parameter construct a select box element in the pager
                          //in wich we can change the number of the visible rows
                          rowList:[10,20,30],
                          // sortname sets the initial sorting column. Can be a name or number.
                          // this parameter is added to the url
                          sortname: 'id',
                          //viewrecords defines the view the total records from the query in the pager
                          //bar. The related tag is: records in xml or json definitions.
                          viewrecords: true,
                          //sets the sorting order. Default is asc. This parameter is added to the url
                          sortorder: "desc",
                          caption: "Demo",
  });
});
</script>
</head>
<body>
<!-- the grid definition in html is a table tag with class 'scroll' -->
<table id="list2"></table>

<!-- pager definition. class scroll tels that we want to use the same theme as grid -->
<div id="pager2"></div>
</body>
</html>

<?php 
//include the information needed for the connection to MySQL data base server. 
// we store here username, database and password 
include("dbconfig.php");

// to the url parameter are added 4 parameters as described in colModel
// we should get these parameters to construct the needed query
// Since we specify in the options of the grid that we will use a GET method 
// we should use the appropriate command to obtain the parameters. 
// In our case this is $_GET. If we specify that we want to use post 
// we should use $_POST. Maybe the better way is to use $_REQUEST, which
// contain both the GET and POST variables. For more information refer to php documentation.
// Get the requested page. By default grid sets this to 1. 
$page = $_GET['page']; 

// get how many rows we want to have into the grid - rowNum parameter in the grid 
$limit = $_GET['rows']; 

// get index row - i.e. user click to sort. At first time sortname parameter -
// after that the index from colModel 
$sidx = $_GET['sidx']; 

// sorting order - at first time sortorder 
$sord = $_GET['sord']; 

// if we not pass at first time index use the first column for the index or what you want
if(!$sidx) $sidx =1; 

// connect to the MySQL database server 
$db = mysql_connect($dbhost, $dbuser, $dbpassword) or die("Connection Error: " . mysql_error()); 

// select the database 
mysql_select_db($database) or die("Error connecting to db."); 

// calculate the number of rows for the query. We need this for paging the result 
$result = mysql_query("SELECT COUNT(*) AS count FROM invheader"); 
$row = mysql_fetch_array($result,MYSQL_ASSOC); 
$count = $row['count']; 

// calculate the total pages for the query 
if( $count > 0 && $limit > 0) { 
  $total_pages = ceil($count/$limit); 
} else { 
  $total_pages = 0; 
} 

// if for some reasons the requested page is greater than the total 
// set the requested page to total page 
if ($page > $total_pages) $page=$total_pages;

// calculate the starting position of the rows 
$start = $limit*$page - $limit;

// if for some reasons start position is negative set it to 0 
// typical case is that the user type 0 for the requested page 
if($start <0) $start = 0; 

// the actual query for the grid data 
$SQL = "SELECT invid, invdate, amount, tax,total, note FROM invheader ORDER BY $sidx $sord LIMIT $start , $limit"; 
$result = mysql_query( $SQL ) or die("Couldn't execute query.".mysql_error()); 

// we should set the appropriate header information. Do not forget this.
header("Content-type: text/xml;charset=utf-8");

$s  = "<?xml version='1.0' encoding='utf-8'?>";
$s .=  "<rows>";
$s .= "<page>".$page."</page>";
$s .= "<total>".$total_pages."</total>";
$s .= "<records>".$count."</records>";

// be sure to put text data in CDATA
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
  $s .= "<row id='". $row['invid']."'>";            
  $s .= "<cell>". $row['invid']."</cell>";
  $s .= "<cell>". $row['invdate']."</cell>";
  $s .= "<cell>". $row['amount']."</cell>";
  $s .= "<cell>". $row['tax']."</cell>";
  $s .= "<cell>". $row['total']."</cell>";
  $s .= "<cell><![CDATA[". $row['note']."]]></cell>";
  $s .= "</row>";
}
$s .= "</rows>"; 

echo $s;
?>

在Firefox上，它只是说格式不好，并突出显示了我的example.php的第66行，即：

$s .=  "<rows>";

$s.=”；

到目前为止，我不知道出了什么问题。我已经安装了PHP5.5.13。我用过PHP，但我打赌那部分没问题

---

我错过什么了吗？我只想让这个例子运行起来，这样我就可以开始玩弄它了。

PHP脚本只有在通过Web服务器访问时才会运行，您不能使用

file:

URL作为本地文件访问它们。为什么您的请求是在一个文件上file:///home/diego/Dropbox...')? 你不是应该运行一个Web服务器（远程还是本地）？你说“Firefox只是说格式不好，突出显示了我的示例.php的第66行”，然后你显示了一行php。Firfox应该无法看到php。如果导航到php文件，是否可以发布输出。我认为您需要将所有这些都放在web服务器上，以便它能够处理php。您的php控制台包含一个简单的web服务器，因此如果您遇到问题，请尝试使用

php--help

，了解如何使用它。Apache更好，但这可能更容易。的可能副本

$s .=  "<rows>";