前端框架学习-jqgrid 学习笔记

1，使用jqgrid先要导入开发包

文章图片

2，在jsp页面里面定义grid的容器

table 是用来存放数据，div用来存放分页的栏目（存放数据用一个div标签也是可以的）
3，编写js脚本
初始化grid:

grid = $("#jqGridId").jqGrid({ url : "/basic/userAction!findAll.action",//获取数据的action datatype : "json", mtype : "POST", height : 420,autowidth : true, colNames : [ '用户名ID', '用户名', '联系电话', '邮箱', '地址' ], colModel : [ { name : 'userId',//对应传递数据的字段名，也就是说后台需要一个userId字段来接受参数 index : 'userId',//用来排序的字段名，一般设置成一样的 width : '20%', align : 'center' }, { name : 'userName', index : 'userName', width : '15%', align : 'center' }, { name : 'phone', index : 'phone', width : '20%', align : "center" }, { name : 'email', index : 'email', width : '35%', align : "left", }, { name : 'address', index : 'address', width : '10%', align : "center", } ], rowNum : 5,// 显示多少条数据，如果不写的话默认是20条数据 rowList : [ 5, 10, 15 ],//显示每页可以显示的数据条数 rownumbers : true,//是否显示grid的行号 multiselect : true, // 多选框 multiboxonly : true,// 直接点击行的话只能选中一条 prmNames : {//向后台传递的参数 "page" : "currentPage",//当前页 "rows" : "pageSize",//每一页的数据量 }, viewrecords : true,//显示总共多少数据 jsonReader : {//后台返回的json数据 repeatitems : false, root : "page.object", page : "page.currentPage", records : "page.records", total : "page.total" }, onSelectAll : function(rowIds,status){ //console.log(rowIds + status); //gridSelected(rowIds,status); }, onSelectRow : function(rowId,status){//勾选事件 //console.log(rowId + status); //gridSelected([rowId],status); }, pager : "pager"//分页栏目，对应jsp中的div });

写上了这些信息以后，前端的基本工作就好了。下面的后台的处理，后台主要是一个Page对象

//Page的主要字段 //起始数据 protected int start=1; //每页大小 protected int pageSize=20; //总页数 protected int total=1; //总记录数 protected int records=1; //当前页 protected int currentPage=1; //封装数据的对象 protected Object object=null;

【前端框架学习-jqgrid】最后看看struts2里面配置文件的内容