`
a3mao
  • 浏览: 560094 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jqGrid学习 ----------------- 第一个实例

    博客分类：
  • Work
jsonjQueryWebIEAjax 
阅读更多
1、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的用法： 
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}
分享到：
| jqGrid学习 ----------- 原理
评论
12 楼 bigboy 2010-07-07  
您好，最近公司要求我使用这个的，但整合struts2一直都没成功，能发份源代码到我邮箱吗，email：506665698@qq.com，谢谢！！！
11 楼 fslx2008 2010-04-16  
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开发一个完整的出来呢？非常感谢。

你这个错误是因为js库加载顺序造成的，我开始也碰到了这个问题
10 楼 lionhome 2010-04-08  
楼主你的 BaseAction基类里怎么写的啊
9 楼 yubt5210 2010-02-09  
最近一直关注这个，能不能给我一个？
yuet5210@163.com
8 楼 icland 2010-01-25  
a3mao 写道
告诉我一个邮箱，我发给demo给你

aini512nian@163.com
谢谢
7 楼 suiye007 2010-01-18  
a3mao 写道
告诉我一个邮箱，我发给demo给你

admin@661z.com 给我一份
6 楼 zhllee12345678 2009-12-23  
zhllee@163.com
麻烦发给我一份
谢谢
5 楼 maomao198214 2009-12-15  
49815140@qq.com谢谢 发我一份
4 楼 polaris1119 2009-12-14  
我自己解决的方法是把repeatitems设为false，但不知道为啥是true的时候就不行，弄了好久都不成功。
3 楼 polaris1119 2009-12-14  
花了不少时间，终于自己搞定了。不过，还是想看看你怎么写的。谢谢了。
邮箱：xuxinhua1984@gmail.com
2 楼 a3mao 2009-12-14  
告诉我一个邮箱，我发给demo给你
1 楼 polaris1119 2009-12-12  
您好，最近公司项目要使用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开发一个完整的出来呢？非常感谢。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics