Comment afficher la liste déroulante de manière dynamique

Question

J'utilise la vue grille pour afficher les données de la base de données. Il y a une colonne d'état qui contient 3 valeurs. Je souhaitais que l'utilisateur puisse changer la valeur en utilisant une liste déroulante dans la grille qui sera visible lorsque l'utilisateur cliquera sur le ChangeStatus mais qui est présent sur chaque ligne.Toute idée comment y parvenir?

Answer 1

En utilisant un caché qui est rempli avec les trois options, et une valeur supplémentaire qui est l'ID de la ligne qui est en cours de modification. Ajoutez ensuite un gestionnaire d'événement onclick au texte de la colonne d'état. Lorsque vous cliquez dessus, remplacez le texte par le menu déroulant et définissez la valeur sur l'ID de la ligne.

Le menu déroulant doit comporter un événement, activé par un commutateur, qui déclenche un rappel ajax vers un service Web (ou une méthode) qui prend en compte la valeur et l'ID de la ligne à modifier. Enfin, une fois l'appel ajax effectué, masquez le et faites du texte de cette cellule la valeur (ou le texte) de l'élément sélectionné.

Edition - un code de psudeo pour vous aider

<table> 
    <tr> 
     <td><span id="recordId" class="select">Status</span></td> 
    </tr> 
</table> 


<div style="display: none" id="hiddenDiv"> 
<select id="statusSel" > 
    <option value="0"> - Select Status - </option> 
    <option value="Status1">Status 1</option> 
    <option value="Status1">Status 1</option> 
    <option value="Status1">Status 1</option> 
</select> 
</div> 


var statusSel = $('#statusSel'); 
var recordId = 0; 


statusSel.change(function() { 
    var newStatus = $(this).value(); //I think this is right for select 

    //Ajax Call to web server (see $.ajax() in jQuery notes) 
    $.ajax(/* pass newStatus and recordId */); 

    $('#hiddenDiv').html(statusSel); //Move statusSel back to hidden div 
    $(this).parent().html(newStatus); //set the span value to the new status 
}); 


$('.select').click(function() { 
    $(this).html(statusSel); 
}); 

probablement un certain nombre de façons de le faire plus propre - mais cela devrait vous donner l'idée approximative.

Answer 2

Pouvez-vous utiliser jQuery dans votre projet? Si c'est le cas, vous pouvez utiliser l'appel API jQuery show() pour afficher la liste déroulante lorsque l'utilisateur clique sur le lien/bouton "Modifier l'état".