2017-02-07 2 views
1

Ich habe das jQuery Plugin gewählt. aber meine Datensätze sind zu groß, so dass die Auswahlbox hängt und langsam ist. Hier ist, wie ich umgesetzt haben das Plugin:Wie effizient in Jquery gewählten Plugin zu verwenden?

var request = $.ajax({ 
    method: "POST", 
    url: "ajaxRequest.php", 
    dataType: "json", 
    data: {fn: 'getCompanyEvent', company_id: selected_cid}, 
    success: function(reqResult){ 
     var append_string = '<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">'+ 
       '<div class="row form-group">'+ 
        '<label class="control-label col-lg-3">Select'+ ' Event</label><span class="col-lg-1">:</span>'+ 
        '<div class="col-lg-8">'+ 
         '<select class="chosen" style="width:200px;" onChange="getTemp(this)>'+ 
          '<option>Select</option>'; 
         $.each(reqResult.result, function(ind, va){ 
          append_string += '<option value='+va.event_id+'>'+va.event_name+'</option>'; 
         });  
    append_string += '</select>'+ 
        '</div>'+ 
       '</div>'+ 
      '</div>'; 
     $('#dynmic_slct').append(append_string); 
     jQuery(".chosen").chosen(); 
    } 
}); 

ich Jquery verwendet haben ajax() .. Ajax-Antwort führen mehr als 20k Rekord, so dass es sehr langsam war in UI zu wählen, ich möchte mehr auflisten als 5k Werte im Auswahlelement.

+0

Ich denke, ich brauche einige Präzisionen über das Problem: Wird die Ajax-Anfrage beim Start der Seite oder bei jeder Auswahl gestellt? (Kann die Ajax-Verzögerung eine Ursache für die Verlangsamung sein?). Was genau ist langsam, das Öffnen der Auswahl, der Bildlauf, die Auswahl selbst? ist das Plugin für so viele Reihen gemacht? – Kaddath

+0

Es ist nicht effizient, 5k-Werte in ein Auswahlfeld zu laden, unabhängig von der verwendeten Methode ist dies immer langsamer als erwartet. Ich überlege, wie ich meine Daten anfordere. Die Aufteilung in mehrere Kategorien oder Paging kann die Dinge ein wenig schneller machen. oder sogar etwas anderes verwenden als eine Auswahlbox, vielleicht ein Suchfeld oder sogar eine Datenbank. –

Antwort

0

Sie fügen <option> Elemente für alle Datensätze hinzu, die von Ihrer Back-End-Ressource abgerufen wurden. Wie Sie sagten, ist Ihr Dataset sehr groß, daher ist es normal, dass die Auswahlbox hängt.

Sie können versuchen, einen Paging-Mechanismus für Ihre Auswahlbox zu implementieren. Zum Beispiel können Sie Ihre Backend-Ressource (ajaxRequest.php) mit einem offset-ähnlichen Wert (ajaxRequest.php? Offset = 50) parametrisieren und dann erhalten Sie für jede Anfrage eine konstante Anzahl von Elementen aus Ihrem Datensatz. Zum Beispiel können Sie Ihre Aufzeichnungen um 50 Artikel pro Anfrage erhalten.

Und dann für jede Anfrage Sie Ihre <option> Elemente wie Sie vorher anhängen. Eine letzte Sache ist, eine Schaltfläche oder etwas zu implementieren, um die nächsten Datensatzelemente anzufordern.

Eine andere Sache, die Sie versuchen können, ist das Filtern der Datenmenge durch Senden eines Parameters an die Back-End-Ressource und dann können Sie nur die gefilterten Ergebnisse an Ihre Auswahlbox anfügen. Sie können dies erreichen, indem Sie das Ereignis onChange des jQuery Chosen Plugin Filter Textbox implementieren.

Verwandte Themen