工作的潜在需要，闲时看看jqgrid插件，记录一下jqgrid的基本应用。
http://jqgrid.com/ jqgrid的链接。
jqgrid 属性http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options
一、jqGrid 属性：
1、datatype：
local 本地
json json数据格式
jsonstring
xml
xmlstring
javascript
function
clientSide
2、width，height：列表宽度/高度
3、colNames（字符串数组，如：['AA','BB']）：
4：colModel 列模式
{name:'', index:'', width:50, sorttype:'int',align:'right', sortable:false}
name:列名
sorttype：排序类型 如：int、float、date等
align 对齐方式： left、right。
sortable 是否可排序：true 、false
5、multiselect 是否可多选 true、false
6、caption 列表标题
7、url 数据请求连接
8、rowNum 显示行数
9、rowList 列表显示行数选择列表
10、viewrecords: true,false 是否显示记录总数
11、onSelectRow：选中列表记录操作
onSelectRow:function(ids) {
}
12、direction 列表文字的排序方向
二、jqgrid 方法：
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods
######################## 说明：########################
<table id="list"></table>
<div id="pager"></div>
########################################################
#################### 读取列表属性或值 ################
1、获取选中记录的行号：
var row = jQuery("#list").jqGrid('getGridParam','selrow');
2、根据行号返回选中行的数据
var rowData = jQuery("#list").jqGrid('getRowData', row);
rowData.*** 读取选中记录的属性值“***”未行属性,如rowData.id,返回行属性id的值
3、根据行号删除列表数据
var su=jQuery("#list").jqGrid('delRowData', 12); //删除行号未12的记录
4、新增记录
var datarow = {id:"99",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"};
var su=jQuery("#list").jqGrid('addRowData', 99, datarow); //99未知含义
5、读取列表请求数据的url
jQuery('#list').jqGrid('getGridParam', 'url'))
6、返回列表的默认排序列
jQuery('#list').jqGrid('getGridParam', 'sortname')
7、返回列表默认的排序方式
jQuery('#list')jqGrid('getGridParam', 'sortorder')
8、返回列表选中记录
jQuery('#list')jqGrid('getGridParam','selrow')
9、返回列表当前页序号：
jQuery('#list')jqGrid('getGridParam','page'))
10、返回列表选中记录数
jQuery('#list').jqGrid('getGridParam','rowNum')
11、返回选中记录数据类型：
jQuery('#list').jqGrid('getGridParam','datatype')
12、返回列表的记录数：
jQuery('#list').jqGrid('getGridParam','records')
#################### 设置列表属性或值 ################
说明：读取相应的改为set**就能够设置列表属性或值.
13、选中某一行记录
jQuery("#list2").jqGrid('setSelection',"1"); //选中该列表第一行数据
三、ColModel API
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options
建立新的javaweb工程，添加json相关的 jar包。
附上代码，共以后查考。
Servlet生产json数据格式：
/**
*
*/
package org.rico.demo.jqgrid.demo.dataload;
import java.io.IOException;
import java.io.PrintWriter;
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;
/**
* @author rico
* jqgrid 初始列表数据-json数据格式
*/
public class DataLoadByJSon extends HttpServlet {
private static final long serialVersionUID = 5546844758953964549L;
/**
* 说明：网上借来的数据
* 链接：http://www.cnblogs.com/jancyxue/archive/2011/08/17/2141676.html
*
*
* jqGrid默认期望返回的json对象格式要求如下：
* {"page":"1","total":"2","records":"13",
* "rows":[
* {id:"1",cell:["1","jancyxue","男","[email protected]","410958040","江西余干"]},
* {id:"2",cell:["2","linda","女","[email protected]","111111111","湖南"]},
* {id:"3",cell:["3","jason","男","[email protected]","222222222","湖北"]},
* {id:"4",cell:["4","lucy","女","[email protected]","33333333","北京"]}
* ]
* }
* 当然，在js中，可以通过jqGrid的jsonReader属性来修改默认格式
* 我们可以在jsonReader中定义repeatitems : false。这样，可以使用下面的数据格式（为了防止出错，我们在写colModel的时候如果实在不会就对应着下面的每个字段写，就不容易出错了：
* "rows":[
* {id:"1",engName:"jancyxue",gender:" 男",email:"[email protected]",QQ:"410958040",address:"江西余干"]},
* {id:"2",engName:"linda",gender:" 女",email:"[email protected]",QQ:"111111111","address:湖南"]},
* {id:"3",engName:"jason",gender:" 男",email:"[email protected]",QQ:"222222222",address:"湖北"]},
* {id:"4",engName:"lucy",gender:" 女",email:"[email protected]",QQ:"33333333",address:"北京"]}
* ]
* 就像这样colModel:[{name:'id',index:'id',width:55},{name:'engName',index:'engName',width:100},{name:'gender',index:'gender',width:180, sortable:false},{name:'email',index:'email',width:180},
{name:'QQ',index:'QQ',width:280},{name:'address',index:'address',width:280}]
*
*/
@Override
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//模拟数据
JSONObject jo = new JSONObject();
Integer rows = Integer.valueOf(request.getParameter("rows"));
Integer page = Integer.valueOf(request.getParameter("page"));
System.out.println("####rows: " + rows + "####page: " + page);
Integer totalSize = 100;
jo.put("page", page); //当前页
Integer totalPages = totalSize%rows==0?totalSize/rows:(totalSize/rows+1);
jo.put("total", totalPages); //总页数
jo.put("records", totalSize); //总记录数
JSONArray ja = new JSONArray();
JSONObject rowJO = null;
int index = (page-1)*rows;
int lastIndex = page*rows;
if(lastIndex > 100) {
lastIndex = 100;
}
for(int i=1+index; i<=lastIndex; i++) {
rowJO = new JSONObject();
rowJO.put("id", i + "");
rowJO.put("name", "X" + i);
rowJO.put("sex", "XX" + i);
rowJO.put("phone", "XXX" + i);
rowJO.put("email", "[email protected]" + i);
ja.add(rowJO);
}
jo.put("rows", ja);
System.out.println(jo.toString());
response.setCharacterEncoding("UTF-8");
PrintWriter pw = response.getWriter();
pw.write(jo.toString());
pw.flush();
pw.close();
}
@Override
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}
/**
*
*/
package org.rico.demo.jqgrid.demo.dataload;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* @author rico
* 导航到jqgrid载入数据页面
*/
public class DataLoadIndexServlet extends HttpServlet {
private static final long serialVersionUID = 7226355428393263783L;
@Override
public void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
System.out.println("导航到jqgrid载入数据页面");
req.getRequestDispatcher("/jqgrid/dataLoad/dataload_json.jsp").forward(req, resp);
}
@Override
public void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
this.doGet(req, resp);
}
}
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jqgrid 载入数据</title>
<link rel="stylesheet" type="text/css" media="screen" href="${pageContext.request.contextPath}/commons/css/jquery-ui-1.8.20.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="${pageContext.request.contextPath}/commons/css/ui.jqgrid.css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/commons/js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/commons/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/commons/js/i18n/grid.locale-cn.js"></script>
<style type="text/css">
ul li {
float: left; margin-left: 15px;
font-size: 8pt;
}
</style>
</head>
<body>
<div style="height: 50px;">
<ul>
<li><a href="###" onclick="getSelectedRowData();">读取选中记录</a></li>
<li><a href="###" onclick="deleteRow();">删除选中行</a></li>
<li><a href="###" onclick="updateRow();">更新第一行数据</a></li>
<li><a href="###" onclick="addRow();">新增数据</a></li>
<li><a href="###" onclick="getSeletedRowIds();">获取选中记录的id</a></li>
<li><a href="###" onclick="setSelectedRow();">选中第一行记录</a></li>
</ul>
</div>
<table id="list2"></table>
<div id="pager2"></div>
</body>
<script type="text/javascript">
jQuery("#list2").jqGrid({
url:'${pageContext.request.contextPath}/dataLoadByJSon',
datatype: "json",
colNames:['id','name', 'sex', 'phone','email'],
colModel:[
{name:'id',index:'id', width:55},
{name:'name',index:'name', width:100},
{name:'sex',index:'sex', width:80, align:"right"},
{name:'phone',index:'phone', width:80, align:"right"},
{name:'email',index:'email', width:80,align:"right"}
],
jsonReader:{
page:"page",
total:"total",
repeatitems:false
},
pager:jQuery('#pager1'),
rowNum:10,
rowList:[10,20,30],
pager: '#pager2',
sortname: 'id',
viewrecords: true, //是否显示记录总数
sortorder: "desc",
width:900,
height:'400',
//recordpos: 'left',
multiselect: true,
caption:"JSON Example"
});
jQuery("#list2").jqGrid('navGrid','#pager2',{edit:false, add:false, del:false});
/**获取选中记录数据*/
function getSelectedRowData() {
var row = jQuery("#list2").jqGrid('getGridParam','selrow');
if(row) {
var selectedRow = jQuery("#list2").jqGrid('getRowData',row);
alert("###id="+selectedRow.id+" ###name="+selectedRow.name+"...");
} else {
alert("未选取任何记录.");
}
}
/**删除选中行*/
function deleteRow() {
var row = jQuery("#list2").jqGrid('getGridParam','selrow');
if(!row || row=='') {
alert("未选取任何记录.");return;
}
var delRow = jQuery("#list2").jqGrid('delRowData', row);
if(delRow)
alert("未实现相关的删除操作 .");
}
/**更新第一行数据*/
function updateRow() {
var rowData = jQuery("#list2").jqGrid('setRowData', 1, {id:"X!", name:"ricoXX", sex:"manXX"});
if(rowData)
alert("更新第一行数据成功.");
}
/**新增数据*/
function addRow() {
var datarow = {id:"101",name:"rio",sex:"man",phone:"199876****",email:"XXX.126.com"};
var su=jQuery("#list2").jqGrid('addRowData', 101, datarow);
if(su)
alert("新增数据成功。");
else
alert("新增数据发生错误。");
}
/**获取选中记录的id*/
function getSeletedRowIds() {
var ids = jQuery("#list2").jqGrid('getGridParam', 'selarrrow');
alert(ids);
}
/**选中第一行记录*/
function setSelectedRow() {
jQuery("#list2").jqGrid('setSelection',"1");
}
</script>
</html>
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5"> <display-name>jqgridDemo</display-name> <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> <!-- 导航到jqgrid载入数据页面--> <servlet> <servlet-name>DataLoadIndexServlet</servlet-name> <servlet-class>org.rico.demo.jqgrid.demo.dataload.DataLoadIndexServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>DataLoadIndexServlet</servlet-name> <url-pattern>/dataLoadIndexServlet</url-pattern> </servlet-mapping> <!-- jqgrid载入数据-json格式 --> <servlet> <servlet-name>DataLoadByJSon</servlet-name> <servlet-class>org.rico.demo.jqgrid.demo.dataload.DataLoadByJSon</servlet-class> </servlet> <servlet-mapping> <servlet-name>DataLoadByJSon</servlet-name> <url-pattern>/dataLoadByJSon</url-pattern> </servlet-mapping> </web-app>
http://localhost:8080/jqgridDemo/dataLoadIndexServlet 查看jqgrid列表的一些简单操作。