1. 程式人生 > >解決時間外掛mobiscroll在使用過程中的一個小缺陷

解決時間外掛mobiscroll在使用過程中的一個小缺陷

最近在寫一個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);

這樣修改後之前描述的問題就沒出現過了,如果有更好的方法希望留言!