Jqgrid简单例子

最新推荐文章于 2024-09-19 16:28:34 发布

weixin_34224941

最新推荐文章于 2024-09-19 16:28:34 发布

阅读量91

点赞数

文章标签： json java python

原文链接：https://my.oschina.net/firnice/blog/77310

版权

2019独角兽企业重金招聘Python工程师标准>>>

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;
	}

}