bootstrap-selezionare con pulsanti personalizzati e aggiungere nuovi valori onthe fly

Question

avevo bisogno di utilizzare un elenco a discesa che potrebbe fare tale funzionalità:

1. recupera in modo dinamico e valori carica dal database
2. ha una casella di ricerca incorporata
3. dispone di 2 pulsanti personalizzati su ogni Li, uno per l'eliminazione e uno per la modifica.
4. il campo di ricerca, se il testo cercato non esiste, aggiungerlo su "invio" premere, sulla stessa selezione e anche sul database con Ajax.

ho scelto il costume selezionare per 'bootstrap-select' @twitter bootstrap dalla repository git silviomoreto e perché non ho trovato la funzionalità che voglio ho cercato di fare per conto mio.

Quindi, per coloro che necessitano o vorranno aggiungere tale funzionalità nelle proprie app Web, annoto la mia soluzione, che non è la soluzione migliore ma funziona, e sono aperto a qualsiasi suggerimento per farlo funzionare meglio.

1. passo: creare un selectpicker con i parametri: dati-size = "5" (Mostra 5 valori e la barra di scorrimento aggiuntivo), i dati-live-search = "true" (aggiungere la casella di ricerca su la parte superiore) e caricare i valori che mi da db (preferibilmente con l'Ajax):

 <select class="selectpicker typedropdown" data-size="5" data-live-search="true"> 
          <?php 
          $counter=0; 
          foreach($eventTypeList as $evType){ 
           $counter++; 
           if(is_array($evType)){ 
            echo "<option>".$evType['type_name']."</option>"; 
           }else{ 
            echo "<option>".$evType."</option>"; 
           } 

          } ?> 
         </select> 

2. passo: aggiungere i pulsanti personalizzati (modificare, cancellare) (ignorare la funzione prototipo ' createLi ')

ignorare la funzione prorotype 'createLi' sul vostro file js principale in questo modo:

$.fn.selectpicker.Constructor.prototype.createLi = function(){..} 

Interno:

var generateLI = function (content, index, classes, optgroup) { 
     return '<li' + ........ 

poco prima del 'ritorno' aggiungere la riga con tha due classi dei pulsanti:

content += "<div class='removeTypebtn'></div><div class='editTypebtn'></div>"; 

in modo che, quando si creano gli elementi li si crea anche il due pulsanti personalizzati su ogni riga.

3. passo: cattura 'clicca su' Eventi per modificare & valore di eliminazione (fa anche una richiesta AJAX sul database per aggiornare il DBTABLE)

$(document.body).on('click','.btn-group.typedropdown .dropdown-menu ul li .removeTypebtn',function(event){ 
     var index = $(event.target).closest("li").data('original-index');//get the item index 
     var type_name = $(event.target).closest("li").text(); 
     deleteType(index,type_name); 
    }); 

in modo simile catturiamo l'evento "clic" per "modifica oggetto", quindi lo ometto.

ora abbiamo bisogno di fare la parte interessante, per eliminare l'elemento selezionato dalla selectpicker e anche fare una richiesta AJAX per eliminarlo dalla DBTABLE. il database è oltre l'ambito del tutorial quindi, lo lascio fuori. prestare attenzione all'interno della funzione di successo come rimuovo.

function deleteType(index,type_name){ 
     var url = "<?php echo $domain.$deleteType; ?>"; 
     data = {'index':index,'type_name':type_name}; 
     $.ajax({ 
      cache: false, 
      url : url, 
      type: "POST", 
      data : data, 
      success : function(data, textStatus, jqXHR){ 
       $('.typedropdown').find('[data-original-index=$index]').remove();//remove selected item from selectpicker 
      $('.typedropdown').find('option:contains($type_name)').remove();";// remove value also from the hidden select 
       $('.selectpicker.typedropdown').selectpicker('val', []);//clear selected 
      }, 
      error : function(xhr, ajaxOptions, thrownError){ 
       alert(thrownError); 
      } 
     }); 
    } 

4. passo: creare la funzionalità 'aggiungi nuovo valore' su Inserisci (come sapete il campo di ricerca permette solo ricerche all'interno del Li)

così, quando abbiamo init il componente selectpicker, si modifica il messaggio "noneResultsText", modificando il parametro : noneResultsText:

//init selectpicker 
    selectPickerType = $('.selectpicker.typedropdown').selectpicker({ 
     noneResultsText:'Add new {0}', 
     selectOnTab: true 
    }); 

così, ora ogni volta che scriviamo una nuova parola che non esiste, si ottiene il messaggio Aggiungi nuovo 'myword'

Ora abbiamo bisogno di catturare l'evento click.

$('.selectpicker.typedropdown').data('selectpicker').$searchbox.on('keydown',function(e){ 
      if(e.keyCode == 13){ 
       addNewDropdownValue(e.target.value,'type'); 
       return false; 
      } 
     }); 

e la funzione di addNewDropdownValue: (con una richiesta Ajax per DBTable per aggiungere il nuovo valore) (prestare attenzione alla funzione di successo)

function addNewDropdownValue(newValue,tble){ 
    var url = "<?php echo $domain.$addDropdownValueURL; ?>"; 
    data = {'newValue':newValue,'tble':tble}; 
    var loading = $('.loading'); 
    $.ajax({ 
     cache: false, 
     url : url, 
     type: "POST", 
     data : data, 
     beforeSend: function(xhr) { 
      loading.css('top',screen.height/2); 
      loading.css('left',screen.width/2); 
      loading.html('<div><img alt="loading..." src="<?php echo $domain; ?>/assets/images/loader/ajax_loader_blue_48.gif" /></div>').show(); 
     }, 
     success : function(data, textStatus, jqXHR){ 
      loading.fadeOut(500); 
      $('.selectpicker.".$tble."dropdown').append('<option selected>$newValue</option>');//append new item on the selectpicker 
      $('.selectpicker.".$tble."dropdown').val('$newValue');//select the new value 
      $('.selectpicker.".$tble."dropdown').selectpicker('refresh');//refresh the selectpicker 
      $('.".$tble."dropdown').removeClass('open');//close the selectpicker 
     }, 
     error : function(xhr, ajaxOptions, thrownError){ 
      alert(thrownError); 
     } 
    }); 
} 

il gioco è fatto, ora abbiamo un selettore di selezione bootstrap personalizzato con i pulsanti cancella e modifica su ogni riga e aggiungi nuove funzionalità di testo su invio.

per favore con qualsiasi mezzo, dimmi la tua opinione su come possiamo farlo funzionare meglio o se avete domande.

Answer 1

Come si può fare meglio è rimuovere PHP dall'equazione. In effetti, rimuovi qualsiasi codice lato server dalla generazione di elementi HTML o DOM. Questo ti lascerà con due parti, il javascript per rendere l'interfaccia utente e i metodi del database tramite un'API (node.js o simili).

L'implementazione sarebbe simile alla seguente -

$.ajax({ 
    url: "/api/databaseCall/", 
    success: function(data){ 

/* 
Build DropDown 
the data variable will be a hash or array of returned db results 
iterate over them and build UI 
*/ 

    for(var i=0; i < data.results.length; i++){ 

     var row = '<option id=' + data.results[i].id + '>' + data.results[i].value + '</option>'; 
     $(".dropdown").append(row); 
    } 

    } 
}); 

angolare, Reagire, spina dorsale sono tutti costruiti con questo approccio in mente. L'unico che approvo in questo momento è backbone.js. Backbone è molto facile da imparare.

Una volta costruita l'interfaccia utente in modo programmatico con javascript, qualsiasi funzionalità verrà associata automaticamente utilizzando un framework come backbone.

Answer 2

Puoi farlo funzionare meglio dimenticandoti di quel PHP in cima che in realtà inizia tutto questo.

Supponiamo di avere una funzione javascript che eseguirà ajax sul server e otterrà i valori anziché quel codice PHP. Lo chiameremo function fetchData()

fetchData() otterrà i valori dal database, svuota la selezione se ha valori e inserisce i nuovi valori nella selezione. Quindi, continuerai ad allegare i tuoi eventi. (modifica, cancella, ecc ...)

ora su documento pronto fetchData();

all'eliminazione, eseguire la funzione di eliminazione, quindi, fetchData();

durante l'aggiornamento, eseguire la funzione di aggiornamento, quindi, fetchData();

su qualsiasi evento a cui si possa pensare, eseguire la funzione evento, quindi fetchData();

La bellezza di questo metodo è che non è necessario aggiornare manualmente gli elementi quando si elimina o si aggiorna. Inoltre, ricevi sempre nuovi record dal database ogni volta che recuperiData().

Immaginate che ci siano 10 diversi utenti che aggiornano i record su 10 computer diversi. alla vecchia maniera come un utente, non vedrei quello che gli altri utenti hanno aggiornato fino a quando non aggiorno la pagina. ma ora posso vederlo ogni volta che interagisco con la pagina perché recupererà dal database e otterrà tutti i record.

si può anche fare un ulteriore passo avanti e dire ogni 30 secondi fetchData(); quindi sono sempre aggiornato con le nuove informazioni anche quando non interagisco con la pagina.

Questo rende il vostro codice pulito. Devi solo preoccuparti di una manciata di eventi dopo aver scritto questa funzione, e non devi preoccuparti di cosa succede dopo gli eventi, sullo schermo degli utenti, perché chiami sempre fetchData() e sei fatto. Invece di rimuovere un'opzione quando la eliminano o aggiornano il testo e il valore per un'opzione quando la aggiornano ecc .. etc ... eccetera ...