第一个jqGrid的demo

来源：互联网发布：c多线程socket编程编辑：程序博客网时间：2024/04/27 23:50

1 action

public ActionForward search(ActionMapping mapping, ActionFormform,
   HttpServletRequestrequest, HttpServletResponse response)
   throwsException {



final Integer pageSize = 100; // get how manyrows we want to have into the grid
  final Integer pageIndex = newInteger(GenericValidator.isBlankOrNull(request.getParameter("page"))? 0
    :(Integer.parseInt(request.getParameter("page")) - 1)); // get therequested page

  String sidx = "id"; // getindex row - i.e. user click to sort
  String sord = "asc"; // get thedirection

           DemoStudyMgr demoStudyMgr = this.getDemoStudyService(request);

  Map<String,String> queryMap = populateParams(request);
  GridPager<com.boco.eoms.portlet.demoStudy.model.ImageViewer2>images = demoStudyMgr.getImageList();

  String json =request.getParameter("type");
  if(json != null&&json.equalsIgnoreCase("json")){
   /////////////
   System.out.print("-------json----");
   try {
    JSONObjectobj = JSONObject.fromObject(images);
    JSONUtil.print(response,obj.toString());
   } catch(Exception e) {
    e.printStackTrace();
   }
   returnnull;

  }


  returnmapping.findForward("demoList");
}

取得的json 为{"page":1,"records":1,

"rows":[{"clickto":"gfgfg","id":"4028bda5283dbc9a01283de962bd0002","imageName":"dfgdg","src":"kjjkjk"},{"clickto":"5456464","id":"43152FEEA87A4DD0A25D18714B46ABAF","imageName":"mu","src":"dfdff"}],

"total":1}

Title: jqGrid 分页工具类

package com.boco.eoms.portal.util;

import java.io.Serializable;
import java.util.List;

public class GridPager<T> implementsSerializable {
private static final long serialVersionUID =1L;

private int page;

private int total;

private int records;

private List<T>rows;

public GridPager(int page, int total, intrecords, List<T> rows) {
  super();
  this.page = page;
  this.total = total;
  this.records = records;
  this.rows = rows;
}

public int getPage() {
return page;
}

public int getTotal() {
return total;
}

public int getRecords() {
return records;
}

public List<T>getRows() {
return rows;
}

public void setPage(int page) {
this.page = page;
}

public void setTotal(int total) {
this.total = total;
}

public void setRecords(int records) {
this.records = records;
}

public voidsetRows(List<T> rows) {
this.rows = rows;
}
}

2页面：

<%@ page language="java" pageEncoding="UTF-8"contentType="text/html;charset=utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"prefix="c" %>
<c:set var="app" scope="page"value="${pageContext.request.contextPath}" />
<html>
<head>
<title>图片管理</title>
<meta http-equiv="Cache-Control"content="no-store"/>
<meta http-equiv="Pragma"content="no-cache"/>
<meta http-equiv="Expires"content="0"/>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
<styletype="text/css">
body,td,input,select {
margin: 0px;
font-size: 12px;
}
.ui-jqgrid-title {
font-size:14px;
}
label {
display:inline-block;
width:100px;
}
legend {
padding:0.5em;
}
fieldset fieldset label {
display:block;
}

</style>
<link rel="stylesheet"type="text/css" media="screen"href="${app}/css/theme/sunny/jquery-ui.css" />
<link rel="stylesheet"type="text/css" media="screen" href="${app}/css/ui.jqgrid.css"/>
<link rel="stylesheet"type="text/css" href="${app}/css/weebox.css"/>
<link rel="stylesheet"type="text/css" href="${app}/css/form.css" />
<link rel="stylesheet"type="text/css" href="${app}/css/jquery.jgrowl.css"/>

<script type="text/javascript"src="${app}/js/jquery/jquery.js"></script>
<script type="text/javascript"src="${app}/js/jquery/jquery.ui.js"></script>
<script type="text/javascript"src="${app}/js/jquery/jquery.form.js"></script>
<script type="text/javascript"src="${app}/js/jquery/grid/grid.locale-cn.js"></script>
<script type="text/javascript"src="${app}/js/jquery/grid/jquery.jqGrid.min.js"></script>
<script type="text/javascript"src="${app}/js/jquery/bgiframe.js"></script>
<script type="text/javascript"src="${app}/js/jquery/weebox.js"></script>
<script type="text/javascript"src="${app}/js/jquery/jquery.jgrowl.js"></script>
<script type="text/javascript"src="${app}/js/jquery/jquery.validate.js"></script>
<script type="text/javascript"src="${app}/js/jquery/messages_cn.js"></script>


<scripttype="text/javascript">

var selectedRow;
$(function(){
  jQuery("#demoList").jqGrid({
  scroll:1,
  url:'${app}/demoStudy/demoStudy.do?method=search&type=json',
  datatype:"json",
  hidegrid:false, // 禁止隐藏表格
  autowidth:true,
  height:260,
   colNames:['ID','图片名', '路径','链接'], //列显示名称，是一个数组对象。
   colModel:[                                          // 对显示列属性的设置，是一个数组对象。常用到的属性：name 列显示的名称；index传到服务器端用来排序用的列名称；width 列宽度；align 对齐方式；sortable 是否可以排序
    {name:'id',index:'id',width:40},
    {name:'imageName',index:'imageName',width:40},
    {name:'src',index:'src',width:80},
    {name:'clickto',index:'clickto',width:80}
  ],
   rowNum:100,                                  //在grid上显示记录条数，这个参数是要被传递到后台
  imgpath:'css/theme/redmond/images',
  mtype:"POST",                              //ajax提交方式。POST或者GET，默认GET
  jsonReader:{
   repeatitems :false,
   id: "0"
  },
  rownumbers:true,
  rownumWidth:40,
  gridview:true,
  pager:'#pager',
  sortname:'imageName',                       //默认的排序列。可以是列名称或者是一个数字，这个参数会被提交到后台
  viewrecords:true,                         //定义是否要显示总记录数
  sortorder:"asc",
  caption:"图片管理"                    //表格名称

});

//alert(jQuery("#demoList").getGridParam('colModel'));
// alert(jQuery("#demoList").getUserData() + ":" +jQuery("#demoList").getUserDataItem( "imageName" ));

//alert(jQuery("#demoList").getGridParam('colModel')[0]);

//alert(jQuery("#demoList").getCell(0,'imageName'));

//alert(jQuery("#demoList").getCol('imageName','false','json'));
})

</script>
</head>
<body>

<tableid="demoList"></table>
<divid="pager"></div>

</body>
</html>