前端框架学习-jqgrid

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

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

<table id="jqGridId"></table>
<div id="pager"></div>

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;

最后看看struts2里面配置文件的内容

<result name="findAll" type="json">
            <param name="includeProperties">page.*</param>
            <param name="excludeNullProperties">true</param>
            <param name="ignoreHierarchy">false</param> 
</result>  

基本的grid使用就是这样。其实会了以后比较简单