0
我有struts2應用程序中的動態添加/刪除行功能。HTML標籤列表不綁定行動值Arraylist
現在，第一個值從JSP正確綁定到操作，因爲JSP中的第一個值存在於struts標記中（s:select），但從Javascript添加的動態行沒有綁定到Action列表。該行動ArrayList值沒有約束，這是我的代碼至今：
<legend class="legendtitle">Training Needs Analysis</legend>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="trainingTable">
<thead>
<tr>
<td class="Htd_one1">
<div align="center">Course:</div>
</td>
<td class="Htd_one1">
<div align="center">Course Name (if Others):<span class="mandatory">*</span></div>
</td>
<td class="Htd_one1">
<div align="center">Training Type:<span class="mandatory">*</span></div>
</td>
<td class="Htd_one1">
<div align="center">Reason For Recommendation:<span class="mandatory">*</span></div>
</td>
<td class="Htd_one1">
<div align="center">Action</div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td class="dataone1" width="20%">
<s:div align="center">
<s:select list="courseNameList" name="appTrngMstrList[0].courseCode" headerKey="0" headerValue="SELECT" id="courseCode0"
onchange="enableDetailCourseSection(this.value,0)" theme="simple" listKey="displayKey" cssClass="txtbox"
listValue="displayValue" />
</s:div>
</td>
<s:hidden name="hrAppHeader.appHidenVarTrngMstrList[0].courseCode" id="courseCodeHide0"></s:hidden>
<td class="dataone1">
<s:div id="courseOthersTextTd" align="center">
<s:textfield id="courseOthers0" name="appTrngMstrList[0].courseOthers" cssClass="txtbox_mandatory" theme="simple" cols="50"
rows="3" maxLength="200" onblur="convertToUpper(this)" />
</s:div>
</td>
<s:hidden name="hrAppHeader.appHidenVarTrngMstrList[0].courseOthers" id="courseOthersHide0"></s:hidden>
<td class="dataone1">
<s:div id="trainingTypeTextTd" align="center">
<s:select headerKey="0" headerValue="SELECT" list="#{'I':'INTERNAL','E':'EXTERNAL'}" name="appTrngMstrList[0].trainingType"
id="trainingType0" theme="simple" cssClass="txtbox_mandatory"></s:select>
</s:div>
</td>
<s:hidden name="hrAppHeader.appHidenVarTrngMstrList[0].trainingType" id="trainingTypeHide0"></s:hidden>
<td class="dataone2">
<s:div align="center">
<s:textarea name="appTrngMstrList[0].reasonOfRecomndtn" id="reasonOfRecomndtn0" cols="40" theme="simple" cssClass="txtbox_mandatory_big"
onblur="convertToUpper(this);" onkeydown="textCounter(this,4000);" onkeyup="textCounter(this,4000);"
/>
</s:div>
<s:hidden name="hrAppHeader.appHidenVarTrngMstrList[0].reasonOfRecomndtn" id="reasonOfRecomndtnHide0"></s:hidden>
</td>
<td align="center">
<input type="button" value="Delete" class="btn" id="deletSelfrowid" onclick="deleteTrainingRow(0);" />
</td>
</tr>
</tbody>
</table>
<table id="table1" width="100%">
<tr>
<td colspan="3" align="center">
<input type="button" class="btn" value="Add Row" id="addSelfrowId" onclick="addTrainingRow(0)">
</td>
</tr>
</table>
JavaScript代碼
function addTrainingRow(index) {
var str = "";
var rowCnt = document.getElementById('rowCnt').value;
var tbody =
document.getElementById("trainingTable").getElementsByTagName("TBODY")[0];
var row = document.createElement("TR");
var check = rowCnt % 2;
if (check == 0) {
row.className = "oddrow";
}
else {
row.className = "evenrow";
}
var optionValue1 = new Array();
var keyValue1 = new Array();
var courseCode = document.getElementById('courseCode' + index);
var length1 = courseCode.options.length;
for (var i = 0; i < length1; i++) {
dropdownKey = courseCode.options[i].value;
keyValue1[i] = dropdownKey;
}
for (var i = 0; i < length1; i++) {
dropdownValues = courseCode.options[i].text;
optionValue1[i] = dropdownValues;
}
var optionValue2 = new Array();
var keyValue2 = new Array();
var strVal = "";
strVal = strVal + '<option value=\"0">SELECT</option><option value=\"I\">INTERNAL</option><option value=\"E\">EXTERNAL</option>';
var s1 = "";
var s2 = "";
for (var i = 0; i < optionValue1.length; i++) {
s1 = s1 + '<option value="' + keyValue1[i] + '">' + optionValue1[i] + '</option>';
}
s2 = s2 + '<option value="0">SELECT</option>';
//var str1='<div align=\"center\"><select class=\"txtbox\" theme=\"simple\" id=\"courseCode'+rowCnt+'\" name=\"appTrngMstrList['+rowCnt+'].courseCode\" onchange=\"enableDetailCourseSection(this.value,'+rowCnt+');\">'+s1+'</select></div>';
var str1 = '<div align=\"center\"><select class=\"txtbox\" theme=\"simple\" id=\"courseCode' + rowCnt + '\" name=\"appTrngMstrList[' + rowCnt + '].courseCode\" onchange=\"enableDetailCourseSection(this.value,' + rowCnt + ');\">' + s1 + '</select></div><input type=\"hidden\" name=\"hrAppHeader.appHidenVarTrngMstrList[' + rowCnt + '].courseCode\" id=\"courseCodeHide' + rowCnt + '\"/>';
var str4 = '<div align=\"center\"><input type=\"text\" name=\"appTrngMstrList[' + rowCnt + '].courseOthers\" id=\"courseOthers' + rowCnt + '\" class=\"txtbox_mandatory\" theme=\"simple\" cols=\"50\" rows=\"3\" maxLength=\"200\" onblur=\"convertToUpper(this)\"/></div><input type=\"hidden\" name=\"hrAppHeader.appHidenVarTrngMstrList[' + rowCnt + '].courseOthers\" id=\"courseOthersHide' + rowCnt + '\"/>';
var str2 = '<div id=\"trainingTypeTextTd' + rowCnt + '\" align=\"center\"><select class=\"txtbox_mandatory\" theme=\"simple\" id=\"trainingType' + rowCnt + '\" name=\"appTrngMstrList[' + rowCnt + '].trainingType\">' + strVal + '</select></div><input type=\"hidden\" name=\"hrAppHeader.appHidenVarTrngMstrList[' + rowCnt + '].trainingType\" id=\"trainingTypeHide' + rowCnt + '\"/>';
var str5 = '<div align=\"center\"><input type=\"text\" theme=\"simple\" class=\"txtbox_mandatory_big\" cols=\"40\" name=\"appTrngMstrList[' + rowCnt + '].reasonOfRecomndtn\" id=\"reasonOfRecomndtn' + rowCnt + '\" onblur=\"convertToUpper(this);\" onkeydown=\"textCounter(this,4000);\" onkeyup=\"textCounter(this,4000);\"/></div><input type=\"hidden\" name=\"hrAppHeader.appHidenVarTrngMstrList[' + rowCnt + '].reasonOfRecomndtn\" id=\"reasonOfRecomndtnHide' + rowCnt + '\"/>';
var str8 = '<div align=\"center\"><input type=\"button\" value=\"Delete\" class=\"btn\" id=\"deletSelfrowid\" onclick=\"deleteTrainingRow(' + rowCnt + ');\"/></div>';
var td1 = document.createElement("TD");
td1.innerHTML = str1;
var td4 = document.createElement("TD");
td4.innerHTML = str4;
var td2 = document.createElement("TD");
td2.innerHTML = str2;
var td5 = document.createElement("TD");
td5.innerHTML = str5;
var td8 = document.createElement("TD");
td8.innerHTML = str8;
td1.className = "td_one1";
td4.className = "td_one1";
td2.className = "td_one1";
td5.className = "td_one1";
td8.className = "td_one1";
row.appendChild(td1);
row.appendChild(td4);
row.appendChild(td2);
row.appendChild(td5);
row.appendChild(td8);
tbody.appendChild(row);
//set the number of rows
document.getElementById("rowCnt").value = Number(rowCnt) + 1;
}
function deleteTrainingRow(id) {
var optionValue1 = new Array();
var optionValue2 = new Array();
var keyValue1 = new Array();
var keyValue2 = new Array();
//Get the existing number of rows
var existingNumOfRows = document.getElementById("rowCnt").value;
var atLeastOneRowSelected = false;
// TO check atleast one row is not deleted.
var count = 0;
if (parseInt(existingNumOfRows) == 1) {
alert("Cannot delete all rows.");
return false;
}
var index = 1;
var rowCnt = 0;
var recommendStr = '';
var otherStr = '';
var tempArray = new Array();//This will be used to take the backup of the current unselected rows
for (var i = 0; i < existingNumOfRows; i++) {
if (parseInt(id) != parseInt(i)) {
var row = document.createElement("TR");
var check = rowCnt % 2;
if (check == 0) {
row.className = "oddrow";
}
else {
row.className = "evenrow";
}
var courseCode = document.getElementById('courseCode' + i);
var length1 = courseCode.options.length;
for (var j = 0; j < length1; j++) {
dropdownKey = courseCode.options[j].value;
keyValue1[j] = dropdownKey;
}
for (var j = 0; j < length1; j++) {
dropdownValues = courseCode.options[j].text;
optionValue1[j] = dropdownValues;
}
var s1 = "";
for (var j = 0; j < optionValue1.length; j++) {
if (document.getElementById("courseCode" + i).selectedIndex == j) {
s1 = s1 + '<option value="' + keyValue1[j] + '" selected>' + optionValue1[j] + '</option>';
}
else {
s1 = s1 + '<option value="' + keyValue1[j] + '">' + optionValue1[j] + '</option>';
}
}
var trainingType = document.getElementById('trainingType' + i);
var length2 = trainingType.options.length;
for (var j = 0; j < length2; j++) {
dropdownKey = trainingType.options[j].value;
keyValue2[j] = dropdownKey;
}
for (var j = 0; j < length2; j++) {
dropdownValues = trainingType.options[j].text;
optionValue2[j] = dropdownValues;
}
var s2 = "";
for (var j = 0; j < optionValue2.length; j++) {
if (document.getElementById("trainingType" + i).selectedIndex == j) {
s2 = s2 + '<option value="' + keyValue2[j] + '" selected>' + optionValue2[j] + '</option>';
}
else {
s2 = s2 + '<option value="' + keyValue2[j] + '">' + optionValue2[j] + '</option>';
}
}
recommendStr = document.getElementById('reasonOfRecomndtn' + i).value;
//alert(document.getElementById("courseCode"+i).selectedIndex);
if (document.getElementById("courseCode" + i).selectedIndex == "20") {
otherStr = document.getElementById('courseOthers' + i).value;
}
var str1 = '<div align=\"center\"><select class=\"txtbox\" theme=\"simple\" id=\"courseCode' + rowCnt + '\" name="\appTrngMstrList[' + rowCnt + '].courseCode\" onchange=\"enableDetailCourseSection(this.value,' + rowCnt + ');\">' + s1 + '</select></div>';
var str4 = '<div align=\"center\"><input type=\"text\" name=\"appTrngMstrList[' + rowCnt + '].courseOthers\" id=\"courseOthers' + rowCnt + '\" class=\"txtbox_mandatory\" theme=\"simple\" cols=\"50\" rows=\"3"\ maxLength=\"200\" onblur=\"convertToUpper(this);\" value=\"' + otherStr + '\"/></div>';
var str2 = '<div id=\"trainingTypeTextTd' + rowCnt + '\" align=\"center\"><select class=\"txtbox_mandatory\" theme=\"simple\" id=\"trainingType' + rowCnt + '\" name=\"appTrngMstrList[' + rowCnt + '].trainingType\">' + s2 + '</select></div>';
var str5 = '<div align=\"center\"><input type=\"text\" theme=\"simple\" class=\"txtbox_mandatory_big\" cols=\"40\" name=\"appTrngMstrList[' + rowCnt + '].reasonOfRecomndtn\" id=\"reasonOfRecomndtn' + rowCnt + '\" onblur=\"convertToUpper(this);\" onkeydown=\"textCounter(this,4000);\" onkeyup=\"textCounter(this,4000);\" value=\"' + recommendStr + '\"/></div>';
var str8 = '<div align=\"center\"><input type=\"button\" value=\"Delete\" class=\"btn\" id=\"deletSelfrowid\" onclick=\"deleteTrainingRow(' + rowCnt + ');\"/></div>';
var td1 = document.createElement("TD");
td1.innerHTML = str1;
var td4 = document.createElement("TD");
td4.innerHTML = str4;
var td2 = document.createElement("TD");
td2.innerHTML = str2;
var td5 = document.createElement("TD");
td5.innerHTML = str5;
var td8 = document.createElement("TD");
td8.innerHTML = str8;
td1.className = "td_one1";
td4.className = "td_one1";
td2.className = "td_one1";
td5.className = "td_one1";
td8.className = "td_one1";
row.appendChild(td1);
row.appendChild(td4);
row.appendChild(td2);
row.appendChild(td5);
row.appendChild(td8);
tempArray[rowCnt] = row;
index++;
rowCnt++;
}
}
//Delete all the rows
var table = document.getElementById("trainingTable");
var headerRowCount = 0;
for (var i = (existingNumOfRows); i > headerRowCount; i--) {
table.deleteRow(i);
}
var tbody = document.getElementById("trainingTable").getElementsByTagName("TBODY")[0];
//Add the backup rows
for (var i = 0; i < rowCnt; i++) {
tbody.appendChild(tempArray[i]);
}
//set the number of rows
document.getElementById("rowCnt").value = Number(rowCnt);
}
我有所有的POJO類的getter /有setter方法，但仍appTrngMstrList[0]值，我得到Action類，但無論我動態添加的行appTrngMstrList[1]都不會綁定到Action列表。
此外，我將隱藏變量作爲解決方法，但即使是hrAppHeader.appHidenVarTrngMstrList也不會綁定動態行。
可以顯示生成的html代碼嗎？ –
使用javascript添加/刪除的行將不會反映在您的動作類中。你在做表格提交嗎？ – want2learn
動態行不包含輸入字段，尚不清楚你想綁定什麼？ –