EasyUI下拉框實現多選、全選、複選和模糊查詢
其實整個的思路還是很麻煩的。之前網上查不到能囊括上面所有東西的。但是參考之後還是摸出了一種新的方法，但是仍然不完美。畢竟是在封裝的東西上面修改。
程式碼實現：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> //資原始檔載入 jQuery,EasyUI等js檔案 </head> <script> var selectarray = [-1]; $(document).ready(function(){ init(); }); function init(){ $("#level").append("<option value='-1' selected='true') >全選反選</option>"); var comboboxarray = []; comboboxarray.push(-1); for(var i=0;i<6;i++){ $("#level").append("<option value='" + i + "'>等級" + i + "</option>"); comboboxarray.push(i); } $("#level").combobox({ multiple:true, editable:true, onSelect:function (record) { //easyui中的record 記錄了value text selected 屬性 //for(var i in record){ // var property=record[i]; // description+=i+" = "+property+"\n"; // console.info(description); //} selectarray.push(record.value); if($('#level').combobox('getText').split(",").length!=selectarray.length){ selectarray=[]; selectarray.push(record.value); } if(record.value==-1){ $('#level').combobox('setValues', comboboxarray); selectarray = comboboxarray.concat(); }else{ $('#level').combobox('setValues', selectarray); } }, onUnselect:function (record) { for(var ele in selectarray){ if(selectarray[ele]==record.value){ selectarray.splice(ele,1); } } if(record.value==-1){ $('#level').combobox('setValues', "")； selectarray=[]; } }, }); } </script> </head> <body> <div > <select id="level" name="level" class="easyui-validatebox" type="text" style="width:90px;"> </select> </div> </body> </html>
onSelect和onUnselect能分別選擇和取消選擇列表項的時候觸發。
而要做到全選功能的話，其實可以直接用一個數組物件comboboxarray儲存了整個下拉框的值。將combobox有的值都push存入陣列中。
當選到全選的時候，其實就是把整個combobox的值設為這個陣列。
想法，反選的時候，把combobox的值設為空。
function中的record 記錄了value text selected 屬性。所以根據全選反選的value值能判斷是否點選。
而當不是點選全選反選的時候，我們需要另外一個數組selectarray來記錄，已經被選擇過的下拉項還有移除。
但是selectarray記錄全選時需要注意，selectarray = comboboxarray.concat();
之前寫成了selectarray = comboboxarray。後續有各種bug。selectarray是會改變的，selectarray = comboboxarray這樣selectarray和comboboxarray都是對包含全部下拉框值的陣列物件的引用，所以selectarray 的改變是直接影響的，而comboboxarray本身是用來儲存所有值的，並不能讓它去改變。
所以selectarray = comboboxarray.concat(); 返回了一個新陣列後不會影響到舊陣列。
反選時，將對應的值從陣列中移除。
splice方法表示根據下標移除1個元素。
模糊查詢EasyUI封裝的並不是太好。
目前還是有bug。
如果你打了等後，雖然是能模糊查詢到，但僅限於你查第一個，所以作用其實不大。
即使查完第一個後再選擇之後。$('#level').combobox('getText')你會發現你所拿到的。是模糊查詢輸入的文字加分隔符。例如輸入等，選擇等級0，那麼拿到的值是等，等級0。
還有一個問題是，你選擇了一些選項之後，人工把那些文字刪除之後，再來選，之前的記錄還在。
原因就是沒有事件觸發來移除你上次選擇後陣列儲存的資料。
所以針對這兩種bug，最簡單粗暴的解決方式是讓這個下拉框不可編輯。