jquery-easyui元件combobox模糊查詢在IE中資料太多導致瀏覽器崩潰
阿新 • • 發佈:2018-11-04
由於combobox模糊查詢是吧原來的所有下拉的選項首先全部隱藏,然後再根據使用者輸入的值來判斷,如果正確,則顯示出來,本人測試1000條資料的時候在火狐裡並沒有問題,可是在IE8卻導致瀏覽器十分緩慢,經常導致瀏覽器奔潰。由於在IE中修改display的值讓元素顯示出來會導致整個dom樹重新載入一次,N多次迴圈之後便導致瀏覽器直接崩潰,我在下面修改了一下combobox.js模糊查詢的機制,改成一開始先全部清空,然後在把符合條件的元素載入進來,下面是修改的程式碼:
1.新增一個方法
function _2cc(_2d, _2e, _2f) { var _30 = $.data(_2d, "combobox").options; var _31 = $(_2d).combo("panel"); //$.data(_2d, "combobox").data = _2e; var _32 = $(_2d).combobox("getValues"); _31.empty(); for (var i = 0; i < _2e.length; i++) { var v = _2e[i][_30.valueField]; var s = _2e[i][_30.textField]; var _33 = $("<div class=\"combobox-item\"></div>").appendTo(_31); _33.attr("value", v); if (_30.formatter) { _33.html(_30.formatter.call(_2d, _2e[i])); } else { _33.html(s); } if (_2e[i]["selected"]) { (function () { for (var i = 0; i < _32.length; i++) { if (v == _32[i]) { return; } } _32.push(v); })(); } } if (_30.multiple) { _1a(_2d, _32, _2f); } else { if (_32.length) { _1a(_2d, [_32[_32.length - 1]], _2f); } else { _1a(_2d, [], _2f); } } _30.onLoadSuccess.call(_2d, _2e); $(".combobox-item", _31).hover(function () { $(this).addClass("combobox-item-hover"); }, function () { $(this).removeClass("combobox-item-hover"); }).click(function () { var _34 = $(this); if (_30.multiple) { if (_34.hasClass("combobox-item-selected")) { _1b(_2d, _34.attr("value")); } else { _d(_2d, _34.attr("value")); } } else { _d(_2d, _34.attr("value")); $(_2d).combo("hidePanel"); } }); };
2.修改_3b方法(模擬查詢的方法)
function _3b(_3c, q) { var _3d = $.data(_3c, "combobox").options; if (_3d.multiple && !q) { _1a(_3c, [], true); } else { _1a(_3c, [q], true); } if (_3d.mode == "remote") { _35(_3c, null, { q: q }, true); } else { var _3e = $(_3c).combo("panel"); //_3e.find("div.combobox-item").hide(); _3e.find("div.combobox-item").remove(); var _3f = $.data(_3c, "combobox").data; var arry = []; for (var i = 0; i < _3f.length; i++) { if (_3d.filter.call(_3c, q, _3f[i])) { arry.push(_3f[i]); } } _2cc(_3c, arry, true); } };
原始碼下載: