使用jQuery和Java基于下拉列表填充html表数据

时间:2012-02-21 06:58:09

标签: java jquery struts2

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib uri="/struts-tags" prefix="s"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<jsp:include page="checkLogin.jsp" />
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Allocate Tans</title>
<script type="javascript" src="jquery-1.7.js"></script>
<sj:head jqueryui="true" jquerytheme="cupertino" />
</head>
<script type="text/javascript">
$(document).ready(function()
        {
            $('#batchID').change(function(event) {
                var batch=$('#batchID').val();
                $.ajax({
                    url     : "doShowAllocationStatus.action",
                    data    : "batch="+batch,
                    success : function(html) {
                                $('#table').html(html);
                                },
                    error   : function(html) {
                                alert("error");
                                }
                      });
            });
        });     
</script>

<body>


    <div id=table>
        <s:form action="doAllocate" name="allocate" executeResult="true">

            <s:actionerror />
            <s:actionmessage />
            <s:select label="Select Batch" headerKey="-1"
                headerValue="Select a Batch..." list="%{#session.Batchs}"
                Value="batch" name="batch" id="batchID" />
            <s:select label="Select User" headerKey="-1"
                headerValue="Select an User..." list="%{#session.users}" name="user"
                value="user" />
            <s:radio list="#{'Curator':'Curator','QC':'QC'}" name="user_work_as" />
            <s:submit value="Allocate" id="AllocateID" />


            <table align="center" border="2" width="800">
                <tr>
                    <th>TAN</th>
                    <th>Curator</th>
                    <th>Curator Status</th>
                    <th>QC</th>
                    <th>QC Status</th>
                </tr>
                <s:iterator value="allocationList" var="tableID">
                    <tr>
                        <td><s:checkbox name="Tans" fieldValue="%{#tableID.tan}"
                                theme="simple" />
                            <s:property value="tan" /></td>
                        <td><s:property value="curator" /></td>
                        <td><s:property value="curator_status" /></td>
                        <td><s:property value="qc" /></td>
                        <td><s:property value="qc_status" /></td>
                    </tr>
                </s:iterator>
            </table>
        </s:form>
    </div>
</body>
</html>

在此当我使用下拉列表中的所有内容选择工作正常,因为我期望的下拉列表和表但它反应不同我的意思是当我提交时,如果我选择一些东西,表再次附加相同的行在批处理下拉列表中,表格会显示正确的列表。如果我只用于表格,它会再次打印整页。我可以理解发生了什么,但找不到解决方案来实现我的需要。

image 1 image 2

我的目标是根据所选批次显示表格,提交应该按照实际要做的那样进行。

服务器端代码......

package controller;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import model.BatchInfo;
import model.CationDAO;
//import org.apache.struts2.interceptor.SessionAware;
import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;

@SuppressWarnings("serial")
public class AllocateTAN extends ActionSupport  {


    //Fields that hold data...
    private List<BatchInfo> allocationList =new ArrayList<BatchInfo>();
    private String batch;
    private List<String> batchs = new ArrayList<String>();
    private String TAN;
    private String Tans[];
    private String user;
    private List<String> users = new ArrayList<String>();
    private String user_work_as;


    //getters and setters....   
    public List<BatchInfo> getAllocationList() {
        return allocationList;
    }

    public void setAllocationList(List<BatchInfo> allocationList) {
        this.allocationList = allocationList;
    }
    //@RequiredStringValidator(message = "Batch Not Selected")
    public String getBatch() {
        return batch;
    }


    public void setBatch(String batch) {
        this.batch = batch;

    }

    public List<String> getBatchs() {
        return batchs;
    }


    public void setBatchs(List<String> batchs) {
        this.batchs = batchs;

    }
    //@RequiredStringValidator(message = "TAN Not Selected")
    public String getTAN() {
        return TAN;
    }


    public void setTAN(String tAN) {
        TAN = tAN;

    }

    public String[] getTans() {
        return Tans;
    }


    public void setTans(String[] tans) {
        Tans = tans;

    }
    //@RequiredStringValidator(message = "Worker Not Selected")
    public String getUser() {
        return user;
    }


    public void setUser(String user) {
        this.user = user;

    }

    public List<String> getUsers() {
        return users;
    }


    public void setUsers(List<String> users) {
        this.users = users;

    }
    //@RequiredStringValidator(message = "Select Any One")
    public String getUser_work_as() {
        return user_work_as;
    }


    public void setUser_work_as(String user_work_as) {
        this.user_work_as = user_work_as;

    }


    //variable used to access DataBase...
    CationDAO dao1 = new CationDAO() ;



    //flow 1.: making all details available for the allocate TAN page...when page page is loaded 1st time


    public String AllocatingTANpageDetails() throws SQLException{

        Map<String, Object>session=ActionContext.getContext().getSession();
        this.batchs=dao1.Batch_List();
        session.put("Batchs", batchs);
        //Tans=dao1.Tan_list(getBatch());
        this.users=dao1.Users_List();
        session.put("users", users);

        return SUCCESS;
    }


    /*TAN list
    private void showTANlist(String Batch1) throws SQLException{
        Map<String, Object>session=ActionContext.getContext().getSession();
        Tans=dao1.Tan_list(Batch1);
        session.put("Tans", Tans);

    }*/
    //flow 2.: showing Allocation Status in Table form...in same page


    public String showAllocationStatus() throws SQLException {

        System.out.println("Inside Show Allocation Status");
        if(batch==null||"-1".equals(batch)){
            addActionMessage("Please!... Select a Batch");
            return ERROR;
        }
        Map<String, Object>session=ActionContext.getContext().getSession();
        //setBatch(batch_value);
        String bth=getBatch();
        if (bth==null || bth=="-1"){
            System.out.println("batch is empty "+bth);
        }
        System.out.println(bth);
        session.put("Batch",bth);

    //  showTANlist(bth);
        System.out.println("Processing Allocation List... ");
        this.allocationList=(List<BatchInfo>)dao1.status(bth);
        System.out.println(allocationList); 
        session.put("AllocationList",allocationList);
        System.out.println("Finished...");
        return SUCCESS;
    }

    //execute method form allocating a TAN for a user...    
    public String execute(){
        String statusTable=null;
        String er = null;
            if(Tans==null||"-1".equals(Tans)){
                addActionError("Please!... Select a TAN"); er="er";
            }
                if (user==null||"-1".equals(user)){
                    addActionError("Please!... Select an Worker");er="er";
                }
                    if (user_work_as==null||user_work_as==""||"-1".equals(user_work_as)){
                        addActionError("Please!... Select either Curation or QC");er="er";
                    }
                    try {
                         statusTable=showAllocationStatus();
                    } catch (SQLException e) {
                        e.printStackTrace();
                    }

                    if(!"er".equals(er)&& "success".equals(statusTable)){
                        System.out.println("inside Execute metho of AllocateTAN.java");

                        if ("QC".equalsIgnoreCase(user_work_as)){
                            try {
                                if(!"Complete".equalsIgnoreCase(dao1.CheckCurator(batch,Tans))){
                                    addActionMessage("Curation Not yet completed");
                                    return ERROR;
                                }
                                dao1.AllocateTANforUser( batch,  Tans,  user,  user_work_as);
                                this.allocationList=(List<BatchInfo>)dao1.status(getBatch());
                                return SUCCESS;
                            } catch (SQLException e) {
                                e.printStackTrace();
                            }


                        }else if("Curator".equalsIgnoreCase(user_work_as)){
                            try {
                                dao1.AllocateTANforUser( batch,  Tans,  user,  user_work_as);
                            } catch (SQLException e) {
                                e.printStackTrace();
                            }
                            this.allocationList=(List<BatchInfo>)dao1.status(getBatch());
                            return SUCCESS;
                        }
            }

        return ERROR;

    }

}

1 个答案:

答案 0 :(得分:1)

首先,我建议你改变你的结构,因为你几乎没有使用AJAX(你只使用一个加载,就是这样,这与从一开始就从动作传递所有这些值没有什么不同) 。由于您只有3个要传递的值,因此使用jQuery("#myid").val()捕获它们相当容易,并使用jQuery.ajax传递它们。

之类的东西
<s:button value="Allocate Me!!!" onclick="allocating_you()"/>

然后

function allocationg_you(){
    var val1 = jQuery("#value1").val();
    var val2 = jQuery("#value2").val();
    var val3 = jQuery("#value3").val();
    jQuery.ajax({
        url: "allocator",
        data: "val1=" + val1 +"&val2=" + val2 + "&val3=" + val3 + "&r=" //dont forget to add a random number
        success: function(data){
                        jQuery("#mytable").html(data).load();
                 }
});
}

最后,你应该将ajax刷新减少到必要的最小值,因为它更容易保持和美观。所以例如你的模板应该像这样划分

<your form>
<your table header>
<div id="mytable">

使用此模板,您只需刷新实际内容,其他所有内容将保持不变(真正的AJAX),因此在您的AJAX调用响应中,应该只有迭代器部分。您甚至可以使用滚动条和静态标题创建表格,只需要在ajax单元格中放置一些匹配的大小以及表格标记。

希望这会对你有所帮助。如果你设法破解这个,你就能创造奇迹。 jQuery + Struts2 +(似乎你没有使用Hbernate,但是很好)这是一个可怕的组合。