jqGrid 的使用笔记：1. 开始
来源
<!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需要下载，从以下地址选择所需要的主题：
http://jqueryui.com/themeroller/#themeGallery
第二步：理解它的基本工作原理
基本工作原理：客户端展示，服务端操作。使用Ajax技术传递在客户端和服务端传递数据，在客户端形成列模型（colModel）， 并通过服务端操作（SSM, server-side manipulation) 对数据库进行实际操作。 由4个层面构成： 标题栏（Caption layer）， 表头（Header layer），表身（Body layer），导航栏（Navigation layer）
第三步：首个试验
请参照附件， 我使用的是LOCAL的数据形式（dataType）。
第四步：如果dataType是xml
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>
// 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 CDATAwhile($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>";