Création de nouvelles lignes modifiables dans une table

Question

J'essaie d'ajouter des détails à une base de données en utilisant des lignes dynamiques ajax et table.

par exemple.

----

{Client: menu déroulant} | {Description: textarea} | supprimer

Ajouter un nouveau client

---

Lorsque l'utilisateur clique dessus montre le menu déroulant de tous les clients disponibles. lorsque vous cliquez, il affiche simplement le nom du client sélectionné (pas le menu déroulant)

De même avec la description je veux sur cliquez pour leur permettre de modifier la description de la zone de texte, mais lorsque vous cliquez loin, il affiche seulement le texte vous venez d'entrer. (pas le contour de la zone de texte)

Ajouter un nouveau bouton client crée une nouvelle ligne vide.

Quelles bibliothèques ou exemples peuvent m'aider à démarrer avec cela?

J'ai vu cela récemment dans une application récemment. Dans cette application, il était possible d'ajouter de nouveaux éléments/lignes via ajax et HTML dynamique.

Answer 1

Vous devriez être en mesure de le faire assez facilement en utilisant jQuery (regardez les sélecteurs, les événements & manipulation dans leurs docs). Par exemple, pour le menu déroulant

<span id="customer-name"></span> 
<select name="customer-list" id="customer-list"> 
    <option class="name" value="cust-1">Frank Frankson</option> 
    <option class="name" value="cust-2">John Johnson</option> 
</select> 

Et le jQuery:

$('.name').click(function(){   
    $('#customer-name').text($(this).text()); 
    $('#customer-list').hide(); 
}); 

Dans cette fonction, vous pouvez faire quelque chose avec la valeur de l'élément d'option si nécessaire (un poste ajax ou autre).

Le principal pour changer la description de zone de texte serait le même (vous pouvez saisir le texte de la zone de texte, l'ajouter à un div & cacher la textarea, si elles doivent modifier à nouveau, juste montrer la textarea & cacher la div)

Answer 2

Utilisez jQuery.

Utilisez le tokenizing autocomplete plugin for jQuery

Pour modifier inplace utilisation Jeditable. Je resterais à l'écart des listes déroulantes, ils sont presque toujours de mauvaise conception, que ce soit dans un menu ou en sélectionnant parmi une longue liste d'options. Pour quelque chose comme une liste de clients qui est susceptible d'être longue, il est un choix terrible d'un composant de l'interface utilisateur.

La seule fois où il est vraiment utile d'utiliser une liste déroulante est lorsque la liste d'options est courte et bien connue. Donc, pour que ce soit acceptable, il doit probablement s'agir d'une liste d'options qui changent rarement, voire jamais, qui compte moins d'une dizaine d'articles et qui est fréquemment utilisée (c'est donc bien connu). Les gouttes sont douloureuses.

Answer 3

La plupart des sites sur lesquels vous voyez une telle fonctionnalité l'exécutent avec style - vous pouvez styler une zone de texte pour qu'elle ressemble à du texte brut (en supprimant la bordure et en définissant la couleur d'arrière-plan transparente). Lorsque l'entrée est cliqué (centrée), les changements de style:

<style> 
    .blurredText { border: none; background-color: transparent; } 
</style> 
. . . 
<input type="text" class="blurredText" value="Click me to edit" 
    onfocus="this.className=''" 
    onblur="this.className='blurredText'"/> 

du style d'une sélection de la même manière peut se révéler difficile cependant, étant donné que les contrôles de sélection sont notoirement résistants aux CSS. Vous pouvez toujours utiliser la méthode proposée par Dave.