超過5千條記錄的Jquery MultiSelect列表

我正在使用jquery multiselect，但現在我正面臨一些問題。有些時候我需要顯示超過5千條記錄，對於IE8而言，它並不適用。這是組件的外觀？超過5千條記錄的Jquery MultiSelect列表

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我得到這個消息：

localhost is not responding due to a long-running script

而且它超過5分鐘加載所有記錄。我以爲我可以使用搜索框的列表，並顯示在用戶在搜索框中鍵入內容後的項目，但我找不到這樣做的方法或另一個可以工作的組件。

如果我只顯示前500條記錄，我工作正常，但我確實需要爲用戶顯示所有這些記錄（因爲他將選擇在另一個CRUDS的應用程序上激活的內容）。

任何想法的傢伙？

UPDATE

嗯，我找到了解決辦法，現在它的工作。我選擇手動創建它，所以我在視圖上創建了2個ListBox，並且當用戶選擇「所有項目」列表中的項目時，我使用jquery將這些項目轉移到另一個ListBox。我還添加了一個搜索框，並始終在「所有項目」列表中顯示最多300個項目。這是我的代碼現在：

//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; 
};

謝謝你們的想法！

來源

2014-12-02 Deise Vicentin

無論如何，在瀏覽器視圖中加載5,000條記錄將代價高昂，我認爲這不是一個好方法......您是否考慮過分頁，也許將其分爲10頁，每頁500條記錄？

來源

2014-12-02 12:51:07

但是，如何分頁列表？我不知道如何使用這個組件來做到這一點:( – 2014-12-02 12:53:04

我不認爲這個plgugin有這個能力，但是如果你要處理數千條記錄，你應該考慮改變它，我從來沒有使用過分頁插件（我手工完成），但我相信你可以在[http://plugins.jquery.com/tag/pagination/](http://plugins.jquery.com/tag/）找到一個不錯的插件。分頁/）。 – 2014-12-02 12:58:58

謝謝。我正在嘗試新的選項。當我找到解決方案時，我會發布更新。 – 2014-12-02 14:08:22

請不要，請！

瀏覽器和jQuery都不能與5.000控件配合使用。

我強烈建議您重新設計您的設計，這樣您就不必顯示大量控件。

來源

2014-12-02 12:54:38

我正在處理它，但它並不是那麼容易，因爲用戶喜歡這種設計:( – 2014-12-02 13:46:49

您可以輕易責怪該公司不更新他們的IE版本和個人電腦:) – 2014-12-02 13:53:21

是的，我想這樣做 – 2014-12-02 14:07:23

對於選擇控件而言，5,000條記錄太多了。不僅是檢索和構建到下拉列表中會很慢，但對於任何用戶來說，導航這樣的控件幾乎是不可能的。有兩種選擇可以考慮：

使用某種過濾器。如果有某種方式對這些記錄進行分類或以其他方式將它們分成較小的組，請首先提供一個包含這些分組的選擇列表，然後使用AJAX僅檢索該組中的記錄以獲取您的實際選擇列表。
使用組合框/自動完成控件。這個想法是，您的選擇列表將有一個可編輯的文本字段，用戶可以開始輸入選項，並且選擇列表將被過濾爲僅匹配的條目。爲了提高效率，在選擇任何記錄（通常3個字符以減少過多的AJAX請求）之前，您應該等待用戶輸入，然後發出AJAX請求以僅引入名稱與用戶輸入的內容匹配的項目至今。有許多JavaScript插件可供您選擇添加此功能，因此您不必擔心從頭構建它。

來源

2014-12-02 14:31:40

超過5千條記錄的Jquery MultiSelect列表

回答

相關問題