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

a3mao

浏览: 559023 次
性别:
来自: 北京

最近访客更多访客>>

yuanbincs

yangsongqq

zyh11

miwu55

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Work

json jQuery Web IE Ajax

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学习 ------------------ jqGrid参数 | jqGrid学习 ----------- 原理

2009-12-03 11:43
浏览 15516
评论(32)
查看更多

32 楼 cjliang 2014-06-30

1456746014@qq.com 我也要

31 楼 Moy_Yeung 2013-11-25

Moy_Yeung 写道

您好我最近在学习使用这个插件能麻烦博主发份demo吗谢谢

忘说我邮箱了 yiryyyr@gmail.com 谢谢

30 楼 Moy_Yeung 2013-11-25

您好我最近在学习使用这个插件能麻烦博主发份demo吗谢谢

29 楼十叶木竹 2013-11-13

最近在自学这个插件，麻烦博主，发一份源码，以供学习，谢谢博主啦，148015282@qq.com

28 楼 Dvinson 2013-08-27

忘记留邮箱了。。499490209@qq.com

27 楼 Dvinson 2013-08-27

那个。。。。我最近在学习这儿。。。。。能顺带给我发一份源码么？？或者其他关于JqGrid的源码，资料。。这里不胜感激了

26 楼 237304457 2013-08-16

求jqgrid的demo就上面那个，能发到我邮箱吗237304457@qq.com

25 楼 Queenahuan 2012-07-06

？楼主也发我一份demo吧，我正在学，云里雾里的。

24 楼 yangbo1992 2012-06-21

楼主，能不能给我也发一份，或者加个q问一下你问题？？我主要是不知道怎么控制它的工具栏哪里，不知道怎么实现增删改查这些功能。qq邮箱343567562@qq.com谢谢了、

23 楼 qw3431667 2012-03-06

啊大大大是大大阿萨达阿斯顿阿达三大爱上啊

22 楼 dafengzhui 2012-03-02

给我也发一个吧我的邮箱 283668119@qq.com

21 楼 xchsh12345 2011-11-20

楼主能给一份不???最近项目要用这个东西了 754317922@qq.com

20 楼 souwangwm 2011-11-06

楼主给我也发一份，好吗？
souwangwm@126.com

19 楼 jwdstef 2011-05-17

最近要用到这个了麻烦楼主给份源码把邮箱：jwd1986@163.com

18 楼 silenrain 2011-05-05

lixiaoyu@sict.ac.cn楼主你懂的

17 楼 Roshan2 2011-03-26

麻烦也发给我一份demo吧 jiluo093@163.com 谢谢了

16 楼 xiaomu0501 2011-03-20

你好：
    可以发一份demo 给我吗，最近自己一直在自学这个教程，可是一点的头绪都没有，公司还催的要命，哎！
     先谢谢大哥了，
     我的邮箱：
              541220948@qq.com

15 楼 12526022 2011-01-13

麻烦也发给我一份demo吧 12526022@163.com 谢谢了

14 楼 Nancy771959506 2010-12-14

最近项目要遇到这个知识点，可不可以给我发一个DEMO啊？！我邮箱是xx_jiangqing@126.com，谢谢啊！

13 楼 muzirenqing 2010-07-26

可以给我发一个demo吗？06281098@bjtu.edu.cn,

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论