https://ithelp.ithome.com.tw/questions/10193249#answer-355049
這是我先前問的問題,後來暫時是使用trigger方法,之後我又做了個全部同步的功能
可以選擇與輸入預先要同步的按鈕及內容並進行同步
全部儲存前要先判斷表格內有無點選選項,有點選就儲存,沒點選擇跳過
但現在有一個問題,我點選按鈕後按下全部同步並同步完畢後按下全部儲存並沒有效果
反而是在單一表格裡按下按鈕後再按全部儲存才有效果
想請問這個問題該如何解決?
這是我測試用的網頁
http://jsfiddle.net/tenno081/mqst35oL/37/
隱藏欄位
<input type="hidden" name="rowstatus" value="N" />
JQUERY
$('input[data-type="radio"]').click(function () {
$(this).parent().parent().find('input[name="rowstatus"]').val('Y')
})
$('.btnsaveall').on('click', function () {
$('.fn-edit').each(function () {
if ($(this).parent.find('input[name="rowstatus"]').val() == 'Y') {
$(this).trigger('click');
}
})
})
不想改你code,重寫比較快,這不是什麼難到要卡上幾天的功能:
http://jsfiddle.net/cy5htz47/
儲存我用當行的data-guid來代表。
1.你有很多多餘的html屬性根本用不到
2.能用ID請用ID來寫功能,不要亂用class
3.多餘的隱藏欄位用不到
4.好好規劃你的html結構,就像我之前跟你說的,一筆資料,就該從tr去發想,不要用觸發的按鈕去發想,要不是受限你的html結構,我可以少一個each迴圈。html規劃的好,你JS、JQ會好寫很多。
多去熟悉JS和JQ吧,你的程度還不到可以接案。
抱歉,結構我拿到時就長那樣,其他人也不太懂為什麼要這樣設計
隱藏欄位那個方法是其他人跟我說的,他解說後我也覺得頗為合理
只是沒想到我無法實現,那我您在我上一個問題中最新的留言我也
有看到,我回家後會再重新看JS跟JQ,一直這樣問我也會很不好意思
再次感謝您的解答
隱藏欄位是早期的設計理念方式。
其目的是為了要簡化post資料時的單純處理。
但其實這也是有危險性的就是了。
目前因為有非常多元化的js框架可供應用。
我猜測你接手的因該是古老級的程式碼。才會這樣。
一般來說如果可以轉換成新式的寫法就直接轉換會比較好。
但也得先了解原本的程式特性才動手。免得改一改後,一堆舊功能死給你看。
痾,老實說這個是全新的案子
我一來就加入這個案子,不過時間緊迫加上
人力不足的關係,所以這個案子有點混亂
不知道實際應用是不是需要鎖死整個畫面
我做了一個只鎖住每列的方式
(完成 AJAX 之後,該列才會解鎖)
由於 ajax 部分是 async
所以在 ajax 中可以同時編輯其他列的資料
let saveData=(function(){
let queue=[];
let ajaxMax=3; //允許同時幾個 ajax
let ajaxCount=0;
return function(buttonElement){
let bt=$(buttonElement);
let guid=bt.attr('data-guid');
let radios=$('.fn-rdo'+guid+':checked');
let note=$('.fn-note'+guid).val();
if(radios.length===0){
return;
}
lock(guid);
queue.push({
id:guid,
execstatus:radios.get(0).value,
note:note
});
doAjax();
}
function doAjax()
{
if(ajaxCount>=ajaxMax || queue.length===0){
return;
}
++ajaxCount;
let data=queue[0];
queue=queue.slice(1);
$.ajax({
url:'/test_api/save/', //這邊URL改自己的
type:'post',
data:data,
success:function(){
//這邊補AJAX成功後的處理
},
error:function(){
//這邊補AJAX失敗後的處理
},
complete:function(){
unlock(data.id);
--ajaxCount;
doAjax();
}
});
}
function lock(guid){
$('.fn-edit[data-guid="'+guid+'"]').attr('disabled',true).text('處理中');
$('.fn-rdo'+guid).attr('disabled',true);
$('.fn-note'+guid).attr('disabled',true);
}
function unlock(guid){
$('.fn-edit[data-guid="'+guid+'"]').attr('disabled',false).text('儲存');
$('.fn-rdo'+guid).attr('disabled',false);
$('.fn-note'+guid).attr('disabled',false);
}
})();
$(function(){
$('.fn-edit').click(function(){
saveData(this);
});
$('#save').click(function(){
$('.fn-edit').each(function(){
saveData(this);
});
});
$('#sync').click(function(){
let radios=$('input[name=fnrdo]:checked');
if(radios.length===0){
return;
}
let syncType=radios.get(0).value;
$('.table-btn-func input[type="radio"][value="'+syncType+'"]').prop('checked',true);
$('.table-btn-func input[type="text"]').val($('#finput').val());
});
});