1. 新建一個GridNode的類:

public class GridNode {
    private Long id;
    private String title;//投票標題
    private Integer type;
    private String version;
    private String options;//備選項數
    private String participants;//參與人數
        //getter/setter/constructor省略
}

2. 網頁內新建一個table元素.

3. script代碼

    $(function
 
(){
        $(‘#dg‘).datagrid({
            url:‘server/demo7_server.jsp‘,     //遠程請求數據的url路徑
            pagination:true,             //顯示底部分頁欄
            pageSize:5,                    //默認每頁記錄數
            pageList:[5,10,15],             //顯示列表記錄數的下拉框選項(左下角的數字下拉框)
            columns:[[　　　　//是一個JSON數組,列:復選框,標題,備選項數,參與人數
                {field:
 
‘ck‘,checkbox:true},
                {field:‘title‘,title:‘投票標題‘,width:408},
                {field:‘options‘,title:‘備選項數‘,width:60,align:‘center‘},
                {field:‘participants‘,title:‘參與人數‘,styler:myStyler}
            ]],
            toolbar: [{  //是一個JSON數組
            text: ‘添加‘,  
            iconCls: 
 
‘icon-add‘,  
            handler: function() {  該JSON對表示一個函數:彈出添加操作.當然可以豐富其內容真正實現添加,比如跳轉到添加函數的控制器.
                 alert("添加"); 
            }  
        }, ‘-‘, {  //‘-‘ 功能未知
            text: ‘修改‘,  
            iconCls: ‘icon-edit‘,  
            handler: function() {  
                alert("修改"); 
            }  
        }, ‘-‘,{  
            text: ‘刪除‘,  
            iconCls: ‘icon-remove‘,  
            handler: function(){  
                 alert("刪除");  
            }  
        }],  
            singleSelect:true,　　//單選,這個表格不能多選.
            rownumbers:true,　　//顯示行數
            iconCls: ‘icon-search‘, //圖標
            fitColumns:true,//自適應寬度，防止水平滾動
            height:‘auto‘,
            striped:true,//隔行變色
            loadMsg:"正努力為您加載中......" //剛加載或者刷新後加載過程中顯示的信息
        });
    });
    //下面的函數不知道有什麽卵用...
    function myStyler(value,row,index){
        if (value < 5){
            return ‘background-color:#ffee00;color:red;‘;
        }else if(value > 15){
            return ‘color:green;‘;
        }
    }

    $(function(){
        $(‘#dg‘).datagrid({
            url:‘server/demo7_server.jsp‘,     //遠程請求數據的url路徑
            pagination:true,             //顯示底部分頁欄
            pageSize:5,                    //默認每頁記錄數
            pageList:[5,10,15],             //顯示列表記錄數的下拉框選項
            columns:[[
                {field:‘ck‘,checkbox:true},
                {field:‘title‘,title:‘投票標題‘,width:408},
                {field:‘options‘,title:‘備選項數‘,width:60,align:‘center‘},
                {field:‘participants‘,title:‘參與人數‘,styler:myStyler}
            ]],
            toolbar: [{  
            text: ‘添加‘,  
            iconCls: ‘icon-add‘,  
            handler: function() {  
                 alert("添加"); 
            }  
        }, ‘-‘, {  
            text: ‘修改‘,  
            iconCls: ‘icon-edit‘,  
            handler: function() {  
                alert("修改"); 
            }  
        }, ‘-‘,{  
            text: ‘刪除‘,  
            iconCls: ‘icon-remove‘,  
            handler: function(){  
                 alert("刪除");  
            }  
        }],  
            singleSelect:true,
            rownumbers:true,
            iconCls: ‘icon-search‘,
            fitColumns:true,//自適應寬度，防止水平滾動
            height:‘auto‘,
            striped:true,//隔行變色
            loadMsg:"正努力為您加載中......"
        });
    });
    
    function myStyler(value,row,index){
        if (value < 5){
            return ‘background-color:#ffee00;color:red;‘;
        }else if(value > 15){
            return ‘color:green;‘;
        }
    }

4. 服務器網頁的Java代碼

a>導入GridNode的javaBean

b>新建ArrayList<GridNode>:

List<GridNode> list = new ArrayList<GridNode>();

並新建一些GridNode對象添加到list中.

list.add(new GridNode(1L,"選出你心目中最好的下載工具","2","6"));

c>接下來的代碼:

 1 //獲取客戶端傳遞的分頁參數    默認參數rows表示每頁顯示記錄條數，  默認參數page表示當前頁數
 2 Integer pageSize = Integer.parseInt(request.getParameter("rows"));//目測rows是datagrid自帶的參數,表示行數
 3 Integer pageNumber = Integer.parseInt(request.getParameter("page"));//當前頁碼
 4 StringBuilder builder = new StringBuilder("{\"total\":"+list.size()+",\"rows\":[");

 5 int start = (pageNumber-1) * pageSize;//計算開始記錄數
 6 int end = start+pageSize;//計算結束記錄數
 7 for(int i=start;i<end && i<list.size();i++){
 8     GridNode gn = list.get(i);
 9     builder.append("{\"id\":\""+gn.getId()+"\",\"title\":\""+gn.getTitle()+"\",\"options\":"+gn.getOptions()+",\"participants\":"+gn.getParticipants()+"},");
10 }
11 String gridJSON = builder.toString();
12 if(gridJSON.endsWith(",")){
13     gridJSON = gridJSON.substring(0,gridJSON.lastIndexOf(","));
14 }
15 out.print(gridJSON+"]}");

//輸出:

{"total":list.size(),"rows":[{"id":1L,"title":"選出1",....}

,{"id":2L,"title":"選出2",....},...]

[easyUI] datagrid 數據格 可以進行分頁