jqGrid学习一
以下内容摘自http://a3mao.iteye.com/blog/539929
1、html文件
Java代码
<!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>
<!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的用法：
Java代码
jQuery('#grid_selector').jqGrid( options )
jQuery('#grid_selector').jqGrid( options )
grid_selector就是table的id值，
optoins是一个json对象：
Java代码
{
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
}
{
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、服务端文件
Java代码
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;
}
}
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数据格式：
Java代码
{"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}
下面为各位评论内容：
polaris1119 写道
您好，最近公司项目要使用AJAX，要求我负责这块，还得跟其他人讲讲。所以，我得好好学习下。
我找到了jqGrid这个jQuery插件，觉得功能蛮强大的。然后在网上找了资料，发现没有令我满意的。
还好，在您这里，我看到了很多有用的知识。很感谢。
可是，我还是有些问题想问你一下：
1、这个例子，您有运行吗？有没有用Struts2的json插件？
2、我用了json的插件，配置好后，直接访问action映射地址，会提示下载一个文件，下载打开后，发现里面的json语法格式完全正确（而且，为了保险，我直接让jqGrid的url指向这个文件可以正常显示）。但是，url指向action的地址后（我已经确定了访问到这个Action了，因为后台有输出log），jqGrid怎么也接收不到数据，IE中还有一个脚本错误："undefine" is null or not a object。表格中显示不出数据。jqGrid要怎么接收json数据？
3、如果可能，麻烦能不能用struts2 + json开发一个完整的出来呢？非常感谢。
我自己解决的方法是把repeatitems设为false，但不知道为啥是true的时候就不行，弄了好久都不成功。
你这个错误是因为js库加载顺序造成的，我开始也碰到了这个问题
1、html文件
Java代码
<!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>
<!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的用法：
Java代码
jQuery('#grid_selector').jqGrid( options )
jQuery('#grid_selector').jqGrid( options )
grid_selector就是table的id值，
optoins是一个json对象：
Java代码
{
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
}
{
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、服务端文件
Java代码
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;
}
}
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数据格式：
Java代码
{"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}
下面为各位评论内容：
polaris1119 写道
您好，最近公司项目要使用AJAX，要求我负责这块，还得跟其他人讲讲。所以，我得好好学习下。
我找到了jqGrid这个jQuery插件，觉得功能蛮强大的。然后在网上找了资料，发现没有令我满意的。
还好，在您这里，我看到了很多有用的知识。很感谢。
可是，我还是有些问题想问你一下：
1、这个例子，您有运行吗？有没有用Struts2的json插件？
2、我用了json的插件，配置好后，直接访问action映射地址，会提示下载一个文件，下载打开后，发现里面的json语法格式完全正确（而且，为了保险，我直接让jqGrid的url指向这个文件可以正常显示）。但是，url指向action的地址后（我已经确定了访问到这个Action了，因为后台有输出log），jqGrid怎么也接收不到数据，IE中还有一个脚本错误："undefine" is null or not a object。表格中显示不出数据。jqGrid要怎么接收json数据？
3、如果可能，麻烦能不能用struts2 + json开发一个完整的出来呢？非常感谢。
我自己解决的方法是把repeatitems设为false，但不知道为啥是true的时候就不行，弄了好久都不成功。
你这个错误是因为js库加载顺序造成的，我开始也碰到了这个问题