jqgrid jqgrid 前后端交互实例

首先，jqGrid是一个显示网格数据的jQuery插件。通过使用jqGrid，可以轻松实现首页和后台数据的ajax异步通信。

一、jqGrid的特点

基于jquery UI主题，开发者可以根据客户需求改变不同的主题。

兼容目前所有流行的网页浏览器。

Ajax分页可以控制每页显示的记录数。

支持XML、JSON、数组数据源。

提供丰富的选项配置和方法事件接口。

支持表格排序、拖动列和隐藏列。

支持滚动加载数据。

支持实时编辑和保存数据内容。

支持子表和树表。

支持多种语言。

目前免费。

二、jqGrid的用法

首先你需要在jqGrid官网下载最新版本的包。下载地址是:http://www.trirand.com/blog/? page _ id = 6

放在java项目的jquery目录下，如下图

在jsp文件引用中使用

具体用法请参考官网中文网:http://blog.mn886.net/jqGrid/有基本用法和例子

基本示例前端jsp文件:有一个充值表:cy_cz需要显示字段data_zd:id名称KH...通过url onSearch传递参数需要查询条件，比如按姓名卡号KH模糊查询

& lt% @ page language = " Java " import = " Java . util . * " Pageencoding = " utf-8 " % & gt；

& lt“% @”taglib uri = " http://Java . sun . com/JSP/jstl/core " prefix = " c " % & gt；

& lt“% @”taglib uri = " http://Java . sun . com/JSP/jstl/fmt " prefix = " fmt " % & gt；

& lt%

string URL _ path = request . GetContext path()；

string URL = request . getscheme()+":///+request . getservername()+":+request . getserverport()+URL _ path+"/；

pageContext.setAttribute("url "，URL)；

% & gt

& lt！DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN " " http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-Transitional . DTD " >;

& lthtml xmlns = " http://www . w3 . org/1999/XHTML " >

& lthead>。

& ltmeta name = " viewport " content = " width = device-width，height=device-width，initial-scale = 1 user-scalable = 0 "/>

& ltsrc="<。%=url%>。/page/jquery/jqgrid . xmhj . js " type = " text/Java " & gt；& lt/>。

& lt% @ include file = "/page/include/Jqmobile . JSP " % & gt；

& lttitle>。形式

& lt>。

//传递给服务器的参数

var post_data={

表名:“cy_cz”，

data _ ZD:“id，name，KH，jytype，jyrq，dealtime，ssje，oldje，newje，LSH，龚浩，bak”//显示数据

//data _ name:“id，empid，name，checktime，type，JH，bak”，//显示数据

Sel _ ZD:“t . *，e .姓名，e .龚浩”，//查询数据

页码:“1”//默认页码

行:“10”，//每页记录数

总计:0，//默认为0

sidx:“JyRQ”，//初始化时排序的字段

sord:“desc”//排序方式，可选desc，asc

代码:“string，string，string”/>