Jqgrid简单例子
Jsp
<script type="text/javascript">
//初始化
$(function(){
//jQGrid列表
jQuery("#list").jqGrid({
url:'<%=basePath%>createGrid.action',
datatype: "json",
mtype: 'POST',
height: 240,
autowidth: true,
altRows:true,//隔行变色
altclass:'ui-widget-content-altclass',//隔行变色样式
colNames:['id','name','operation'],
colModel:[
{name:'id',key:true,index:'id',hidden:true},//如果需要对行操作,则选择一个主键 key:true
{name:'name',index:'name',sortable:false},//如果需要点击表头排序 则sortable:false
{name:'act',index:'act',width:200,sortable:false,title:false,align:"center" ,sortable:false}
],
gridComplete: function(){ //列表生成后,给某一列绑定操作 例如删除操作
var ids = $("#list").jqGrid('getDataIDs');
for(var i=0;i < ids.length;i++){
showInfo = "<a href='##' onclick=\"showInfo('"+ids[i]+"');\">"+$("#list").jqGrid('getRowData',ids[i]).id+"</a>";
$("#list").jqGrid('setRowData',ids[i],{act:showInfo});
}
},
postData: { //传递的数据，定义在form中
//查询所用
'searchId': function() { return $("#searchId").val(); },
'searchName': function() { return $("#searchName").val(); }
},
shrinkToFit:true,
rowNum:10,//初始化时每一页显示的个数
rowList:[10,20,30],//每一页能显示的个数
jsonReader:{
root:"listJson", // 从服务端返回的实际数据，名字随意起，但是在Action类中必须有与之匹配的属性
repeatitems : false
},
rownumbers: true,
pager: '#pager_List',//如果不需要左下角的 自带的查询 刷新功能 就不用添加在最后一行的 jqGrid('navGrid','#pager_List'...
sortname: 'id',
viewrecords: true,
sortorder: "desc",
multiselect: true
caption: "jQGrid列表"
});
jQuery("#list").jqGrid('navGrid','#',{add:false,edit:false,del:false});
}
</script>
<body>
<table id="list"></table><!-- 列表 -->
<div id="pager_List"></div><!-- 分页组件 -->
</body>
Struts.xml
<action name="createGrid" class="listAction" method="geneTranGrid"> <result name="success" type="json"> <param name="includeProperties"><!-- 包含在includeProperties的属性可以被序列化为JSON格式，可以被jqgrid接收 --> ^listJson\[\d+\]\.\w+, rows, page, total, records </param> <param name="noCache">true</param><!-- 禁止浏览器缓存 --> <param name="ignoreHierarchy">false</param><!-- 序列化List --> </result> </action>
Java
/**
* JQGrid Action
*
* @author firnice
* @class
* @date 2012-9-7
*/
public class ListAction extends ActionSupport {
// 每页中显示记录的行数
private Integer rows = 0;
// 当前页码
private Integer page = 0;
// 总页数
private Integer total = 0;
// 总记录数
private Integer records = 0;
// 列表 名称与struts.xml对应 与jqgrid配置里jsonReader的root属性对应
private List<listDto> listJson;
// 查询变量
private listDto searchDto;
/**
* JQGrid列表 函数名与struts.xml对应
*
* @author firnice
* @return
* @date 2012-9-7
*/
public String geneTranGrid() {
try {
// 总记录数
records = Long.valueOf(
this.getBusinessFacade().findListCount(this.searchDto))
.intValue();
// 从第几条开始查询
int from = rows * (page - 1);
if (from >= records && page != 1) {
page = page - 1;
from = rows * (page - 1);
}
this.searchDto.setFirstRow(String.valueOf(from));
this.searchDto.setEndRow(String.valueOf(rows));
// 从数据库取得jqgrid原始数据
// 总页数
total = (int) Math.ceil((double) records / (double) rows);
this.listJson = this.getBusinessFacade().findList(this.searchDto);
} catch (Exception e) {
e.printStackTrace();
}
return SUCCESS;
}
}