jqgrid

xgcai

浏览: 8652 次
性别:
来自: 惠州

最近访客更多访客>>

t181

woodding2008

InJavaWeTrust

刘朝雪

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

js插件

工作的潜在需要，闲时看看jqgrid插件，记录一下jqgrid的基本应用。

http://jqgrid.com/ jqgrid的链接。

jqgrid 属性http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options

一、jqGrid 属性：

1、datatype：
	local 本地
	json json数据格式
	jsonstring 
	xml 
	xmlstring 
	javascript 
	function 
	clientSide 

2、width，height：列表宽度/高度
	
3、colNames（字符串数组，如：['AA','BB']）：

4：colModel 列模式
	{name:'', index:'', width:50, sorttype:'int',align:'right', sortable:false}
	name:列名
	sorttype：排序类型 如：int、float、date等
	align 对齐方式： left、right。
	sortable 是否可排序：true 、false

5、multiselect 是否可多选 true、false

6、caption 列表标题

7、url 数据请求连接

8、rowNum 显示行数

9、rowList 列表显示行数选择列表

10、viewrecords: true,false  是否显示记录总数

11、onSelectRow：选中列表记录操作
	onSelectRow:function(ids) {
	
	}

12、direction 列表文字的排序方向


二、jqgrid 方法：
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods

######################## 说明：########################
<table id="list"></table>
<div id="pager"></div>
########################################################


####################  读取列表属性或值  ################
1、获取选中记录的行号：
	var row = jQuery("#list").jqGrid('getGridParam','selrow');

2、根据行号返回选中行的数据
	var rowData = jQuery("#list").jqGrid('getRowData', row);
	rowData.***	读取选中记录的属性值“***”未行属性,如rowData.id,返回行属性id的值

3、根据行号删除列表数据
	var su=jQuery("#list").jqGrid('delRowData', 12);	//删除行号未12的记录

4、新增记录
	var datarow = {id:"99",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"};
	var su=jQuery("#list").jqGrid('addRowData', 99, datarow);	//99未知含义

5、读取列表请求数据的url
	jQuery('#list').jqGrid('getGridParam', 'url'))

6、返回列表的默认排序列
	jQuery('#list').jqGrid('getGridParam', 'sortname')

7、返回列表默认的排序方式
	jQuery('#list')jqGrid('getGridParam', 'sortorder')

8、返回列表选中记录
	jQuery('#list')jqGrid('getGridParam','selrow')

9、返回列表当前页序号：
	jQuery('#list')jqGrid('getGridParam','page'))

10、返回列表选中记录数 
	jQuery('#list').jqGrid('getGridParam','rowNum')

11、返回选中记录数据类型：
	jQuery('#list').jqGrid('getGridParam','datatype')

12、返回列表的记录数：
	jQuery('#list').jqGrid('getGridParam','records')

####################  设置列表属性或值  ################
说明：读取相应的改为set**就能够设置列表属性或值.

13、选中某一行记录
	jQuery("#list2").jqGrid('setSelection',"1");	//选中该列表第一行数据



三、ColModel API
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options

建立新的javaweb工程，添加json相关的 jar包。

附上代码，共以后查考。

Servlet生产json数据格式：

/**
 * 
 */
package org.rico.demo.jqgrid.demo.dataload;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

/**
 * @author rico
 * jqgrid 初始列表数据-json数据格式
 */
public class DataLoadByJSon extends HttpServlet {
	private static final long serialVersionUID = 5546844758953964549L;

	/**
	 * 说明：网上借来的数据
	 * 链接：http://www.cnblogs.com/jancyxue/archive/2011/08/17/2141676.html
	 * 
	 * 
     * jqGrid默认期望返回的json对象格式要求如下：
     * {"page":"1","total":"2","records":"13",
     * "rows":[
     *                 {id:"1",cell:["1","jancyxue","男","jancyxue@163.com","410958040","江西余干"]},
     *                 {id:"2",cell:["2","linda","女","linda@163.com","111111111","湖南"]},
     *                 {id:"3",cell:["3","jason","男","jason@sina.com","222222222","湖北"]},
     *                 {id:"4",cell:["4","lucy","女","lucy@sina.com","33333333","北京"]}
     *         ]
     * }
     * 当然，在js中，可以通过jqGrid的jsonReader属性来修改默认格式
     * 我们可以在jsonReader中定义repeatitems : false。这样，可以使用下面的数据格式（为了防止出错，我们在写colModel的时候如果实在不会就对应着下面的每个字段写，就不容易出错了：
     * "rows":[
     *                 {id:"1",engName:"jancyxue",gender:" 男",email:"jancyxue@163.com",QQ:"410958040",address:"江西余干"]},
     *                 {id:"2",engName:"linda",gender:" 女",email:"linda@163.com",QQ:"111111111","address:湖南"]},
     *                 {id:"3",engName:"jason",gender:" 男",email:"jason@sina.com",QQ:"222222222",address:"湖北"]},
     *                 {id:"4",engName:"lucy",gender:" 女",email:"lucy@sina.com",QQ:"33333333",address:"北京"]}
     *         ]
     * 就像这样colModel:[{name:'id',index:'id',width:55},{name:'engName',index:'engName',width:100},{name:'gender',index:'gender',width:180, sortable:false},{name:'email',index:'email',width:180},
             {name:'QQ',index:'QQ',width:280},{name:'address',index:'address',width:280}]
     *
     */
	
	@Override
	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//模拟数据
		JSONObject jo = new JSONObject();
		Integer rows = Integer.valueOf(request.getParameter("rows"));
		Integer page = Integer.valueOf(request.getParameter("page"));
		System.out.println("####rows: " + rows + "####page: " + page);
		
		Integer totalSize = 100;
		jo.put("page", page);		//当前页
		
		Integer totalPages = totalSize%rows==0?totalSize/rows:(totalSize/rows+1);
		jo.put("total", totalPages);		//总页数
		jo.put("records", totalSize);	//总记录数
		
		JSONArray ja = new JSONArray();
		JSONObject rowJO = null;
		
		int index = (page-1)*rows;
		int lastIndex = page*rows;
		if(lastIndex > 100) {
			lastIndex = 100;
		}
		for(int i=1+index; i<=lastIndex; i++) {
			rowJO = new JSONObject();
			rowJO.put("id", i + "");
			rowJO.put("name", "X" + i);
			rowJO.put("sex", "XX" + i);
			rowJO.put("phone", "XXX" + i);
			rowJO.put("email", "XXXX@126.com" + i);
			
			ja.add(rowJO);
		}
		
		jo.put("rows", ja);
		System.out.println(jo.toString());
		
		response.setCharacterEncoding("UTF-8");
		PrintWriter pw = response.getWriter();
		pw.write(jo.toString());
		pw.flush();
		pw.close();
	}

	@Override
	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		this.doGet(request, response);
	}
}

/**
 * 
 */
package org.rico.demo.jqgrid.demo.dataload;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * @author rico
 * 导航到jqgrid载入数据页面
 */
public class DataLoadIndexServlet extends HttpServlet {
	private static final long serialVersionUID = 7226355428393263783L;

	@Override
	public void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		System.out.println("导航到jqgrid载入数据页面");
		req.getRequestDispatcher("/jqgrid/dataLoad/dataload_json.jsp").forward(req, resp);
	}

	@Override
	public void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		this.doGet(req, resp);
	}

}

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jqgrid 载入数据</title>
<link rel="stylesheet" type="text/css" media="screen" href="${pageContext.request.contextPath}/commons/css/jquery-ui-1.8.20.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="${pageContext.request.contextPath}/commons/css/ui.jqgrid.css" />

<script type="text/javascript" src="${pageContext.request.contextPath}/commons/js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/commons/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/commons/js/i18n/grid.locale-cn.js"></script>
<style type="text/css">
ul li {
	float: left; margin-left: 15px;
	font-size: 8pt;
}
</style>
</head>
<body>
	<div style="height: 50px;">
		<ul>
			<li><a href="###" onclick="getSelectedRowData();">读取选中记录</a></li>
			<li><a href="###" onclick="deleteRow();">删除选中行</a></li>
			<li><a href="###" onclick="updateRow();">更新第一行数据</a></li>
			<li><a href="###" onclick="addRow();">新增数据</a></li>
			<li><a href="###" onclick="getSeletedRowIds();">获取选中记录的id</a></li>
			<li><a href="###" onclick="setSelectedRow();">选中第一行记录</a></li>
		</ul>
	</div>
	<table id="list2"></table>
	<div id="pager2"></div>
</body>

<script type="text/javascript">
jQuery("#list2").jqGrid({
   	url:'${pageContext.request.contextPath}/dataLoadByJSon',
	datatype: "json",
    colNames:['id','name', 'sex', 'phone','email'],
   	colModel:[
   		{name:'id',index:'id', width:55},
   		{name:'name',index:'name', width:100},
   		{name:'sex',index:'sex', width:80, align:"right"},
   		{name:'phone',index:'phone', width:80, align:"right"},		
   		{name:'email',index:'email', width:80,align:"right"}		
   	],
   	jsonReader:{
        page:"page",
        total:"total",
        repeatitems:false
    },
    pager:jQuery('#pager1'),
   	rowNum:10,
   	rowList:[10,20,30],
   	pager: '#pager2',
   	sortname: 'id',
    viewrecords: true,	//是否显示记录总数
    sortorder: "desc",
    width:900,
    height:'400',
    //recordpos: 'left',
    multiselect: true,
    caption:"JSON Example"
});
jQuery("#list2").jqGrid('navGrid','#pager2',{edit:false, add:false, del:false});


/**获取选中记录数据*/
function getSelectedRowData() {
	var row = jQuery("#list2").jqGrid('getGridParam','selrow');
	if(row) {
		var selectedRow = jQuery("#list2").jqGrid('getRowData',row);
		alert("###id="+selectedRow.id+" ###name="+selectedRow.name+"...");
	} else { 
		alert("未选取任何记录.");
	}
}

/**删除选中行*/
function deleteRow() {
	var row = jQuery("#list2").jqGrid('getGridParam','selrow');
	if(!row || row=='') {
		alert("未选取任何记录.");return;
	}
	
	var delRow = jQuery("#list2").jqGrid('delRowData', row);
	if(delRow)
		 alert("未实现相关的删除操作 ."); 
}

/**更新第一行数据*/
function updateRow() {
	var rowData = jQuery("#list2").jqGrid('setRowData', 1, {id:"X!", name:"ricoXX", sex:"manXX"});
	if(rowData) 
		alert("更新第一行数据成功."); 
}

/**新增数据*/
function addRow() {
	var datarow = {id:"101",name:"rio",sex:"man",phone:"199876****",email:"XXX.126.com"};
	var su=jQuery("#list2").jqGrid('addRowData', 101, datarow);
	if(su) 
		alert("新增数据成功。"); 
	else 
		alert("新增数据发生错误。");
}

/**获取选中记录的id*/
function getSeletedRowIds() {
	var ids = jQuery("#list2").jqGrid('getGridParam', 'selarrrow');
	alert(ids);
}

/**选中第一行记录*/
function setSelectedRow() {
	jQuery("#list2").jqGrid('setSelection',"1");
}

</script>
</html>

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
	<display-name>jqgridDemo</display-name>
	<welcome-file-list>
		<welcome-file>index.html</welcome-file>
		<welcome-file>index.htm</welcome-file>
		<welcome-file>index.jsp</welcome-file>
		<welcome-file>default.html</welcome-file>
		<welcome-file>default.htm</welcome-file>
		<welcome-file>default.jsp</welcome-file>
	</welcome-file-list>
	
	
	<!-- 导航到jqgrid载入数据页面-->
	<servlet>
		<servlet-name>DataLoadIndexServlet</servlet-name>
		<servlet-class>org.rico.demo.jqgrid.demo.dataload.DataLoadIndexServlet</servlet-class>
	</servlet>
	
	<servlet-mapping>
		<servlet-name>DataLoadIndexServlet</servlet-name>
		<url-pattern>/dataLoadIndexServlet</url-pattern>
	</servlet-mapping>
	
	<!-- jqgrid载入数据-json格式 -->
	<servlet>
		<servlet-name>DataLoadByJSon</servlet-name>
		<servlet-class>org.rico.demo.jqgrid.demo.dataload.DataLoadByJSon</servlet-class>
	</servlet>
	
	<servlet-mapping>
		<servlet-name>DataLoadByJSon</servlet-name>
		<url-pattern>/dataLoadByJSon</url-pattern>
	</servlet-mapping>
	
</web-app>

http://localhost:8080/jqgridDemo/dataLoadIndexServlet 查看jqgrid列表的一些简单操作。

分享到：