`

jqGrid学习一

jsonjQueryWebJavaScriptCSS 
阅读更多
以下内容摘自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库加载顺序造成的，我开始也碰到了这个问题

分享到：
| 在sql语句中根据判断条件更新数据
评论
发表评论

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

相关推荐

    jqGrid学习笔记1 - - - - jqGrid英语PDF文档

    这个学习笔记主要围绕“jqGrid学习笔记1”展开，内容来源于jqGrid的英文PDF文档，结合了源码解析和实用工具的介绍。 首先，jqGrid支持多种数据源，包括JSON、XML、HTML、CSV等，这使得它能灵活地与各种后端服务进行...

    JqGrid插件+JqGridDemo+JqGrid主题

    1. 数据源支持：JqGrid支持多种数据源，包括JSON、XML、CSV、AJAX以及服务器端处理的数据。这使得开发者可以灵活地选择最适合其后端架构的数据传输方式。 2. 动态加载：JqGrid具备分页功能，能够根据用户的滚动或...

    jqgrid学习

    jqGrid 是一个强大的 jQuery 插件，用于在网页上创建、操作和展示数据表格。它提供了丰富的功能，如数据分页、排序、过滤、编辑、导入导出等，广泛应用于 Web 应用程序中，特别是在处理大量数据时。本教程将深入探讨...

    jqGrid 中文大全(1)

    在“jqGrid中文大全(1)”这个压缩包中，包含了一系列关于jqGrid的中文教程和文档，这些资料可以帮助开发者更深入地理解和应用jqGrid。以下是一些主要知识点的详细介绍： 1. **安装jqGrid**： jqGrid的安装通常涉及...

    jqGrid手册教程一本通

    jqGrid是一款基于jQuery开发的插件，它主要用于在网页上实现数据的动态展示和操作。它能够将服务器端的数据以表格的形式展现给用户，并提供了丰富的功能，如数据的增删改查、排序、搜索等。 首先，我们需要理解...

    第一个jqGrid例子

    jqGrid是一款基于jQuery的开源数据网格插件，用于在网页上展示和操作大量结构化...通过学习和实践这个"第一个jqGrid例子"，开发者可以掌握基本的表格展示、数据操作和用户交互，为进一步深入使用和定制jqGrid奠定基础。

    jqGrid demo （完整版）

    此 demo 是一个学习 jqGrid 的良好起点。通过分析代码和尝试修改，你可以深入了解 jqGrid 的工作原理，并提升你在网页数据管理方面的技能。 通过这个 jqGrid 完整版 demo，开发者不仅可以学习到 jqGrid 的基本用法...

    jqGrid中文文档.doc

    1. 解压缩 jqGrid 和 UI 主题的下载文件到一个临时文件夹。 2. 在 web 服务器上创建一个新的可访问的项目目录，例如 `myproject`。 3. 在 `myproject` 目录下创建 `js` 和 `css` 子目录。 4. 将 jqGrid 包中 `/css` ...

    jqGrid表格插件学习（一） 第一个Demo

    通过学习这个jqGrid的第一个Demo，你可以掌握基本的表格展示、数据操作和界面交互。随着对jqGrid更深入的理解，你会发现它能帮助你构建功能丰富的Web数据管理应用。参考博文中的示例代码，动手实践，将有助于更好地...

    JqGrid中文API文档

    JqGrid是一款强大的JavaScript数据网格组件，用于在Web应用...通过深入学习JqGrid中文API文档，开发者可以充分利用其强大功能，创建功能丰富的数据展示和管理界面。结合提供的示例代码，实践应用将变得更加直观和便捷。

    jqGrid5.5 版本

    1. 数据源支持：jqGrid5.5能够处理多种数据源，包括本地数组、JSON、XML、CSV以及AJAX请求。这使得它可以与各种后端数据存储无缝集成，如数据库或RESTful服务。 2. 表格功能：jqGrid提供丰富的表格样式和布局选项，...

    jquery.jqgrid最新版

    1. 基本HTML结构：在页面上创建一个表格元素，设置id属性，jqGrid会据此初始化表格。 ```html &lt;table id="jqGrid"&gt; &lt;div id="jqGridPager"&gt;&lt;/div&gt; ``` 2. 初始化jqGrid：通过JavaScript代码设置参数，调用jqGrid...

    jQgrid demo

    1. **数据加载与显示**：jQGrid 支持从服务器或本地数据源动态加载数据，并以表格形式展示。它可以处理 JSON、XML、CSV 等多种数据格式，适应不同后端接口的需求。 2. **分页**：jQGrid 提供了内置的分页功能，用户...

    jqgriddemo,样式漂亮，可以直接使用

    jqGrid是一款基于JavaScript的开源数据网格组件，它是jQuery库的一部分，用于创建交互式的、数据丰富的Web表格。jqGrid以其强大的数据管理能力、丰富的功能集和灵活的可定制性，深受开发者的喜爱。它允许用户进行...

    jqgrid +bootstrap4.0 直接使用

    通过深入研究这个示例，开发者可以学习到如何自定义列、设置数据操作、使用过滤和排序功能，以及如何将 jqGrid 与后端服务器进行通信。对于希望提升网页数据展示和管理能力的开发者而言，这是一个宝贵的资源。

    jqGrid5.X 官方全Demo下载

    本资源为 jqGrid5.X 的官方全Demo下载，包含中文文档和离线演示，用户可以在本地环境中运行和学习。 1. **jqGrid5.X 版本介绍** jqGrid5.X 是一个经过多次迭代和优化的版本，主要针对性能、用户体验和功能扩展进行...

    jqgrid 学习参考

    这些文件可以从官方网站或者其他可信源获取，或者在某些情况下，如这里的 "51CTO下载-JqGrid.chm"，可能是一个包含完整文档的 CHM 文件，这将是你学习 jqGrid 的宝贵资源。 jqGrid 的核心是通过 HTML 的 `&lt;table&gt;` ...

    jqGrid dome asp.net

    这个"jqGrid ASPNET_3_8_1_0"示例可能包含了一个简单的 ASP.NET Web Forms 或 MVC 项目，展示了如何设置 jqGrid，如何处理服务器端的数据请求，以及如何展示和编辑数据。通过研究这个示例，开发者可以学习到如何将 ...

    jqgrid4.6.rar

    1. **jQuery 基础**：jqGrid 是基于 jQuery 库构建的，因此理解和使用 jqGrid 需要先掌握 jQuery 的基础知识，如选择器、事件处理、DOM 操作等。 2. **jqGrid 安装与引入**：要使用 jqGrid，首先要在项目中引入 ...

    jqGrid 3.5源码+DEMO+DOC

    1. **jqGrid的基本概念** - 数据网格：jqGrid提供了一个可配置的、响应式的数据网格，用于显示和管理表格数据。 - jQuery插件：jqGrid是基于jQuery库的，利用jQuery的事件处理和DOM操作功能来实现其功能。 - 功能...

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