`
a3mao
  • 浏览: 563413 次
  • 性别: 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学习 ----------- 原理
评论
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,
发表评论

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

相关推荐

    jqgrid实例保存

    创建jqGrid的第一步是定义HTML元素，通常是一个`&lt;table&gt;`标签，然后通过JavaScript初始化jqGrid。例如： ```html &lt;table id="list"&gt;&lt;/table&gt; &lt;div id="pager"&gt;&lt;/div&gt; ``` 接着，我们使用JavaScript来初始化jqGrid...

    jqgrid 中文文档

    - **第一个实例**: 介绍了如何创建一个简单的jqGrid表格，并演示了其基本使用方法。 - **数据修改与校验**: 展示了如何使用jqGrid进行数据的修改，并如何在客户端进行有效的数据校验。 以上是对“jqgrid 中文文档”...

    jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法

    - 如果需要在开始时就加载数据，`url`应设置为实际的API路径，例如`"/controller/action/"`，确保第一个`"/"`存在以正确调用后台的控制器方法。在.NET MVC框架下，最后一个`"/"`通常是可选的，但通常为了规范会保留...

    数据列表组件 jqGrid 二次封装

    // 动态加载第一页数据 loadPageData($("#userGrid"), 1, 10); ``` ### 5. 总结 通过对 jqGrid 进行二次封装，我们可以更高效地管理和维护表格组件，同时增强其灵活性。这不仅适用于 jqGrid，也可以应用于其他类似...

    jqgrid:我在 github 上的第一个存储库

    这个项目在 GitHub 上的标题“jqgrid:我在 github 上的第一个存储库”表明它是一个学习和示例(jqgrid)的资源，作者可能是初次将代码托管在 GitHub 上。描述中的“网格”一词进一步确认了这与数据表格展示有关，而...

    JqGrid国际化Demo.zip

    总结起来，"JqGrid国际化Demo.zip"包含了一个示例，演示了如何在JqGrid中集成和使用国际化功能。通过正确加载语言文件、配置初始化选项以及可能的自定义翻译，我们可以创建一个能适应多种语言环境的JqGrid应用。这...

    PHP jqGrid 数据网格显示并分页

    第一步，我们需要在HTML中引入jqGrid的JavaScript和CSS文件。这通常包括`jquery.js`、`jquery.jqgrid.min.js`和相应的主题CSS文件，例如`ui.jqgrid.css`。同时，我们还需要一个用于初始化jqGrid的JavaScript代码段，...

    jquery Jqgride 报表插件中文API

    - **实例演示**：文中提到“第一个实例”，意味着文档中会有一个完整的使用jqGrid的示例，从初始化表格到展示数据的全过程。 - **数据修改与验证**：提供了如何使用jqGrid来修改数据并进行验证的例子，帮助开发者更...

    解决vue中无法动态修改jqgrid组件 url地址的问题

    jqGrid是一个功能强大的表格插件，它允许我们在网页上展示大量数据并提供各种操作功能。然而，在Vue环境中，由于数据绑定和组件生命周期的原因，直接修改jqGrid的url属性可能不会立即生效。下面我们将详细探讨这个...

    TreeGrid 在Asp.net中实现的实例

    在这个实例中，我们将深入探讨如何在ASP.NET环境中使用TreeGrid，以及如何利用JavaScript增强其功能。 首先，我们要了解TreeGrid的基础。TreeGrid是一种控件，它显示的数据不仅有表格的行列结构，还具有层级关系，...

    jquery asp.net json gridview

    标题 "jquery asp.net json gridview" ...综上所述，这个项目涉及到使用jQuery和JSON在ASP.NET MVC环境下创建一个具有分页功能的GridView，提供了前后端数据交互的实例，并且可能包含了一些自定义的主题和示例代码。

    jqery+ajax数据表格

    在文件"codefans.net"中，可能包含了相关的示例代码、教程或者是一个完整的项目实例。这可能包括HTML模板、jQuery脚本、C#后台代码以及可能的数据库脚本。通过学习和分析这些文件，开发者可以更好地理解如何将jQuery...

    JQuery实战

    jQuery的生态中包含大量第三方插件，如Bootstrap、jQuery UI、jQGrid等，它们提供了丰富的组件和功能，如日期选择器、轮播图、表格等，极大扩展了jQuery的功能。 ### 六、学习资源与实践 1. **官方文档**: jQuery...

    Jquery鼠标放上去显示全名的实现方法

    第一种实现方法是使用Jquery的`mouseover`和`mouseout`事件。在Jquery中，这两个事件分别对应于DOM事件的`mouseenter`和`mouseleave`。通过绑定这两个事件，我们可以在鼠标进入和离开某个元素时执行相应的JavaScript...

    JQuery 中文手册

    **jQuery 中文手册详解** ...通过学习并实践手册中的实例，开发者可以迅速掌握jQuery的核心技能，提升Web开发能力。在实际项目中，合理运用jQuery能够有效提升代码质量和开发效率，是现代Web开发不可或缺的一部分。

    javascript API

    JavaScript中的函数不仅是可调用的实体，也是第一类对象，可以作为参数传递和作为返回值。闭包则是函数能够访问并操作其词法作用域内变量的能力，即使该函数已经执行完毕。 9. **面向对象编程**： JavaScript支持...

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