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");//排序列