jqGrid 的使用笔记：1. 开始

jqGrid快速入门与应用

最新推荐文章于 2021-02-26 06:46:27 发布

原创最新推荐文章于 2021-02-26 06:46:27 发布 · 198 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Ajax #JavaScript #UI #ViewUI

HTML5 同时被 3 个专栏收录

6 篇文章

订阅专栏

jquery

5 篇文章

订阅专栏

jqGrid

5 篇文章

订阅专栏

本文将引导您完成jqGrid的下载、配置、理解和使用流程，包括引用文件、基本工作原理、首个试验以及数据类型应用。

[b]来源[/b]
[table]
|官方下载地址|[url]http://www.trirand.com/blog/?page_id=6[/url]|
|文档地址|[url]http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs[/url]|
|DEMO地址|[url]http://trirand.com/blog/jqgrid/jqgrid.html[/url]|
[/table]

[b]我的文件目录：[/b]
[list]
[*]root: jqGrid （说明：以下目录是下载的ZIP文件解压后形成的目录）
[*] jqGrid / css
[*] jqGrid / js
[*] jqGrid / plugins
[*] jqGrid / src
[*] jqGrid / demo （新创建目录，我的例子在这个目录）
[/list]

[b]第一步：添加必要的引用文件[/b]
文件名 index.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="../css/ui-lightness/jquery-ui-1.10.2.custom.css"  />
<link rel="stylesheet" type="text/css" media="screen" href="../css/ui.jqgrid.css" />

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

<script src="../js/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="../js/i18n/grid.locale-en.js" type="text/javascript"></script>
// 此处使用的是压缩版， 如果要使用开发版，则是： jquery.jqGrid.src.js
<script src="../js/jquery.jqGrid.min.js" type="text/javascript"></script>

</head>
<body>
...
</body>
</html>

备注：
jquery-ui-1.7.1.custom.css需要下载，从以下地址选择所需要的主题：
[url]http://jqueryui.com/themeroller/#themeGallery[/url]

[b]第二步：理解它的基本工作原理[/b]
[list]
[*]基本工作原理：客户端展示，服务端操作。使用Ajax技术传递在客户端和服务端传递数据，在客户端形成列模型（colModel），并通过服务端操作（SSM, server-side manipulation) 对数据库进行实际操作。
[*]由4个层面构成：标题栏（Caption layer），表头（Header layer），表身（Body layer），导航栏（Navigation layer）
[/list]

[b]第三步：首个试验[/b]
请参照附件，我使用的是LOCAL的数据形式（dataType）。

[b]第四步：如果dataType是xml[/b]
1. 格式：


<?xml version ="1.0" encoding="utf-8"?>
<rows>
  <page> </page>
  <total> </total>
  <records> </records>
    <row id = 'unique_rowid'>
      <cell> cellcontent </cell>
      <cell> <![CDATA[<font color='red'>cell</font> content]]> </cell>
        …
    </row>
    <row id = 'unique_rowid'>
      <cell> cellcontent </cell>
      <cell> <![CDATA[<font color='red'>cell</font> content]]> </cell>
        …
    </row>
      …
</rows>

2. 例子：


// 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>";