使用jquery和java基于下拉列表填充html表数据 [英] populate html table data based on dropdown list using jquery and java
问题描述
<%@ 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>
当我使用下拉列表中的所有内容选择正常工作正如我预期的下拉列表和表，但它反应不同我的意思是当我提交时，表再次附加相同的行，如果我在批量下拉列表中选择一些东西，那么表来到它正确的列表。如果我只用于表格，它会再次打印整页。我能理解发生了什么。但无法找到解决方案来实现我的需要。
in this when i use the for all content inside the dropdown select works fine as i expected for dropdown list and table but it react different I mean the table is appended with same rows once again when I submit and if I select some thing in batch dropdown list then the table comes to it correct list. If I used only for table, it prints the full page once again. I can understand what had happen. but could not find solution to achieve what I need.
我的目标是根据所选批次显示表格，提交应该按照实际要做的那样进行。
my aim is to display the table based on the batch selected and the submit should do what it actually has to do.
服务器端代码...
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;
}
}
推荐答案
首先，我建议你改变你的结构，因为你几乎没有使用AJAX（你只使用一个加载，就是这样，这与从一开始就传递所有这些值没有什么不同从行动）。因为你只有3个值可以通过 jQuery（＃myid）。val（）来捕获它们，并用传递它们jQuery.ajax 。类似
First, I would suggest that you change your structure as you are using AJAX hardly at all (you only use one on load and that's it, and that is not different than passing all those values from the very beginning from the action). As you only have 3 values to pass, is fairly easy to capture them with jQuery("#myid").val() and pass them with jQuery.ajax. something like
<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刷新减少到必要的最小值，因为它会更容易保持和美观。所以例如你的模板应该像这样分开
finally, you should reduce the ajax refreshment to the minimun necessary, as it will be easier to mantain and to give aesthetics. so for example your template should be divided like this
<your form>
<your table header>
<div id="mytable">
使用此模板，您只需刷新实际内容，其他所有内容将保持不变（真正的AJAX） ），所以在你的AJAX调用的响应中，应该只有迭代器部分。您甚至可以使用滚动条和静态标题创建表格，只需要在ajax单元格中放置一些匹配的大小以及表格标记。
with this template you would only have to refresh the actual content and everything else will remain intact (true AJAX), so in your JSP response for your AJAX call there should be only the iterator part. you will even be able to create the table with a scrollbar and a static header, only needing to put some matching sizes in your ajax cells along with the table tag.
Hope这有助于你。如果你设法破解这个，你就能创造奇迹。 jQuery + Struts2 +（似乎你没有使用Hbernate，但是很好）这是一个可怕的组合。
Hope this helps you. If you manage to crack this you will be able to do wonders. jQuery + Struts2 + (seems that you are not using Hbernate, but oh well) it's a monstrous combination.
这篇关于使用jquery和java基于下拉列表填充html表数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
