1. 程式人生 > >jquery-easyui元件combobox模糊查詢在IE中資料太多導致瀏覽器崩潰

jquery-easyui元件combobox模糊查詢在IE中資料太多導致瀏覽器崩潰

       由於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);
        }
    };

原始碼下載:

combobox.js