优化大型多选列表

时间:2016-03-19 20:44:31

标签: javascript c# jquery ajax twitter-bootstrap

我有三个MultiselectLists 有22个价值的国家 拥有约800个价值的城市 具有~1700值的网站

我正在使用jquery bootstrap-multiselect库 对于我正在尝试做的事情,用户没有注意到任何开销是足够快的,除非在一种情况下,当用户选择USA 600城市和1200-1300站点被检查/选择时,这在IE中大约需要30秒,以及在Firefox中6秒,足以让合理的人相信页面出现问题。

我根本不想改变网站的用户界面,因为这在其他所有情况下都能很好地发挥作用,包括当用户点击“全选”或“取消选择全部”并且只想运行完整时报告

这两个函数大约需要90-95%的时间来执行

.done(function(data) {
    var li = $('<li />');

    li.append(data);
    li.append('<a href="#" class="paginated"><i class="icon-undo"></i>LOAD MORE</a>');


     $('#favoritesul').append(li);
})

这是我用来选择所有选项的代码,我有一个Dictionary&gt;&gt;();我从我的控制器传递到我的观点,管理国家/城市/和网站之间的关系

getInputByValue: function(value) {
    var checkboxes = $('li input', this.$ul);
    var valueToCompare = value.toString();

    for (var i = 0; i < checkboxes.length; i = i + 1) {

        var checkbox = checkboxes[i];

        if (checkbox.value === valueToCompare) {
            return $(checkbox);
        }
    }
}

getOptionByValue: function(value) {
    var options = $('option', this.$select);
    var valueToCompare = value.toString();
    for (var i = 0; i < options.length; i = i + 1) {
        var option = options[i];
        if (option.value === valueToCompare) {
            return $(option);
        }
    }
}

一些想法: 1.也许在美国的情况下,我可以做一个Ajax,并将所有内容发布到服务器,然后返回三个新的选择列表并检查相应的选项?这个问题是我不认为这比7秒或8秒少,如果不是更长时间仍然太长

  1. var options = $('option',this。$ select); 这个Jquery选择比使用原生javascript Document.getelementsbytagname慢几个数量级,因为我知道所有的复选框都有唯一的值,也许我可以用原生的javascript替换这个Jquery选项并获得所有的复选框

  2. 作为一个'hack',我可以在最开始时发送两个看不见的多选列表,并检查所有美国的方框,这些不可见的多重选择在大多数方面与可见的多重选择完全相同但是如果用户选择美国,这些显示而不是原件。这实际上确实有效,它使网站变得有点慢,但由于选择其他所有选项都是如此之快,这并不重要,它似乎是一个低于标准的解决方案,但这是我目前最好的

  3. 如果有人想到任何其他事情或者可以就此提出任何建议,我将非常感激

    真诚的约什

0 个答案:

没有答案