解決時間外掛mobiscroll在使用過程中的一個小缺陷
阿新 • • 發佈:2019-02-16
最近在寫一個web專案時,需要有一個根據年份查詢當年入職人員資料的功能,於是我選擇了mobiscroll這個外掛做了時間滾輪。一開始感覺效果不錯,但是在測試的時候發現了一個小bug。
因為在同一個頁面中使用者也可以通過查詢id將入職時間查出,所以當時就直接把通過id查出的入職時間(in_year)賦給了時間滾輪$(“#enroll”).val(in_year).但是使用時會發現滾輪上顯示的時間和你賦值的in_year不一致,如圖這裡時間滾輪上顯示的時2014年,但是我通過id查詢回來的in_year可能是2015年。所以即使將滾輪的值設為2015,但滾輪上顯示的還是2014。
這樣,不知道情況的使用者看到了滾輪上顯示的是2014點選查詢按鈕顯示的卻是2015年的資訊。在網上搜了一下沒找到什麼專門的解決方法,於是只好通過修改一些程式碼邏輯來解決這個bug。
首先在js檔案中定義一個全域性變數global與current來記錄滾輪最新顯示的時間與通過id查詢到的入職時間:
global=null;
current=null;
$("#enroll").change(function(){global=$("#enroll").val()});
接著在時間滾輪的查詢按鈕事件searching()中編寫程式碼:
function searching(){ if(current!=null&&global!=null) { //判斷設定,以時間輪的顯示時間為準 if(current!=global &&$("#enroll").val()==current) { $("#enroll").val(global); } } //將 $("#enroll").val()傳給後臺的方法 searchByYear(); //每次點選查詢按鈕後,都將兩個全域性變數置為null global=null; current=null; }
最後,只要在根據id查詢入職年份的返回的方法中寫:
if(global==null)
global=$("#enroll").val();
current=in_year;
$("#enroll").val(in_year);
這樣修改後之前描述的問題就沒出現過了,如果有更好的方法希望留言!