介绍
- Caption layer
- Header layer
- Body layer
-
Navigation layer
如图所示
下载
1.在Download Builder官方页面下载jqGrid，可以选择自己需要的组件下载，获得一个定制的版本。
2.在ThemeRoller官方页面下下载主题，获取jQuery UI主题文件。
使用
解压下载好的压缩包，在项目的根目录下建立相应的文件夹，将文件放入文件夹中，目录如图示：
如图所示
添加如下代码
实例
在数据库中建表，准备数据
建表
CREATE TABLE invheader (
invid int(11) NOT NULL AUTO_INCREMENT,
invdate date NOT NULL,
client_id int(11) NOT NULL,
amount decimal(10,2) NOT NULL DEFAULT '0.00',
tax decimal(10,2) NOT NULL DEFAULT '0.00',
total decimal(10,2) NOT NULL DEFAULT '0.00',
note char(100) DEFAULT NULL,
PRIMARY KEY (invid)
);
测试数据dataupload,xls文件转为csv导入数据库。
HTML文件
My First Grid
| Property | Description |
|---|---|
| url | 服务端地址 |
| datatppe | 返回的数据格式xml或者json |
| mtype | 请求方法GET或者POST |
| colNames | 表格中的列名 |
| colModel | 定义每列的属性 |
| pager | 表格的导航条 |
| rowNum | 行数 |
| rowList | 导航条的显示数据的条数 |
| sortname | 根据哪个字段进行排序 |
| viewrecords | 在导航条显示数据条数 |
| caption | 表格名称 |
PHP文件
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 = "";
$s .= "";
$s .= "".$page." ";
$s .= "".$total_pages." ";
$s .= "".$count." ";
// be sure to put text data in CDATA
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
$s .= "";
$s .= "| ". $row['invid']." | ";
$s .= "". $row['invdate']." | ";
$s .= "". $row['amount']." | ";
$s .= "". $row['tax']." | ";
$s .= "". $row['total']." | ";
$s .= " | ";
$s .= "
";
}
$s .= " ";
echo $s;
?>
效果如图
My First Grid
友情提示：关闭php的display errors选项，否则会因为数据库的问题报错。