ext表格分頁控件與struts交互的實例


LoginAction .java
-----------------------------------------------------------------------
package com.yourcompany.struts.action;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONObject;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import org.apache.struts.actions.DispatchAction;
import com.test.Grid;
public class LoginAction extends Action {
    public ActionForward execute(ActionMapping mapping, ActionForm form,
            HttpServletRequest request, HttpServletResponse response) {
        PrintWriter out = null;
        try {
            out = response.getWriter();
        } catch (IOException e) {
            e.printStackTrace();
        }
        // 得到頁面傳過來的參數
        String start = request.getParameter("start");
        String limit = request.getParameter("limit");
        int index = Integer.parseInt(start);
        int pageSize = Integer.parseInt(limit);
        // 初始化
        List jlist = new ArrayList();
        for (int i = index; i < pageSize + index; i++) {
            Grid bean1 = new Grid();
            bean1.setId(String.valueOf(i));
            bean1.setName("name" + i);
            bean1.setDescn("descn" + i);
            jlist.add(bean1);
        }
        // 初始化
        Map map = new HashMap();
        map.put("totalProperty", 100);
        map.put("root", jlist);
        // 轉換成對象,不要轉換成數組
        JSONObject obj = JSONObject.fromObject(map);
        // 輸出到列表
        out.print(obj);
        return null;
    }
}

index.htm
-----------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
   <title>New Document</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <link rel="stylesheet" type="text/css"
    href="lib/ext/resources/css/ext-all.css" />
   <script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js">
        </script>
   <script type="text/javascript" src="lib/ext/ext-all.js">
        </script>
</head>
<body>
   <script>
        Ext.onReady(function(){
              var cm = new Ext.grid.ColumnModel([{
                header: '編號',
                dataIndex: 'id'
            }, {
                header: '名稱',
                dataIndex: 'name'
            }, {
                header: '描述',
                dataIndex: 'descn'
            }]);
  

        var store = new Ext.data.Store({
                proxy: new Ext.data.HttpProxy({
                    url: 'login.do'
                }),
                reader: new Ext.data.JsonReader({
                    totalProperty: 'totalProperty',
                    root: 'root'
                }, [{
                    name: 'id'
                }, {
                    name: 'name'
                }, {
                    name: 'descn'
                }])
          
            });
         
            var grid = new Ext.grid.GridPanel({
                el: 'grid',
                store: store,
                cm: cm,
                bbar: new Ext.PagingToolbar({
                    pageSize: 10,
                    store: store,
                    displayInfo: true,
                    displayMsg: '顯示第 {0} 條到 {1} 條記錄,一共 {2} 條',
                    emptyMsg: "沒有記錄"
                })
            });
            ds.load({
                params: {
                    start: 0,
                    limit: 10
                }
            });
          
            grid.render();
          
        });
    </script>
<body>
   <div id="grid" style="height:265px;">
   </div>
</body>
</html>
-----------------------------------------------------------------------

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章