来源
我的文件目录：
- root: jqGrid （说明：以下目录是下载的ZIP文件解压后形成的目录）
- jqGrid / css
- jqGrid / js
- jqGrid / plugins
- jqGrid / src
- jqGrid / demo （新创建目录，我的例子在这个目录）
第一步：添加必要的引用文件
文件名 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需要下载，从以下地址选择所需要的主题：
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>
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>";
分享到：
相关推荐
博客专用: Jqgrid学习笔记__01__初来乍到 很多时候在网上下载一段代码，结果引用的CSS和JS文件不知道从哪里弄，结果上网下载，不是版本不对，就是完全不对。这里的JS是有对应的代码段的。请参考博客 ====> Jqgrid...
在 jqGrid 中，我们可以使用一系列方法来实现对表格数据的编辑操作。以下是关于 jqGrid 行编辑方法的详细说明： 1. **editRow**: 此方法用于将指定行切换到编辑模式。调用格式为 `editRow(rowid, keys, oneditfunc,...
1. 数据展示：jqGrid能够以表格的形式展示数据，支持多种数据源，如JSON、XML、CSV等。通过配置列模型（colModel），可以定义列的标题、宽度、对齐方式、是否可排序等属性。 2. 数据操作：提供排序、筛选、分页、...
1. **安装jqGrid**： 安装 jqGrid 非常简单，只需要将相关的 CSS 和 JavaScript 文件包含在你的 HTML 页面中。例如，你需要包含 `ui.jqgrid.css` 以应用样式，`jquery-ui-1.7.2.custom.css` 用于 jQuery UI 主题，...
这个学习笔记主要围绕“jqGrid学习笔记1”展开，内容来源于jqGrid的英文PDF文档，结合了源码解析和实用工具的介绍。 首先，jqGrid支持多种数据源，包括JSON、XML、HTML、CSV等，这使得它能灵活地与各种后端服务进行...
1. **初始化表格**：首先，你需要在HTML中定义一个表格元素，并在JavaScript中使用jqGrid的`$("#gridID").jqGrid()`方法来初始化这个表格。在这里，`gridID`是表格的ID，需要与HTML中的id属性匹配。 2. **配置参数*...
JqGrid的基础，我这里就不做介绍了，不知道的可以去看看博客园或Google，最好去看文档。先看效果图： 本Demo可以查询、修改、分组。新增、删除等一些基本功能都可以去JqGrid Demo中找到。 逻辑思路：第一次加载本...
博客专用: Jqgrid学习笔记__01__初来乍到 很多时候在网上下载一段代码，结果引用的CSS和JS文件不知道从哪里弄，结果上网下载，不是版本不对，就是完全不对。这里的CSS是有对应的代码段的。请参考博客 ====> Jqgrid...
在这个"jqgrid4.6.zip"压缩包中，包含了使用jqGrid 4.6版本的一些关键资源和教程，帮助用户快速理解和掌握这个版本的使用方法。 首先，"index.html"是主入口文件，解压后直接运行此文件，你将看到一个jqGrid的示例...
本篇学习笔记将详细介绍如何使用jqGrid实现分页和搜索功能。 首先，要使用jqGrid，你需要在HTML页面中引入必要的CSS和JavaScript文件。这些文件包括jqGrid的样式表`ui.jqgrid.css`，jQuery库`jquery-2.0.3.min.js`...
本篇文章将深入探讨 jqGrid 的进阶使用，特别关注如何在浏览导航栏添加自定义按钮。 首先，jqGrid 的基本结构包括一个表格元素（`<table>`）和一个用于分页的容器（`<div>`）。在提供的代码中，我们可以看到这样的...
在本篇Java中jqGrid的学习笔记整理中，我们将聚焦于jqGrid与后台Java服务的数据交互。jqGrid是一款强大的JavaScript库，用于创建动态、交互式的表格，而这里的进阶篇(二)将涉及到如何通过Java后端来提供数据支持。 ...
3. **jqgrid学习笔记网搜和个人经验1.pdf**：作者通过网络搜集和自己的实践，整理出的学习笔记，包含了常见问题解决方案和实践经验分享，对于初学者极具参考价值。 **总结** jgGrid作为一个强大的JavaScript表格...
博客专用: Jqgrid学习笔记__01__初来乍到 很多时候在网上下载一段代码，结果引用的CSS和JS文件不知道从哪里弄，结果上网下载，不是版本不对，就是完全不对。这里的JS是有对应的代码段的。请参考博客 ====> Jqgrid...
博客专用: Jqgrid学习笔记__01__初来乍到 很多时候在网上下载一段代码，结果引用的CSS和JS文件不知道从哪里弄，结果上网下载，不是版本不对，就是完全不对。这里的CSS是有对应的代码段的。请参考博客 ====> Jqgrid...