成功完成第一个jqgrid-优快云博客

本文介绍了如何使用jqGrid插件展示门店信息。通过编写HTML、JavaScript和Java代码，实现了从数据库查询门店信息并将其展示在网页上的功能。具体包括设置表格列名、列属性、数据读取规则等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

研究jqgrid一段时间了，今天终于成功编写了第一个实例，费话不说，上图和上代码：

index.html：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index2.html</title>
<link rel="stylesheet" href="css/jquery-ui-1.10.1.custom.min.css"
	type="text/css"></link>
<link rel="stylesheet" href="css/ui.jqgrid.css" type="text/css"></link>
</head>

<body>
	<table id="jsontable"></table>
	<div id="pager"></div>
	<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="js/grid.locale-cn.js"></script>
	<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
</body>
</html>

jqgrid.js

$(function() {
			$("#jsontable").jqGrid({
				url : "store!query",
				datatype : "json",
				mtype: "post",
				colNames : [ "店铺号", "店铺名" ],

				colModel : [ {
					name : "storeCode",
					index : "storeCode",
					align: "center",
					width: 300
				}, {
					name : "name",
					index : "name",
					align : "center",
					width: 300
				} ],
				jsonReader : {
					root : "list",
					records: "records",
					repeatitems : false
				},
				viewrecords : true,
				caption : "门店信息",
				rowNum : 5,
				rowList : [ 5, 10, 20],
				pager : "#pager",
				width : 800,
				height : "auto",
				sortname: "storeCode"
			});
			 $("#jsontable").jqGrid("navGrid","#pager",{view :true}); 
		});

StoreBean.java:

package cac.ctl.bean;

public class StoreBean {
	private String storeCode;
	private String name;
	public String getStoreCode() {
		return storeCode;
	}
	public void setStoreCode(String storeCode) {
		this.storeCode = storeCode;
	}
	public String getname() {
		return name;
	}
	public void setname(String name) {
		this.name = name;
	}
}

StoreAction.java:

package cac.ctl.action;

import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.List;
import java.util.Vector;

import com.opensymphony.xwork2.ActionSupport;

import cac.ctl.bean.StoreBean;
import cac.ctl.dao.DBUtil;

public class StoreAction extends ActionSupport {

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	protected List<StoreBean> list = new Vector<StoreBean>();

	protected int page ;// 当前页数
	protected int records;// 总记录数
	protected int rows;// 每页显示的数目
	protected String sidx;// 排序字段
	protected String sord;// 排序方式
	protected int total;// 总页数

	public List<StoreBean> getList() {
		return list;
	}

	public int getRecords() {
		return records;
	}

	public int getTotal() {
		return total;
	}

	public int getPage() {
		return page;
	}

	public int getRows() {
		return rows;
	}

	public String getSidx() {
		return sidx;
	}

	public String getSord() {
		return sord;
	}

	public String query() {
		DBUtil db = new DBUtil();

		String sqlCount = "select count(*) from xf_store";
		ResultSet rsCount = db.query(sqlCount);

		try {
			if (rsCount.next()) {
				records = rsCount.getInt(1);
			}
		} catch (SQLException e) {
			e.printStackTrace();
		}
		total = (int) Math.ceil(records / rows);
		System.out.println("查询records和total成功：");
		System.out.println("records: " + records);
		System.out.println("total: " + total);

		if (page > 0 && page * rows <= records) {
			String sql = "select *\n"
					+ "  from (select sto1.*, rownum rn\n"
					+ "          from (select xf_storecode code, xf_name name from xf_store order by xf_"
					+ sidx + " " + sord + ") sto1\n"
					+ "         where rownum <= " + page * rows + ") sto2\n"
					+ " where sto2.rn > " + (page - 1) * rows;
			ResultSet rs = db.query(sql);
			try {
				while (rs.next()) {
					StoreBean sb = new StoreBean();
					sb.setStoreCode(rs.getString(1));
					sb.setname(rs.getString(2));
					list.add(sb);
				}
			} catch (SQLException e1) {
				e1.printStackTrace();
			}
		} else {
			System.out.println("page * rows = "  + page * rows + "超过最大 records " + records + " ！");
		}

		if (rsCount != null) {
			try {
				rsCount.close();
			} catch (SQLException e) {
				e.printStackTrace();
			}
			rsCount = null;
		}/*
		 * if (rs!= null) { try { rs.close(); } catch (SQLException e) {
		 * e.printStackTrace(); } rs = null; }
		 */

		return SUCCESS;
	}

	public void setList(List<StoreBean> list) {
		this.list = list;
	}

	public void setPage(int page) {
		this.page = page;
	}

	public void setRecords(int records) {
		this.records = records;
	}

	public void setRows(int rows) {
		this.rows = rows;
	}

	public void setSidx(String sidx) {
		this.sidx = sidx;
	}

	public void setSord(String sord) {
		this.sord = sord;
	}

	public void setTotal(int total) {
		this.total = total;
	}
}

转载于:https://my.oschina.net/H7QMCSeOLOxu/blog/113785