Jeditable plugin - Toutes les colonnes modifiables en même temps

Question

Je travaille avec Jeditable plugin. Ce que j'essaie de faire est de cliquer sur un bouton et tous les champs d'une certaine ligne deviennent éditables et passent automatiquement à leur état éditable. Donc, en d'autres termes, j'ai une table, je veux cliquer sur un bouton "Modifier" sur le côté d'une ligne et toutes les colonnes de cette rangée deviennent modifiables. Est-ce possible?

Answer 1

Oui, c'est possible.
Supposons que vous utilisiez Jeditable comme l'utilisateur doit confirmer la modification, de la même manière que sur le site de démonstration; regardez la section "Compteur de caractères": Jeditable Custom Inputs.

Et que vous devez mettre un bouton quelque part, ce qui provoque les éléments à éditer. Par exemple, si les éléments ont la classe "edit" (ex: <div class="edit">blah blah</div>) et que le code Jeditable est event:'dblclick' (ce qui signifie que vous devez double-cliquer pour modifier le champ), le code suivant fait exactement ce que vous voulez (testé, travail):

<div> 
    <div class="edit charcounter">blah blah</div> 
</div> 
<div> 
    <button type="button" class="edit_all_btns">Click this button and all the fields will become editable!</button> 
</div> 
<script type="text/javascript"> 
<!-- 
$(document).ready(function() { 
    $(".charcounter").editable("http://www.appelsiini.net/projects/jeditable/php/save.php", { 
    indicator: "<img src='http://www.appelsiini.net/projects/jeditable/img/indicator.gif'>", 
    type: "charcounter", 
    submit: 'OK', 
    tooltip: "Click to edit...", 
    onblur: "ignore", 
    charcounter: { 
     characters: 60 
    }, 
    event: 'dblclick' 
    }); 

    $('.edit_all_btns').click(function() { 
    $('.edit').dblclick(); 
    }); 

}); 
// --> 
</script> 

Demo

Mais voici une plus élaborée, travailler jsFiddle-exemple avec une table, où vous pouvez essayer le code:

http://jsfiddle.net/Sk8erPeter/qjrJX/