jqGrid学习 ----------------- 第一个实例
1、html文件
jqGrid需要我们事先指定一个table对象，且有一个唯一的id属性。其他表格属性比如Cellspacing、cellpadding跟border 不要自己设置，jqGrid会设置。
因为我们要分页，所以要定义一个分页的div对象，同样必须有id属性。
jqGrid的用法：
grid_selector就是table的id值，
optoins是一个json对象：
4、服务端文件
返回的json数据格式：
<!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.7.1.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.3.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
jQuery("#jsonmap").jqGrid({
url:WEB_PATH+'/example/JqGridExample.action',
//url:WEB_PATH+'/excludes/post.jsp',
datatype: 'json',
colNames:['编号','姓名','密码','年龄','地址','出生日期'],
colModel:[
{name:'id',index:'id', width:90,sorttype:"int"},
{name:'username',index:'name', width:110,sorttype:"int"},
{name:'password',index:'password', width:80},
{name:'age',index:'age', width:80},
{name:'address',index:'address', width:80},
{name:'time',index:'time', width:80,sorttype:"date"}
],
imgpath: WEB_PATH+'/resources/javascript/plugins/jqgrid/css/smoothness/images',
rowNum:10,
rowList:[10,20,30],
pager: "pjmap",
multiselect: false,
sortname: 'id',
viewrecords: true,
sortorder: "desc",
jsonReader: {
root: "dataRows",
repeatitems : false
},
caption: "jqGrid test",
height: 220
}).navGrid('pjmap',
{view:true,edit:true,add:false,del:false},
{closeOnEscape:true}
);
});
</script>
</head>
<body>
<table id="jsonmap" ></table>
<div id="pjmap" ></div>
</body>
</html>
jqGrid需要我们事先指定一个table对象，且有一个唯一的id属性。其他表格属性比如Cellspacing、cellpadding跟border 不要自己设置，jqGrid会设置。
因为我们要分页，所以要定义一个分页的div对象，同样必须有id属性。
jqGrid的用法：
jQuery('#grid_selector').jqGrid( options )
grid_selector就是table的id值，
optoins是一个json对象：
{
url:WEB_PATH+'/example/JqGridExample.action',
//url:WEB_PATH+'/excludes/post.jsp',
datatype: 'json',
colNames:['编号','姓名','密码','年龄','地址','出生日期'],
colModel:[
{name:'id',index:'id', width:90,sorttype:"int"},
{name:'username',index:'name', width:110,sorttype:"int"},
{name:'password',index:'password', width:80},
{name:'age',index:'age', width:80},
{name:'address',index:'address', width:80},
{name:'time',index:'time', width:80,sorttype:"date"}
],
imgpath: WEB_PATH+'/resources/javascript/plugins/jqgrid/css/smoothness/images',
rowNum:10,
rowList:[10,20,30],
pager: "pjmap",
multiselect: false,
sortname: 'id',
viewrecords: true,
sortorder: "desc",
jsonReader: {
root: "dataRows",
repeatitems : false
},
caption: "jqGrid test",
height: 220
}
4、服务端文件
package com.test.json.action;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.apache.struts2.json.annotations.JSON;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import com.web.action.BaseAction;
public class JqGridAction extends BaseAction
{
/**
*
*/
private static final long serialVersionUID = 1L;
private int page = 1;
private int total = 3;
private int rows = 0;
private List dataRows = new ArrayList();
public String execute()
{
JSONArray t_list = new JSONArray();
for(int i=0;i<3;i++){
JSONObject student = new JSONObject();
//Map student = new HashMap();
student.put("username","王三");
student.put("password","123");
student.put("age",20+i);
student.put("address","USA");
student.put("id",i);
dataRows.add(i,student);
}
//JSONArray ay =JSONArray.fromObject(rows);
System.out.println("tttttttttttt======"+t_list.toString());
//this.outJsonString(t_list.toString() );
return SUCCESS;
}
//@JSON(serialize=false)
public int getPage()
{
return page;
}
public void setPage(int page)
{
this.page = page;
}
//@JSON(serialize=false)
public int getTotal()
{
return total;
}
public void setTotal(int total)
{
this.total = total;
}
//@JSON(serialize=false)
public int getRows()
{
return rows;
}
public void setRows(int rows)
{
this.rows = rows;
}
public List getDataRows()
{
return dataRows;
}
public void setDataRows(List dataRows)
{
this.dataRows = dataRows;
}
}
返回的json数据格式：
{"dataRows":[{"password":"123","age":20,"address":"USA","username":"王三","id":0},{"password":"123","age":21,"address":"USA","username":"王三","id":1},{"password":"123","age":22,"address":"USA","username":"王三","id":2}],"page":1,"rows":10,"total":3}