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

fhqllt

浏览: 1051279 次
性别:
来自: 郑州

最近访客更多访客>>

wenyan1232

小覃Smile

yjqzou

wt_7628

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

webwork

EXT Webwork json JavaScript CSS

效果图：

前台代码：

<%@ 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中的配置：

版本为Ext-2.2 ,Webwork2.2.7

分享到：

ORA-00918: column ambiguously defined | WebWork开发JSON接口最佳实践

2010-07-02 02:04
浏览 2011
评论(1)
分类:编程语言
查看更多

1 楼 hujin19861102 2017-09-20

截图看不见，最后一个webwrok的配置看不见

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论