Question

我使用jquery multiselect，但现在我遇到了一些问题。有些时候我需要显示超过5千条记录，对于IE8而言，它还没有成功。这是组件的样子吗？

enter image description here

以下是我配置多选的方法：

@Html.ListBoxFor(m => m.MateriaisSelecionados, new MultiSelectList(ViewBag.Materiais, "Id", "Codigo"))

if ($('#MateriaisSelecionados').length) {
    //* custom headers
    $('#MateriaisSelecionados').multiSelect({
        selectableHeader: "<div class='custom-header'>Materiais</div>",
        selectionHeader: "<div class='custom-header'>Materiais Ativos</div>"
    });
}

当我在IE8上打开de screen时，我收到此消息：

localhost is not responding due to a long-running script

加载所有记录需要5分钟以上。我想我可以在列表中使用搜索框，并在用户在搜索框中输入内容之后显示项目，但我找不到这样做的方法，或者其他可以正常工作的组件。

如果我只显示前500条记录，我的工作正常，但我确实需要为用户显示所有这些记录（因为他将选择在应用程序上为另一个CRUDS激活的内容）。

任何想法的人？

更新

好吧，我找到了一个解决方案，现在它正在运行。我选择手动创建它，所以我在视图上创建了2个ListBox，并且当用户选择＆＃34;所有项目中的项目时＃34; list我使用jquery将这些项目传输到另一个ListBox。我还添加了一个搜索框，并且始终在＆＃34;所有项目中显示最多300个项目＆＃34;名单。这是我现在的代码：

//All items
@Html.ListBoxFor(m => m.Materiais, new MultiSelectList(ViewBag.Materiais, "Id", "TextoBreve"), new { @class = "form-control select-list", @multiple = "multiple" })

//Selected items
@Html.ListBoxFor(m => m.MateriaisSelecionados, new MultiSelectList(ViewBag.MateriaisAtivos, "Id", "TextoBreve"), new { @class = "form-control select-list", @multiple = "multiple" })

$("#Materiais").change(function (e) {
    $("#Materiais option:selected").each(function () {
        $(this).appendTo("#MateriaisSelecionados");
    });

    var selectList = $('#MateriaisSelecionados option');
    selectList.sort(NASort);
    $('#MateriaisSelecionados').html(selectList);

    return false;
});

$("#MateriaisSelecionados").change(function (e) {
    $("#MateriaisSelecionados option:selected").each(function () {
        $(this).appendTo("#Materiais");
    });

    var selectList = $('#Materiais option');
    selectList.sort(NASort);
    $('#Materiais').html(selectList);

    //Filters the items for the first list
    FiltrarMateriais();

    return false;
});

function NASort(a, b) {
if (a.innerHTML == 'NA') {
    return 1;
}
else if (b.innerHTML == 'NA') {
    return -1;
}
return (a.innerHTML > b.innerHTML) ? 1 : -1;
};

谢谢你们的想法！

Answer 1

对于精选控件来说，5,000条记录太多了。检索和构建下拉列表不仅速度慢，而且任何用户都无法导航这样的控件。您可以考虑两个选项：

使用某种过滤器。如果有某种方法对这些记录进行分类或以其他方式将它们分成较小的组，请首先提供包含这些分组的选择列表，然后使用AJAX仅检索该组中的实际选择列表中的记录。
使用组合框/自动完成控件。我们的想法是，您的选择列表将具有可编辑的文本字段，用户可以在其中开始键入选项，并且选择列表将被过滤为仅匹配的条目。为了提高效率，您应该在选择任何记录（通常是3个以上的字符以减少过多的AJAX请求）之前等待用户输入，然后发出AJAX请求以仅引入名称与用户输入的名称相匹配的项目至今。您可以选择许多JavaScript插件来添加此功能，因此您不必担心从头开始构建它。

Answer 2

在浏览器视图中加载5,000条记录无论如何都是昂贵的，我认为这不是一个好方法......你是否考虑过分页，可能会将其分为10页，每页500条记录？

Answer 3

请不要，请！

浏览器和jQuery都不能与5.000控件一起使用。

我强烈建议您重新设计，这样您就不必显示大量控件。

Jquery MultiSelect列表超过5千条记录

3 个答案: