easy ui学习篇之datagrid

首先要引入相应的js和css文件，这个可以在参考官网demo：http://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=default&dir=ltr&pitem=

1创建 一个简单那datagrid
    jQuery("#gridTable").datagrid({//jsp页面中有个id=gridTable的table
  url:"/role/getAllRole",//url获取数据
  method:"POST",//请求类型
  rownumbers:true,//显示行号
  fitColumns:true,//列自适应宽度
  toolbar:"#roleToolbar",//datagrid中内置的工具条
  columns:[[//创建列
   {field:"ID",hidden:true},
   {field:"ROLE_NAME",title:"角色名称",align:"center",sortable:true},//field和rows中个数据的key相同。
   {field:"ROLE_CODE",title:"角色编码",align:"center",sortable:false},
   {field:"ROLE_STATUS",title:"角色状态",align:"center",sortable:false},
   {field:"CREATE_DATE",title:"创建时间",align:"center",sortable:true},
   {field:"ROLE_DESC",title:"角色描述",align:"center",sortable:false}
  ]],
  pagination:true,
  pageSize:1,
  pageList:[1,10,20],
  title:"角色管理"
   
 });

后台组织数据示例：   
             JSONObject jb = new JSONObject();      
            JSONArray gridModel = new JSONArray();
            for(int i=1;i<100;i++){
             JSONObject cell = new JSONObject();
             
             cell.put("ID",i);
             cell.put("ROLE_NAME","请购名称"+i);
             cell.put("ROLE_CODE","创建着"+i);
             cell.put("ROLE_STATUS", "创建时间"+String.valueOf(new Date()));
             cell.put("CREATE_DATE","已处理");
             cell.put("ROLE_DESC","已处理");
             
             gridModel.add(cell);
            }

           
            jb.put("total", 100);//总记录数
            jb.put("rows", gridModel);//传到前台的数据
           
            resp.setCharacterEncoding("UTF-8");
            resp.getWriter().print(jb);
后台接受参数（后台分页，排序等）：
             String page = req.getParameter("page");//当前页数
           String rows = req.getParameter("rows");//每页记录数
             String order = req.getParameter("order");//排序方式 asc,desc
            String sort = req.getParameter("sort");//排序列