`

Ext+Webwork+Json 实现分页表格查询效果

EXTWebworkjsonJavaScriptCSS 
阅读更多

效果图：

ext-Grid1

前台代码：

<%@ page language="java"  pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="ext-2.2/resources/css/ext-all.css" />
    <script type="text/javascript" src="ext-2.2/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ext-2.2/ext-all.js"></script>

  </head>
  <body>
    <script type="text/javascript">
    Ext.onReady(function(){
        var store=new Ext.data.JsonStore({
           root: "result",
           totalProperty:"totalCount",
           fields:["id","name","sex"],
           proxy: new Ext.data.HttpProxy({
              url:"testJSON.action"
           })
        });
        var pagebar=new Ext.PagingToolbar({
             pageSize:10,
             store:store,
             displayInfo:true,
             displayMsg:"显示 {0}-{1} 共 {2}",
             emptyMsg:"No data"
        });
        var colM=new Ext.grid.ColumnModel([
        {header:"序号",dataIndex:"id",sortable:true,hideable:true},
        {header:"姓名",dataIndex:"name",sortable:true,hideable:true},
        {header:"性别",dataIndex:"sex",sortable:true,hideable:true}
        ]);
        var grid=new Ext.grid.GridPanel({layout:"fit",cm:colM,store:store,autoHeight:true,loadMask:true});
        var form1=new Ext.form.FormPanel({
                             layout:"form",
                             frame:true,
                             items:[
                               {
                                 layout:"column",
                                 border:false,
                                 items:[
                                    {
                                      columnWidth:.3,
                                      layout:"form",
                                      border:false,
                                      items:[
                                         {
                                          xtype:"textfield",
                                          fieldLabel:"姓名",
                                          name:"name",
                                          anchor:"90%"
                                         },
                                         {
                                          xtype:"textfield",
                                          fieldLabel:"职务名称",
                                          name:"postName",
                                          anchor:"90%"
                                         }
                                      ]
                                    },
                                    {
                                      columnWidth:.3,
                                      layout:"form",
                                      border:false,
                                      items:[
                                        {
                                         xtype:"textfield",
                                         fieldLabel:"性别",
                                         name:"sex",
                                         anchor:"90%"
                                        },
                                        {
                                         xtype:"textfield",
                                         fieldLabel:"职务层次",
                                         name:"postLevel",
                                         anchor:"90%"
                                        }
                                      ]
                                    },
                                    {
                                      columnWidth:.4,
                                      layout:"form",
                                      border:false,
                                      items:[
                                      {
                                        xtype:"textfield",
                                        fieldLabel:"身份证号码",
                                        name:"cardNo",
                                        anchor:"90%"
                                      }
                                      ]
                                    }
                                 ]
                               }
                             ],
                             buttons:[
                               {
                               text:"查询",
                               handler:search
                               },
                               {
                               text:"重置"
                               }
                             ]
        });

      //查询按钮事件
        function search(){
           store.reload({params:{start:0,limit:10,name:Ext.get("name").dom.value}});
        }
        new Ext.Viewport({
               layout:"border",
               items:[
                  new Ext.Panel({
                     title:"查询条件",
                     region:"north",
                     collapsible:true,
                     height:150,
                     items:[form1]
                  }),
                  new Ext.Panel({
                     title:"列表",
                     region:"center",
                     collapsible:true,
                     items:[grid],
                     bbar:pagebar
                  })
               ]
        });

 

//给store添加load的pamas
        store.on("beforeload",function(){
           store.baseParams={name:Ext.get("name").dom.value};
        });
        store.load({params:{start:0,limit:10}});
    });
    </script>
  </body>
</html>

 

后台代码：

package com.test;

import com.opensymphony.webwork.dispatcher.json.JSONArray;
import com.opensymphony.webwork.dispatcher.json.JSONObject;
import com.opensymphony.webwork.dispatcher.json.JSONString;
import com.opensymphony.xwork.ActionSupport;

public class TestJson extends ActionSupport{
    private String start;
    private String limit;
    private String name;
    private JSONObject jsonObject;
    public String execute()throws Exception{
        int i=Integer.parseInt(start);
        int j=Integer.parseInt(limit);
        System.out.println("name:"+name);
        JSONArray jsonArray=new JSONArray();
        for(int a=i;a<i+j;a++){
            JSONObject json=new JSONObject();
            json.put("id", a);
            if(name!=null&&!"".equals(name)){
                json.put("name", "searchName:"+name);   
            }else{
                json.put("name", "name"+a);
            }
            json.put("sex", "sex");
            jsonArray.put(json);
        }

        jsonObject=new JSONObject();
        jsonObject.put("totalCount", "100");
        jsonObject.put("result", jsonArray);
        System.out.println(jsonObject.toString());
        return SUCCESS;
    }

    public JSONObject getJsonObject() {
        return jsonObject;
    }

    public void setJsonObject(JSONObject jsonObject) {
        this.jsonObject = jsonObject;
    }

    public String getLimit() {
        return limit;
    }

    public void setLimit(String limit) {
        this.limit = limit;
    }

    public String getStart() {
        return start;
    }

    public void setStart(String start) {
        this.start = start;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

}

 

xwork.xml中的配置：

image

版本为Ext-2.2 ,Webwork2.2.7

分享到：
| WebWork开发JSON接口最佳实践
评论
1 楼 hujin19861102 2017-09-20  
截图看不见，最后一个webwrok的配置看不见
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics