iT邦幫忙

0

請問這個判斷該如何下?

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');
                    }
                })

            })
看更多先前的討論...收起先前的討論...
所以你的問題是,用javascript勾選的radiobutton,後端讀不到?
tenno081 iT邦研究生 4 級 ‧ 2019-04-15 12:22:00 檢舉
後端讀得到,是前端問題,我的想法是做一個隱藏欄位,預設是N,然後如果有勾選選項的話,value就會變成Y,然後按下全部儲存時如果值是Y就觸發trigger
ccutmis iT邦高手 2 級 ‧ 2019-04-15 14:10:21 檢舉
看你的html源碼時發現一些小問題,
例如: <input type="radio" >裡面的id會重覆,
這個在html原則裡面好像是不該有的
(一個html文件裡面不能存在同名的id),
name重覆則是可以,例如radio選項,
再來是classname命名的問題,
同樣是 input type="radio"...
第一筆三個radio:
input class="fn-rdo419d4555-562a-4e30-9a53-357299cc9c0e"
第二筆三個radio:
input class="fn-rdo2aa5fa70-8e37-4129-8f60-5a08890a90a5"

同樣結構同樣作用的radio 選項,是基於何用意作這樣的命名呢?
如果所有的radio都改成
input class="testRadioItem"

我用
$( '.testRadioItem' ).change(function() {
alert('選取物件id:'+$( this ).attr("id")+'\n\n選取物件name:'+$( this ).attr("name")+'\n\n選取物件value:'+$(this).val());
});
就可以在你更改內容時抓取點選的物件id,name,value等等,
我在想如果先不考慮安全問題,
那在用戶有更改內容時(例如點了跟原本不同的radio或修改文字)
就立即以ajax方式update資料庫內容(有點類似jquery inplace editing的概念)
那根本就沒有所謂"全部儲存"這問題
因為你作的每一個更改的動作就立即update到資料庫
我隨便說的,樓主加油^^"
froce iT邦大師 1 級 ‧ 2019-04-15 14:20:19 檢舉
不太建議修改即儲存啦,有時候user只是誤按什麼的...
簡單的可以這樣設計,這個涉及醫藥...還是算了吧。
tenno081 iT邦研究生 4 級 ‧ 2019-04-15 14:26:57 檢舉
其實我那個radiobutton 是長這樣的
@Html.RadioButtonFor(m => m.lstMED[i].ExecStatus, "N", new { @class = "fn-rdo" + Model.lstMED[i].GUID, data_guid = Model.lstMED[i].GUID, data_type = "radio" })

我也不是很懂為什麼他的CLASS要變成這樣,基本上三個按鈕架構都是這樣
froce iT邦大師 1 級 ‧ 2019-04-15 14:49:40 檢舉
或許有用gridView之類的微軟內建元件。
如果不是這樣的話,我是覺得就是觀念不夠強...

反正我寫code,最希望的是能用最少的code完成我要的事,結構設計的越簡單,以後越容易修改。
ccutmis iT邦高手 2 級 ‧ 2019-04-15 15:00:40 檢舉
@class = "fn-rdo" + Model.lstMED[i].GUID
改成@class = "testRadioItem" 就會變成我說的那樣 其它結構不變 但是可以用.testRadioItem去存取點選內容
當然這是給您一個參考而已,畢竟你接別人寫的東西在改,他在這裡用到的class有沒有被別的地方用到我是不知道的,只是看了html code直覺認為這種命名方式很怪。
tenno081 iT邦研究生 4 級 ‧ 2019-04-15 15:11:18 檢舉
我了解了,如果下一次是我自己設計頁面的話
我會避免這個狀況發生,感謝
froce iT邦大師 1 級 ‧ 2019-04-15 15:23:16 檢舉
我會這樣建議啦,看你這次案子是屬於一次還是長久合作。
長久合作就順便盡量重構,練功兼整頓,以後還會改的。
一次性就放個他爛,你自己會改就好。
tenno081 iT邦研究生 4 級 ‧ 2019-04-15 15:56:09 檢舉
了解,我看看後續是如何,目前只知道說月底要上線,如果情況允許到時我會試著自己修改
ccutmis iT邦高手 2 級 ‧ 2019-04-15 21:33:48 檢舉
我有個大膽的想法....
剛剛寫了一個測試htm,網址如下:
http://www.web3d.url.tw/test_save_all.htm (右鍵看源碼)
思路很簡單,原本單列儲存的不去動它,全部儲存按下的時候,
會把頁面上全部的input.radio跟input.text爬一次,然後把它們轉成JSON格式,
一筆記錄大概長這樣: "lstMED_0__ExecStatus":"N" , "lstMED_0__Note":"不知道"
如果頁面有五十筆,大概就是上列的段x50,再用AJAX把這整段JSON傳到後端程式UPDATE到DB,是不是很簡單... 恩~我只是分享個想法,可能是想法很簡單^^"
淺水員 iT邦大師 6 級 ‧ 2019-04-15 23:09:25 檢舉
JSON 是好方法,只是目前好像是發問者那邊不打算動後端的API,所以就照目前有的東西處理了。
ccutmis iT邦高手 2 級 ‧ 2019-04-16 10:43:21 檢舉
@淺水員: 沒關係 只是提供一些想法給樓主參考 你的建議作法也蠻有趣的
我的話大概會在按下全部儲存時鎖住畫面內所有input
等AJAX處理完回傳資訊後才解鎖
淺水員 iT邦大師 6 級 ‧ 2019-04-16 12:35:55 檢舉
單純討論,之前我處理大量資料的更新時,也是想過另外開API給JSON資料使用。那時候有想到另外一個問題,就是資料量太大時也許會造成連線逾時或是超過傳輸極限(儘管一般場合不大會發生)。在那種狀況之下還是要分批傳輸。雖然以這篇的背景應該是不會發生就是。
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

2
froce
iT邦大師 1 級 ‧ 2019-04-15 13:23:27
最佳解答

不想改你code,重寫比較快,這不是什麼難到要卡上幾天的功能:
http://jsfiddle.net/cy5htz47/
儲存我用當行的data-guid來代表。

1.你有很多多餘的html屬性根本用不到
2.能用ID請用ID來寫功能,不要亂用class
3.多餘的隱藏欄位用不到
4.好好規劃你的html結構,就像我之前跟你說的,一筆資料,就該從tr去發想,不要用觸發的按鈕去發想,要不是受限你的html結構,我可以少一個each迴圈。html規劃的好,你JS、JQ會好寫很多。

多去熟悉JS和JQ吧,你的程度還不到可以接案。

tenno081 iT邦研究生 4 級 ‧ 2019-04-15 14:19:26 檢舉

抱歉,結構我拿到時就長那樣,其他人也不太懂為什麼要這樣設計
隱藏欄位那個方法是其他人跟我說的,他解說後我也覺得頗為合理
只是沒想到我無法實現,那我您在我上一個問題中最新的留言我也
有看到,我回家後會再重新看JS跟JQ,一直這樣問我也會很不好意思
再次感謝您的解答

隱藏欄位是早期的設計理念方式。
其目的是為了要簡化post資料時的單純處理。
但其實這也是有危險性的就是了。

目前因為有非常多元化的js框架可供應用。
我猜測你接手的因該是古老級的程式碼。才會這樣。

一般來說如果可以轉換成新式的寫法就直接轉換會比較好。
但也得先了解原本的程式特性才動手。免得改一改後,一堆舊功能死給你看。

tenno081 iT邦研究生 4 級 ‧ 2019-04-15 15:28:11 檢舉

痾,老實說這個是全新的案子
我一來就加入這個案子,不過時間緊迫加上
人力不足的關係,所以這個案子有點混亂

0
淺水員
iT邦大師 6 級 ‧ 2019-04-15 16:01:29

不知道實際應用是不是需要鎖死整個畫面
我做了一個只鎖住每列的方式
(完成 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());
    });
});

我要發表回答

立即登入回答