再說combobox——onLoadSuccess用法執行個體

標籤：easyui   combobox   級聯   

不知道大家有沒有發現，在easyUI的combobox實現級聯這篇文章裡

在對combobox設定的時候，我寫了一個onLoadSuccess函數。

這個函數是在載入完遠端資料成功後被觸發，大致可以分為下面幾種情況：

1、若不在onBeforeLoad中限制，無論用何種方式初始化時必觸發一次，因為初始化時onBeforeLoad無論如何也都會觸發一次

2、若不在onBeforeLoad中限制，在使用remote方式載入資料時，每次發起請求到成功接收到資料後都會觸發一次

我之前寫的onLoadSuccess函數是為了在進入修改表單的頁面時，當主combobox載入資料並翻譯完畢後，觸發onLoadSuccess從而來載入並翻譯級聯combobox中的值。

因為級聯的combobox完全是被動的，當建立的時候我們是在onSelect這個函數中觸發的，而修改進來就需要依靠onLoadSuccess了。

下面看一下我之前的寫法：

     onLoadSuccess:function(){     var value = $(this).combobox('getValue');     if(value != ''){    <span style="white-space:pre"></span>$('[comboname=city]').combobox('reload', 'test/getCityListByProvince?id=' + $(this).combobox('getValue'));    }     }

這裡先判斷了主combobox中是否有值，若有值就去載入級聯combobox中的資料去翻譯。

有什麼問題嗎？

這對於editable:false的下拉選擇框來說好像沒什麼問題，因為value肯定只能是對應的value，而不會是其他亂七八糟的東西

但是如果像前一篇文章一樣是實現了combobox的自動提示功能的那似乎就有些問題了。

比如我們在輸入關鍵字時，每輸一個關鍵字，都會觸發onLoadSuccess，且此時value也有值，且就是你輸入的那個值（但是這裡個人感覺combobox的設計有點問題，因為輸入的值應該作為text才對，沒有select之前，value都應該為空白才對）

這樣一來，就會多出很多錯誤的請求，因為級聯的那個請求只需要在onSelect的時候觸發才對。

那麼如何改進呢？增加一個判斷條件吧

方案1：if($(this).combobox(‘getValue‘) == $(this).combobox(‘getText‘)){return}

看似可行，但實際上發現輸入速度過快時，兩者的值會不一樣！原因也沒有深究，放棄之

方案2：由於我這裡用到的value都是數字，所以可以用Regex判斷  

if(/^\d+$/.test(value))，這種方案暫時是可行的，但是也不完美，當使用者輸入數字時也會去觸發關鍵字搜尋，所以也得不到什麼結果。

方案3：可以利用onBeforeLoad來判斷

    onBeforeLoad: function(param){          if(param == null || param.q == null || param.q.replace(/ /g, '') == ''){              var value = $(this).combobox('getValue');              if(value){// 這裡可以判斷為修改，在這去載入級聯combobox中的資料                param.id = value;                  return true;              }              return false;          }      } 

方案2和方案3用哪種其實都可以達到目的~

再說combobox——onLoadSuccess用法執行個體