jqgrid 实战讲解,前端jqgrid,后端strust2

1、数据的加载

我的本地项目为SSH框架搭建的服务器端,由于Struts2 本身支持json的数据传输,所以我就以strust2为例为大家介绍,有不懂strust2的请自学后再来度这篇文章

1、jqgrid向action发送数据请求:


 jQuery(grid_selector).jqGrid({
 	url: "http://localhost/GW/jcxxAction!ryxx_index_r.action", //后台地址action  
 	datatype: "json", //返回的json格式数据  
 	height: 450,
 	jsonReader: {
 		root: "rows", //rows 对应实际的结果集合    
 		page: "page", //page 对应当前的页码  
 		total: "total", //total 对应一个多少页  
 		records: "records", //records 对应一共多少条信息  
 		repeatitems: false, //采用colModel模式加载数据信息,以colModel每一列当中的name值自动来匹配rows当中的key  
 		id: "jlbh" //行主键为哪个字段  
 	},
 	colNames: [' ', '编号', '部门名称', '职位', '名字', '邮箱', '账号', '其他', '部门编号'], //table 的title 字段名字设置  
 	colModel: [{
 			name: 'myac',
 			index: '',
 			width: 80,
 			fixed: true,
 			sortable: false,
 			resize: false,
 			formatter: 'actions',
 			formatoptions: {
 				keys: true,
 				delOptions: {
 					recreateForm: true,
 					beforeShowForm: beforeDeleteCallback
 				},
 			}
 		},
 		//返回的结果集类似如下样式:[{jlbh:'1',org:{jlbh:'34',name:'renshibu'},job:'xxx',trunname:'zzzz'},{jlbh:'1',org:{jlbh:'34',name:'renshibu'},job:'xxx',trunname:'zzzz'}]  
 		{
 			name: 'jlbh',
 			index: 'jlbh',
 			width: 60,
 			sorttype: "int",
 			editable: true,
 			hidden: true
 		},
 		{
 			name: 'org.name',
 			index: 'org.name',
 			width: 90,
 			sortable: true,
 			editable: true,
 			edittype: "select",
 			editoptions: {
 				value: getOptionValue()
 			}
 		},
 		{
 			name: 'job',
 			index: 'job',
 			width: 150,
 			editable: true,
 			editoptions: {
 				size: "20",
 				maxlength: "30"
 			}
 		},
 		{
 			name: 'trunname',
 			index: 'trunname',
 			width: 150,
 			editable: true
 		},
 		{
 			name: 'email',
 			index: 'email',
 			width: 90,
 			editable: true,
 			edittype: "checkbox",
 			editoptions: {
 				value: "男:女"
 			},
 			unformat: aceSwitch
 		},
 		{
 			name: 'username',
 			index: 'username',
 			width: 150,
 			sortable: false,
 			editable: true,
 			search: true,
 			edittype: "textarea",
 			editoptions: {
 				rows: "2",
 				cols: "10"
 			}
 		},
 		{
 			name: 'id',
 			index: 'id',
 			width: 150,
 			sortable: false,
 			editable: true,
 			edittype: "textarea",
 			editoptions: {
 				rows: "2",
 				cols: "10"
 			}
 		},
 		{
 			name: 'orgId'
 		},
 	],
 	viewrecords: true,
 	rowNum: 5, //每页显示多少条,会传给后台的  
 	rowList: [5, 10, 20],
 	pager: pager_selector,
 	altRows: true,

 	multiselect: true,
 	multiboxonly: true,
 	loadComplete: function() {
 		var table = this;
 		setTimeout(function() {
 			styleCheckbox(table);
 			updateActionIcons(table);
 			updatePagerIcons(table);
 			enableTooltips(table);
 		}, 0);
 	},
 	success: function(data) {
 		alert(3);
 	},
 	editurl: "http://localhost/GW/jcxxAction!hhString.action", //nothing is saved  
 	caption: "jqGrid with inline editing"
 });

                                               

2、action方法:

	public String ryxx_index_r(){
		System.out.println(page);  //page 为页面参数,action 中已经有set,get方法
		System.out.println(rows);  //rows 每页显示多少行数,前端请求给后台的,也已经有了set,get方法
		//System.out.println("查询条件:"+filters);
		userList = userManager.searchUsers(rows,page-1); //查询用户列表,通过rows,page来进行hibernate的分页查询,这里不详说
		List l = userManager.searchUsers();//总的结果集查询方法
		map = new HashMap<String, Object>();  //数据结果容器,将所有的数据封装
		int pages = l.size()%rows==0?l.size()/rows:l.size()/rows+1;  //计算总的页数
		System.out.println(pages);
		System.out.println(userList.size());
		map.put("rows", userList);    //存放实际的数据集合,与前端jsonReader当中root的参数名要相同
		map.put("page", page);    //存放当前页码
		map.put("records",l.size());  //存放总条数
		map.put("total", pages);  //存放总页数
		return "ryxx_index_r";
	}

3、strust.xml 设置:

	<result name="ryxx_index_r" type="json"><param name="root">map</param></result>


阅读更多
文章标签: jQuery Datatable 分页
个人分类: jqgrid
想对作者说点什么? 我来说一句

四、jq前端分页插件jqgrid

jqgrid

lze693 lze693

2017-03-24 17:20:46

阅读数:1964

没有更多推荐了,返回首页

不良信息举报

jqgrid 实战讲解,前端jqgrid,后端strust2

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭