jqgrid学习-第一个实例-a3mao-iteye技术网站

jqgrid学习-第一个实例-a3mao-iteye技术网站
2011年05月17日
　　 1、html文件
　　 My First Grid html, body { margin: 0; padding: 0; font-size: 75%; } $(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} ); });
　　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