0
我有一個從後端獲取數據並顯示的表。它每隔幾秒刷新一次。用戶可以按下'編輯'按鈕並停止表格加載，並且一旦按下該按鈕，具有'編輯'按鈕的附加列被附加到整個表格。一旦用戶按下該特定行的「編輯」，只有該行可被編輯。現在這一行包含一個應該是一個下拉選擇菜單的字段，它只有很少的選項。一旦選擇了其中一個選項，並且按下了應用按鈕，則發佈請求將顯示標題中發送的所有選項。下面 本函數解析XML數據並準備表結構： - （這裏沒問題）表中的Selectmenu在發送'post'時發送所有選項而不是選定的選項
function parseAlmSettingDataXml(xml)
{
var $xml = $(xml),
numOfAlms = $xml.find('alrmNum').text();
use = 0,
alarmData = $xml.find('alrmData').text();
$(function(){
var rowCount=0;
var r1 = new Array(), r2 = new Array();
$.each(JSON.parse(alarmData.replace(/"/g,'"')), function(){
if (rowCount < 10) {
populateArray(r1, this);
}
else {
populateArray(r2, this);
}
rowCount++;
});
$('#itemList1 tbody').html(r1.join(''));
$('#itemList2 tbody').html(r2.join(''));
//selectmenu is initialized only when table is made
$('.alarmlvl').selectmenu({disabled:true});
// Hide tables not used
if (rowCount < 1) {
if ($("#table1")[0] != undefined) {$("#table1")[0].style.display="none";}
if ($("#table2")[0] != undefined) {$("#table2")[0].style.display="none";}
}
else {
if ($("#table1")[0] != undefined) {$("#table1")[0].style.display="";}
if (rowCount < 10) {
if ($("#table2")[0] != undefined){$("#table2")[0].style.display="none";}
}
else {
if ($("#table2")[0] != undefined){$("#table2")[0].style.display="";}
}
}
});
}
這裏是populateArray函數與所述數據（在這裏沒有問題）填充表： -
function populateArray(a, d)
{
var level = typeof(d.lvl) == 'undefined' ? 'UNK' : d.lvl;
a.push('<tr>');
a.push('<td>');
a.push(d.desc); //alarm desc
a.push('</td>');
a.push('<td>');
a.push('<select class="alarmlvl"><option selected value='+level+'>'+level+'</option></select>'); //alarm level
a.push('</td>');
a.push('<td contentEditable="false">');
a.push(d.sett); //alarm set time
a.push('</td>');
a.push('<td contentEditable="false">');
a.push(d.clrt); //alarm clear time
a.push('</td>');
a.push('</tr>');
}
下面是全球「編輯」按鈕被點擊時： -
$("#editFields").click(function(){
clearInterval(ajax_interval);
/*need timeout to stop table load and add another column for edit*/
setTimeout(function(){
$("tbody tr").each(function(){
$(this).append("<td><button class='editRow'>Edit</button></td>");
});
//making editable rows highlight
$(".editRow").button().click(function(e){
e.preventDefault();
$(this).closest("tr").css('border','5px solid red').find("td").attr("contentEditable","true");
$(this).closest("tr").find('.alarmlvl').selectmenu('option','disabled',false);
var alarmLevel=$(this).closest("tr").find(".alarmlvl :selected").text();
alarmLevelDropdown(alarmLevel);
});
}, 500);
});
function alarmLevelDropdown(currentLevel){
switch(currentLevel){
case 'IGN': $(".alarmlvl").append("<option value='NFY'>NFY</option> <option value='MIN'>MIN</option> <option value='MAJ'>MAJ</option> <option value='CRI'>CRI</option>");
break;
case 'NFY': $(".alarmlvl").append("<option value='IGN'>IGN</option><option value='MIN'>MIN</option> <option value='MAJ'>MAJ</option> <option value='CRI'>CRI</option>");
break;
case 'MIN': $(".alarmlvl").append("<option value='IGN'>IGN</option> <option value='NFY'>NFY</option> <option value='MAJ'>MAJ</option> <option value='CRI'>CRI</option>");
break;
case 'MAJ': $(".alarmlvl").append("<option value='IGN'>IGN</option> <option value='NFY'>NFY</option> <option value='MIN'>MIN</option> <option value='CRI'>CRI</option>");
break;
case 'CRI': $(".alarmlvl").append("<option value='IGN'>IGN</option> <option value='NFY'>NFY</option> <option value='MIN'>MIN</option> <option value='MAJ'>MAJ</option>");
break;
default: console.log("invalid alarm level!");
break;
}
}
下面是哪裏的問題是，當我點擊全球應用按鈕： -
$("#applyButton").click(function(){
$("#editFields").button("option","disabled",false);
$("#applyButton").button("option","disabled",true);
$("#cancelButton").button("option","disabled",true);
$("tbody tr").find("td").each(function(){
//traversing rows and adding td that are editable and making sure Edit buttons are not included in the array
if($(this).is("[contentEditable ='true']") && $(this).text() !== "Edit"){
if($(this).find('select.alarmlvl').length){ //checking if this is dropdown selector
tableData.push($(this).text()); //maybe changes required here ..im missing out on something
}
else{
tableData.push($(this).text());
}
}
});
形式提交部分： -
$("#adminForm").submit();
if (console !== undefined) {console.log("apply clicked, ajaxdata2 should start");}
ajax_interval=setInterval(loadAjaxData2, 1 * 1000);
});
$("#adminForm").submit(function(e){
var tableDataAsString=JSON.stringify(tableData);
$.ajax({
type : 'POST',
url : '/scripts/postServices.php' ,
data : {mydata: tableDataAsString}
}).done(function(data) {
data=$.trim(data);
console.log("Response: "+data);
tableData=[]; //clearing the array
});
e.preventDefault();
});
下面的形式標記： - 的
<form id="adminForm">
<div id="protocolParIcons">
<a href="#!" class="sbtooltip" title="Apply"><button id="applyButton" type="submit" class="ui-icon ui-icon-circle-check" style="display:none;"></button></a>
<a href="#!" class="sbtooltip" title="Cancel"><button id="cancelButton" class="ui-icon ui-icon-cancel" style="display:none;"></button></a>
<a href="#!" class="sbtooltip" title="Edit"><button id="editFields" class="ui-icon ui-icon-pencil" style="display:none;"></button></a>
</div>
<div id="protocolParMain" style="height:580px">
<div id="alarmData" style="font-size:0.8em">
<div class="alarmDataTable" id="table1" style="margin-left:20px">
<table border="1" id="itemList1">
<thead>
<tr>
<th>Description    </th>
<th>Level    </th>
<th>setTime   </th>
<th>clrTime       </th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="alarmDataTable" id="table2" style="display:none;">
<table border="1" id="itemList2" width="360px">
<thead>
<tr>
<th>Description    </th>
<th>Level    </th>
<th>setTime   </th>
<th>clrTime       </th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</form>
而不是「tableData.push（$（this）.text（） ）「，試試」tableData.push（$（this）.find（'。select.alarmlvl option：selected'）。text（）「。基本上你需要獲得選定的選項的文本，你的函數返回文本整個選擇框包括所有的選項，選擇與否 – Bradley
@Bradley：就是這樣！請加上它作爲答案，非常感謝，我真的沒有想到它從這個意義上說 –
完成，謝謝！ – Bradley