jgGrid基础入门

yeluowuhen

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

最近访客更多访客>>

txnet

xiaoyangok

zhangph739

bartontang

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JSP学习

jQuery CSS UI JSP json

前天自告奋勇先引入新的页面控件jqGrid 到项目中,终于有了用jsp及json数据来实现一个小的demo了，利用网上资料，原文地址是http://blog.csdn.net/shaoyadong/archive/2009/10/15/4674908.aspx，谢谢大侠。现在记下来过程。

1.下载jqGrid 3.6
地址： http://www.trirand.com/blog/?page_id=6
直接下载，不用选择其他

2.下载jquery UI , 只需要里面的一个文件夹。我用的也是jquery-ui-1.7.2.custom.zip
如原文作者所需只需要jquery-ui-1.7.2.custom.zip\development-bundle\themes\ui-lightness.
并且作者说除了jquery-ui-1.7.2.custom.css之外，其他的CSS他都删除掉，我的里面只有一个此css文件。
3.按照开发版本配置jqGrid.
a.在project的webroot下新建一个文件夹，其下建立js和css两个空文件夹.b.将解压后的jqGrid中的ui-jqgrid.css拷贝到上一步建立的css文件夹中，jqGrid的js文件夹下的所有东西整个拷入到新建立的js目录下，最后将jquery-ui-1.7.2.custom.zip中的ui-lightness拷入到新建的css目录下。配置后如前面引入资料所示。现在policeInformation.jsp的源码如下：

<%@page contentType="text/html; charset=UTF-8"%>
<!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>警员信息表</title>
<link rel="stylesheet" type="text/css" media="screen" href="../resources/jquery/css/ui-lightness/jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../resources/jquery/js/src/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../resources/jquery/js/src/css/jquery.searchFilter.css" />
<style>
html, body {
    margin: 0;
    padding: 0;
    font-size: 100%;
}
</style>
<script src="../resources/jquery/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="../resources/jquery/js/src/grid.loader.js" type="text/javascript"></script>
<script src="../resources/jquery/js/src/jqModal.js" type="text/javascript"></script>
<script src="../resources/jquery/js/src/jqDnR.js" type="text/javascript"></script>
</head>

<script type="text/javascript">
$(document).ready(function(){
 jQuery("#jsonmap").jqGrid({   
    url:'post.jsp',
  	datatype: 'json',
    colNames:['编号','姓名','密码','年龄','地址','出生日期'],
    colModel:[
       {name:'id',index:'id', width:90,sorttype:"int"},
       {name:'name',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"}  
     ],
     rowNum:10,
     rowList:[10,20,30],
     imgpath: 'themes/sand/images',
     pager: jQuery('#pjmap'),
     multiselect: false,
     sortname: 'id',
     viewrecords: true,
     sortorder: "desc",
  	 jsonReader: {
   		repeatitems : false
  	 },
  	caption: "jqGrid test", 
  	height: 220
 	}).navGrid('#pjmap',{edit:false,add:false,del:false});
 });
 </script>
<body>
<div style="font-size:12px;">
    This example show how we can load array data.
    In this case we use a addRowData method.
</div>
<br/>
  <table id="jsonmap" class="scroll"></table> 
  <div id="pjmap" class="scroll"></div> 
  <table id="csTable">
  </table>
  </body> 
</html>

，其中所引入的post.jsp如下：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ page import="dao.Student"%>
<%
// js传过来的参数列表：
// page:页数
// rp:每页显示多少条
// sortname：排序的字段名称
// sortorder: 排序的方向；比如：asc，desc；
// query : 查询的条件
// qtype ：查询的类型

// 读取数据
List<Student> custList = new ArrayList<Student>();//定义一个list
	for(int i=0;i<3;i++){
		Student student = new Student("王三","123",20+i,"USA");
		student.setId(i);
		custList.add(student);
	}
	String a ="";//用来拼接数据
	int list_size =custList.size();

	if(list_size>0)
	{
		for(int i = 0; i < list_size; i++)
		{
			Student student = custList.get(i);
			Date birth = student.getDataBirth();
			int year = birth.getYear()+1900;
			int month = birth.getMonth()+1;
			int day = birth.getDay();
			a =  a+ "{id:'"+student.getId()+"',name:'"+student.getUsername()+"',password:'"+student.getPassword()+"',age:'"+student.getAge()+"',address:'"+student.getAddress()+"',time:'"+year+"-"+month+"-"+day+"'},";	 
		}
	}
	else
	{
		a = ",";
	}
	a =  a.substring(0,a.length()-1);
	out.println("{");
	out.println("page: "+1+",");
	out.println("total: "+3+",");
	out.println("rows: [");		 
	out.println(a);
	out.println("]}");
%>

，其中，Student.java只是个简单的model,源码如下：

package dao;

import java.util.*;
import java.text.SimpleDateFormat;

/**
 * Student entity.
 * 
 * @author MyEclipse Persistence Tools
 */

public class Student implements java.io.Serializable {

	// Fields

	private Integer id;

	private String username;

	private String password;

	private Integer age;

	private String address;

	private Date dataBirth;

	// Constructors

	/** default constructor */
	public Student() {
	}

	/** full constructor */
	public Student(String username, String password, Integer age, String address) {
		this.username = username;
		this.password = password;
		this.age = age;
		this.address = address;
		SimpleDateFormat bartDateFormat = new SimpleDateFormat("yyyy-MM-DD");
		String dateStringToParse = "1958-10-17";
		try{
			Date date = bartDateFormat.parse(dateStringToParse); 
			this.dataBirth =  date; 
		}catch(Exception e){
			e.printStackTrace();
		}
	}

	// Property accessors

	public Integer getId() {
		return this.id;
	}

	public void setId(Integer id) {
		this.id = id;
	}

	public String getUsername() {
		return this.username;
	}

	public void setUsername(String username) {
		this.username = username;
	}

	public String getPassword() {
		return this.password;
	}

	public void setPassword(String password) {
		this.password = password;
	}

	public Integer getAge() {
		return this.age;
	}

	public void setAge(Integer age) {
		this.age = age;
	}

	public String getAddress() {
		return this.address;
	}

	public void setAddress(String address) {
		this.address = address;
	}

	public Date getDataBirth() {
		return dataBirth;
	}

	public void setDataBirth(Date dataBirth) {
		this.dataBirth = dataBirth;
	}

}

，值得一提的是，最后的运行中FireBug报出错误：jQuery("#jsonmap").jqGrid不是一个function，我觉得应该是js文件配置中出现问题，或者是版本不匹配，结果，在js/src目录下grid.loader.js出现bug,在function jqGridInclude()中，源码为var pathtojsfiles = "js/"; 作者已标出此处需要修改，将它改为正确的路径： var pathtojsfiles = "../resources/jquery/js/src/";终于出现结果。
2.学习了一种新的东西，昨天很郁闷，今天稍感充实，自己还是经验太少呢，比如配置环境问题，必须先找到合适的资料，参照指导书一步步来配置，并且需要demo,juery及插件jqGrid,jquery-ui完全匹配。回顾两天所为，昨天一直在网上找demo,居然没有找到合适的，全是php的（关键字还是很重要），然后找到servlet的之后，并没有想到去看作者之前记录有关如何配置，可能是太过灰心吧。加油！接下来要将此jqGrid好好研究一番了，很多属性还不甚明了，而且要真正应用到我负责的项目这块了。

分享到：

有关数据库的几道题 | JS的多条件应用

2009-11-13 21:11
浏览 3652
评论(0)
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论