jqGrid 学习笔记整理——终极篇（一）
本篇开始实现利用jqGrid框架实现 主从表 的显示效果及与后台交互的实例，使用的平台和上篇博文[jqGrid 学习笔记整理——进阶篇（二）](http://blog.csdn.net/dfs4df5/article/details/51108798)一致 也将使用上篇中的数据库和代码进行添加和修改，如果未看上篇的请先去看上篇，本篇不再重复贴出上篇出现的源码。
一、数据库部分
为了检索方便，这里建立了一个视图
关联两个表，设置为外键
最后如果有什么不清楚的请参考下面语句
/*
Navicat MySQL Data Transfer
Source Server : localhost_3306
Source Server Version : 50710
Source Host : localhost:3306
Source Database : jqgriddemo
Target Server Type : MYSQL
Target Server Version : 50710
File Encoding : 65001
Date: 2016-04-19 08:57:17
*/
SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for t_demo
-- ----------------------------
DROP TABLE IF EXISTS `t_demo`;
CREATE TABLE `t_demo` (
`id` int(10) unsigned zerofill NOT NULL AUTO_INCREMENT,
`name` varchar(25) DEFAULT NULL,
`type` int(11) DEFAULT NULL,
`pay` double(10,2) DEFAULT NULL,
`text` text,
PRIMARY KEY (`id`),
UNIQUE KEY `id` (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=0 DEFAULT CHARSET=utf8;
-- ----------------------------
-- Table structure for t_documents
-- ----------------------------
DROP TABLE IF EXISTS `t_documents`;
CREATE TABLE `t_documents` (
`d_id` int(11) NOT NULL AUTO_INCREMENT,
`id` int(10) unsigned zerofill NOT NULL,
`g_id` int(10) unsigned zerofill NOT NULL,
`d_num` int(11) DEFAULT NULL,
PRIMARY KEY (`d_id`),
KEY `id` (`id`),
KEY `g_id` (`g_id`),
CONSTRAINT `t_documents_ibfk_1` FOREIGN KEY (`id`) REFERENCES `t_demo` (`id`) ON DELETE CASCADE ON UPDATE CASCADE,
CONSTRAINT `t_documents_ibfk_2` FOREIGN KEY (`g_id`) REFERENCES `t_goods` (`g_id`) ON DELETE CASCADE ON UPDATE CASCADE
) ENGINE=InnoDB AUTO_INCREMENT=0 DEFAULT CHARSET=utf8;
-- ----------------------------
-- Table structure for t_goods
-- ----------------------------
DROP TABLE IF EXISTS `t_goods`;
CREATE TABLE `t_goods` (
`g_id` int(10) unsigned zerofill NOT NULL AUTO_INCREMENT,
`g_name` varchar(25) NOT NULL,
`g_type` int(3) DEFAULT NULL,
PRIMARY KEY (`g_id`)
) ENGINE=InnoDB AUTO_INCREMENT=0 DEFAULT CHARSET=utf8;
-- ----------------------------
-- View structure for v_list
-- ----------------------------
DROP VIEW IF EXISTS `v_list`;
CREATE ALGORITHM=UNDEFINED DEFINER=`root`@`localhost` SQL SECURITY DEFINER VIEW `v_list` AS select `t_documents`.`id` AS `id`,`t_goods`.`g_id` AS `g_id`,`t_goods`.`g_name` AS `g_name`,`t_goods`.`g_type` AS `g_type`,`t_documents`.`d_num` AS `d_num` from (`t_goods` join `t_documents` on((`t_documents`.`g_id` = `t_goods`.`g_id`))) ;
注：本篇主从表主要以检索为主，为方便数据显示，需手动先添加些数据测试！
测试数据如下：
/*t_demo表数据*/
INSERT INTO `t_demo` (`name`, `type`, `pay`, `text`) VALUES ('测试1', '1', '24', '测试测试');
INSERT INTO `t_demo` (`name`, `type`, `pay`, `text`) VALUES ('测试2', '0', '12.312', '而是测试');
INSERT INTO `t_demo` (`name`, `type`, `pay`, `text`) VALUES ('测试3', '0', '12', ' 额额');
/*t_goods表数据*/
INSERT INTO `t_goods` (`g_name`, `g_type`) VALUES ('物资1', '1');
INSERT INTO `t_goods` (`g_name`, `g_type`) VALUES ('物资2', '1');
INSERT INTO `t_goods` (`g_name`, `g_type`) VALUES ('物资3', '0');
INSERT INTO `t_goods` (`g_name`, `g_type`) VALUES ('物资4', '2');
/*t_documents表数据*/
INSERT INTO `t_documents` (`id`, `g_id`, `d_num`) VALUES ('1', '1', '12');
INSERT INTO `t_documents` (`id`, `g_id`, `d_num`) VALUES ('1', '2', '1');
INSERT INTO `t_documents` (`id`, `g_id`, `d_num`) VALUES ('2', '1', '1');
INSERT INTO `t_documents` (`id`, `g_id`, `d_num`) VALUES ('2', '2', '2');
INSERT INTO `t_documents` (`id`, `g_id`, `d_num`) VALUES ('2', '3', '3');
INSERT INTO `t_documents` (`id`, `g_id`, `d_num`) VALUES ('3', '4', '45');
插入数据后点击打开视图显示如下：
二、程序部分
包结构如下，在"进阶篇二"的基础上增加了GoodList（从表显示的vo对象）部分
goodlist.java
package com.xeonmic.vo;
public class goodlist {
private int id;
private int g_id;
private String g_name;
private int g_type;
private int d_num;
public goodlist(int id, int g_id, String g_name, int g_type, int d_num) {
super();
this.id = id;
this.g_id = g_id;
this.g_name = g_name;
this.g_type = g_type;
this.d_num = d_num;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public int getG_id() {
return g_id;
}
public void setG_id(int g_id) {
this.g_id = g_id;
}
public String getG_name() {
return g_name;
}
public void setG_name(String g_name) {
this.g_name = g_name;
}
public int getG_type() {
return g_type;
}
public void setG_type(int g_type) {
this.g_type = g_type;
}
public int getD_num() {
return d_num;
}
public void setD_num(int d_num) {
this.d_num = d_num;
}
@Override
public String toString() {
return "goodlist [id=" + id + ", g_id=" + g_id + ", g_name=" + g_name
+ ", g_type=" + g_type + ", d_num=" + d_num + "]";
}
}
GoodListDAO.java
package com.xeonmic.dao;
import java.util.List;
import com.xeonmic.vo.goodlist;
public interface GoodListDAO {
//查询方法
public List<goodlist> doSearch(String keys);
}
GoodListDAOImpl.java
package com.xeonmic.dao.impl;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import com.xeonmic.dao.GoodListDAO;
import com.xeonmic.vo.goodlist;
public class GoodListDAOImpl implements GoodListDAO {
private Connection conn = null;
private PreparedStatement pstmt = null;
public GoodListDAOImpl(Connection conn){
this.conn=conn;
}
@Override
public List<goodlist> doSearch(String keys) {
if (keys==null) {
keys="";
}
String sql = "SELECT id,g_id,g_name,g_type,d_num FROM v_list"+keys;
List<goodlist> all = new ArrayList<goodlist>();
System.out.println(sql);
try {
this.pstmt = this.conn.prepareStatement(sql);
ResultSet rs = this.pstmt.executeQuery();
goodlist good = null;
while(rs.next()){
good = new goodlist(rs.getInt("id"),rs.getInt("g_id"),rs.getString("g_name"),rs.getInt("g_type"),rs.getInt("d_num"));
all.add(good);
}
this.pstmt.close();
} catch (SQLException e) {
// TODO 自动生成的 catch 块
e.printStackTrace();
}
return all;
}
}
GoodListDAOProxy.java
package com.xeonmic.dao.proxy;
import java.util.List;
import com.xeonmic.dao.GoodListDAO;
import com.xeonmic.dao.impl.GoodListDAOImpl;
import com.xeonmic.dbc.DatabaseConnection;
import com.xeonmic.vo.goodlist;
public class GoodListDAOProxy implements GoodListDAO {
private DatabaseConnection dbc = null;
private GoodListDAO ddao = null;
public GoodListDAOProxy(){
this.dbc = new DatabaseConnection();
this.ddao = new GoodListDAOImpl(this.dbc.getConnection());
}
@Override
public List<goodlist> doSearch(String keys) {
List<goodlist> all = null;
all = this.ddao.doSearch(keys);
this.dbc.close();
return all;
}
}
修改Factory.java
package com.xeonmic.factory;
import com.xeonmic.dao.DemoDAO;
import com.xeonmic.dao.GoodListDAO;
import com.xeonmic.dao.proxy.DemoDAOProxy;
import com.xeonmic.dao.proxy.GoodListDAOProxy;
public class Factory {
public static DemoDAO getDemoDAOInstance(){
return new DemoDAOProxy();
}
public static GoodListDAO getGoodListDAOInstance(){
return new GoodListDAOProxy();
}
}
goodlistServlet.java(重要 相比demoServlet加入了固定的id条件查询，因为从表的结果是根据主表选择的id进行显示的，所以每次检索都是在加上主表id的基础上进行的)
package com.xeonmic.action;
import java.io.IOException;
import java.util.LinkedList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import com.xeonmic.factory.Factory;
import com.xeonmic.vo.goodlist;
public class goodlistServlet extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 1L;
/**
* The doGet method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to get.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8"); //这里不设置编码会有乱码
response.setContentType("text/html;charset=utf-8");
response.setHeader("Cache-Control", "no-cache");
int rows = Integer.valueOf(request.getParameter("rows")); //每页中显示的记录行数
int page = Integer.valueOf(request.getParameter("page")); //当前的页码
String sord = request.getParameter("sord");//排序方式
String sidx = request.getParameter("sidx");//排序列名
Boolean search =(request.getParameter("_search").equals("true"))?true:false;//是否用于查询请求
List<goodlist> allList = new LinkedList<goodlist>();//返回结果集
if (request.getParameter("id")!=null &&!"".equals(request.getParameter("id"))) {
int id = Integer.valueOf(request.getParameter("id"));
String keys=" WHERE id = "+id+" ";//查询条件字符串
if(search ){
String filters = request.getParameter("filters");//具体的条件
if (filters!=null&&!"".equals(filters)) {
keys += " AND ( ";//将从表自身的检索条件用AND（条件1 AND 条件2 OR 条件3...）的形式封装
System.out.println("filters="+filters);
//传入数据的格式是类似这样的："{"groupOp":"AND","rules":[{"field":"id","op":"eq","data":"1"},{"field":"type","op":"ew","data":"2"}]}"
JSONObject jsonObject = JSONObject.fromObject(filters);
String groupOp = "AND";//每个规则之间的关系（and/or）
if (jsonObject.getString("groupOp")!=null&&!"".equals(jsonObject.getString("groupOp"))) {
if (jsonObject.getString("groupOp").equals("OR")) {
groupOp = "OR";
}
}
JSONArray rulesjson = jsonObject.getJSONArray("rules");
//遍历每个条件
for (int z=0; z < rulesjson.size(); z++) {
Object t = rulesjson.get(z);
JSONObject rulejson = JSONObject.fromObject(t);
String field = rulejson.getString("field");
String op = rulejson.getString("op");
String data = rulejson.getString("data");
String string = "";//用于存储单个条件sql语句片段
//开始转化为sql语句
switch (op) {
case "eq"://相等
string=" = '"+data+"' ";
break;
case "ne"://不相等
string=" <> '"+data+"' ";
break;
case "li"://小于
string=" < '"+data+"' ";
break;
case"le"://小于等于
string=" <= '"+data+"' ";
break;
case"gt"://大于
string=" > '"+data+"' ";
break;
case "ge"://大于等于
string=" >= '"+data+"' ";
break;
case "bw"://在...之间
{
if (data.split(",").length==2) {
string=" BETWEEN '"+data.split(",")[0]+"' AND '"+data.split(",")[1]+"' ";
}else {
string=" = '"+data+"' ";//数据错误时处理
}
}
break;
case"bn"://不在...之间
{
if (data.split(",").length==2) {
string=" NOT BETWEEN '"+data.split(",")[0]+"' AND '"+data.split(",")[1]+"' ";
}else {
string=" <> '"+data+"' ";//数据错误时处理
}
}
break;
case"ew"://以...结束
string=" LIKE '%"+data+"' ";
break;
case "en"://不以...结束
string=" NOT LIKE '%"+data+"' ";
break;
case "cn"://包含
string=" LIKE '%"+data+"%' ";
break;
case "nc"://不包含
string=" NOT LIKE '%"+data+"%' ";
break;
case "in"://在
{
string=" IN ( ";
String[] datas = data.split(",");
for (int i = 0; i < datas.length; i++) {
string+= " '"+datas[i]+"' ";
if (i!=datas.length-1) {
string += ",";
}else {
string += " ) ";
}
}
}
break;
case "ni"://不在
{
string=" NOT IN ( ";
String[] datas = data.split(",");
for (int i = 0; i < datas.length; i++) {
string+= " '"+datas[i]+"' ";
if (i!=datas.length-1) {
string += ",";
}else {
string += " ) ";
}
}
}
break;
default:
op=null;
System.out.println("OP符号错误");//OP符号错误
}
if (op!=null) {
if (z==rulesjson.size()-1) {
keys+=" "+field+" "+string +" ";
}else {
keys+=" "+field+" "+string +" "+groupOp+" ";
}
}
}
keys += " ) ";
}
}
//升降序SQL语句转换
if (sidx!=null&&!"".equals(sidx)) {
System.out.println(sidx);
keys += " ORDER BY " + sidx;
System.out.println("sord="+sord);
if (!sord.equals("asc")) {
keys += " DESC ";
}
}
allList = Factory.getGoodListDAOInstance().doSearch(keys);
//分页部分
int total=0;
total=(allList.size()%rows==0)?(allList.size()/rows):((allList.size()/rows)+1);
int j = 0;
int m = (page-1)*rows;
int n = (page-1)*rows+rows;
JSONArray jArray = new JSONArray();
for (j=m; j<allList.size()&&j<n; j++) {
jArray.add(JSONObject.fromObject(allList.get(j)));
}
JSONObject jjson = new JSONObject();
//检索结果及分页信息封装 返回
jjson.accumulate("page", page);
jjson.accumulate("total", total);
jjson.accumulate("records", allList.size());
jjson.accumulate("rows", jArray);
System.out.println(jjson.toString());
response.getWriter().write(jjson.toString());
}else {
response.getWriter().write("{}");
}
}
/**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
}
index1.jsp(重要 复制index.jsp 并作出如下修改)
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DEMO</title>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" href="css/jquery-ui.theme.min.css" />
<link rel="stylesheet" type="text/css" href="css/ui.jqgrid-bootstrap-ui.css" />
<link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css" />
</head>
<body>
<div class="main" id="main">
<!--jqGrid 主表所在-->
<table id="grid-table"></table>
<!--jqGrid 主表浏览导航栏所在-->
<div id="grid-pager"></div>
<!--jqGrid 从表所在-->
<table id="grid-tableo"></table>
<!--jqGrid 从表浏览导航栏所在-->
<div id="grid-pagero"></div>
</div>
<script src="js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/i18n/grid.locale-cn.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//当 datatype 为"local" 时需填写
var grid_selector = "#grid-table";
var pager_selector = "#grid-pager";
var grid_selectoro = "#grid-tableo";
var pager_selectoro = "#grid-pagero";
$(document).ready(function() {
$("#grid-table").jqGrid({
//用于检索的Servlet URL
url:"<%=basePath%>"+"demoServlet",
//用于添加、修改、删除的Servlet URL
editurl: "<%=basePath%>"+"demochangeServlet",
//data: grid_data, //当 datatype 为"local" 时需填写
datatype:"json", //数据来源，本地数据（local，json,jsonp,xml等）
height: 150, //高度，表格高度。可为数值、百分比或'auto'
mtype:"GET",//提交方式
colNames: ['出库单号', '出库类型', '总金额', '申请人（单位）', '备注'],
colModel: [{
name: 'id',
index: 'id', //索引。其和后台交互的参数为sidx
key: true, //当从服务器端返回的数据中没有id时，将此作为唯一rowid使用只有一个列可以做这项设置。如果设置多于一个，那么只选取第一个，其他被忽略
width: 100,
editable: false,
editoptions: {
size: "20",
maxlength: "30"
}
}, {
name: 'type',
index: 'type',
width: 200, //宽度
editable: true, //是否可编辑
edittype: "select", //可以编辑的类型。可选值：text, textarea, select, checkbox, password, button, image and file.s
editoptions: {
value: "1:采购入库;2:退用入库"
}
}, {
name: 'pay',
index: 'pay',
width: 60,
sorttype: "double",
editable: true
}, {
name: 'name',
index: 'name',
width: 150,
editable: true,
editoptions: {
size: "20",
maxlength: "30"
}
}, {
name: 'text',
index: 'text',
width: 250,
sortable: false,
editable: true,
edittype: "textarea",
editoptions: {
rows: "2",
cols: "10"
}
}, ],
viewrecords: true, //是否在浏览导航栏显示记录总数
rowNum: 10, //每页显示记录数
rowList: [10, 20, 30], //用于改变显示行数的下拉列表框的元素数组。
pager: pager_selector, //分页、按钮所在的浏览导航栏
altRows: true, //设置为交替行表格,默认为false
//toppager: true,//是否在上面显示浏览导航栏
multiselect: false, //是否多选
//multikey: "ctrlKey",//是否只能用Ctrl按键多选
multiboxonly: true, //是否只能点击复选框多选
// subGrid : true,
//sortname:'id',//默认的排序列名
//sortorder:'asc',//默认的排序方式（asc升序，desc降序）
caption: "采购退货单列表", //表名
autowidth: true, //自动宽
onSelectRow : function(ids) {
jQuery(grid_selectoro).jqGrid('setGridParam', {
url :"<%=basePath%>"+"goodlistServlet?flag=true&id=" + ids,
page : 1
});
jQuery(grid_selectoro).jqGrid('setCaption',
"物资详细类表" +" : " + ids).trigger(
'reloadGrid');
}
});
//浏览导航栏添加功能部分代码
$(grid_selector).navGrid(pager_selector, {
search: true, // 检索
add: true, //添加 （只有editable为true时才能显示属性）
edit: true, //修改（只有editable为true时才能显示属性）
del: true, //删除
refresh: true //刷新
}, {}, // edit options
{}, // add options
{}, // delete options
{
multipleSearch: true
} // search options - define multiple search
);
$("#grid-tableo").jqGrid({
//用于检索的Servlet URL
url:"<%=basePath%>"+"goodlistServlet?flag=false&",
//data: grid_data, //当 datatype 为"local" 时需填写
datatype:"json", //数据来源，本地数据（local，json,jsonp,xml等）
height: 150, //高度，表格高度。可为数值、百分比或'auto'
mtype:"GET",//提交方式
colNames: ['物资编号', '物质类型', '物资名称', '数量', ],
colModel: [{
name: 'g_id',
index: 'g_id', //索引。其和后台交互的参数为sidx
key: true, //当从服务器端返回的数据中没有id时，将此作为唯一rowid使用只有一个列可以做这项设置。如果设置多于一个，那么只选取第一个，其他被忽略
width: 100,
editable: false,
editoptions: {
size: "20",
maxlength: "30"
}
}, {
name: 'g_type',
index: 'g_type',
width: 200, //宽度
editable: true, //是否可编辑
edittype: "select", //可以编辑的类型。可选值：text, textarea, select, checkbox, password, button, image and file.s
editoptions: {
value: "1:试剂;2:日用品;3:其他"
}
}, {
name: 'g_name',
index: 'g_name',
width: 150,
editable: true,
editoptions: {
size: "20",
maxlength: "30"
}
}, {
name: 'd_num',
index: 'd_num',
width: 60,
editable: true
}
],
viewrecords: true, //是否在浏览导航栏显示记录总数
rowNum: 10, //每页显示记录数
rowList: [10, 20, 30], //用于改变显示行数的下拉列表框的元素数组。
pager: pager_selectoro, //分页、按钮所在的浏览导航栏
altRows: true, //设置为交替行表格,默认为false
//toppager: true,//是否在上面显示浏览导航栏
multiselect: false, //是否多选
//multikey: "ctrlKey",//是否只能用Ctrl按键多选
multiboxonly: true, //是否只能点击复选框多选
// subGrid : true,
//sortname:'id',//默认的排序列名
//sortorder:'asc',//默认的排序方式（asc升序，desc降序）
caption: "物资详细列表", //表名
autowidth: true //自动宽
});
//浏览导航栏添加功能部分代码
$(grid_selectoro).navGrid(pager_selectoro, {
search: true, // 检索
add: false, //添加 （只有editable为true时才能显示属性）
edit: false, //修改（只有editable为true时才能显示属性）
del: false, //删除
refresh: true //刷新
}, {}, // edit options
{}, // add options
{}, // delete options
{
multipleSearch: true
} // search options - define multiple search
);
});
</script>
</body>
</html>
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
<display-name>jqGrid</display-name>
<servlet>
<servlet-name>demoServlet</servlet-name>
<servlet-class>com.xeonmic.action.demoServlet</servlet-class>
</servlet>
<servlet>
<servlet-name>demochangeServlet</servlet-name>
<servlet-class>com.xeonmic.action.demochangeServlet</servlet-class>
</servlet>
<servlet>
<servlet-name>goodlistServlet</servlet-name>
<servlet-class>com.xeonmic.action.goodlistServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>demoServlet</servlet-name>
<url-pattern>/demoServlet</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>demochangeServlet</servlet-name>
<url-pattern>/demochangeServlet</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>goodlistServlet</servlet-name>
<url-pattern>/goodlistServlet</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
</web-app>显示效果如下：
首次打开效果（未选中主表行）
不知道你们有没有发现这些地方有点不对劲？不知道是不是个例
如果你的显示效果和我一样，请打开css目录下的ui.jqgrid.css的文件中删除圈出来的两部分
修改后刷新页面后效果
点击主表中的某一行从表的相应数据已经显示（从表的表头部分已显示主表点击行的id了 ）
下面测试下主表的检索（可以看到从表是不会改变的，因为未点击主表的行）
点击后从表显示正常
下面是从表检索测试
这里特别说明一下，如果你进行了从表检索，再点击主表的任何一行时，从表的检索条件并未重置，需要手动点击从表的重置
点击从表的检索按钮会发现从表的检索条件并未重置
点击从表的重置按钮后显示正常
测试下主表的删除
发现数据库中关联表中的数据也都删除了（说明外键约束成功）
最后测试下主表的添加（这里的添加是不完善的 因为只添加了一个主表中的数据 未添加任何从表中的数据 ，删除和添加仅仅是测试功能，真正应用主从表的显示中可删除这两个功能）
添加成功，从表无任何数据
至此，主表表显示设计实现已经全部结束，下篇将实现从表的添加数据修改数据的功能，即主从表全功能实现。如果你喜欢请关注http://blog.csdn.net/dfs4df5
2807
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
