jquery tabledit

jQuery-Tabledit v1.2.7

Éditeur en ligne pour tableaux HTML compatible avec Bootstrap. Tabledit utilise Ajax pour enregistrer une nouvelle ligne et pour modifier et supprimer la ligne.

Le plugin fonctionne avec d'autres plugins :

• Plugin DataTable

Vous pouvez insérer différents types de balises

Plus dans l'exemple 7 sur https://bluesatkv.github.io/jquery-tabledit/#examples7

Vous pouvez ajouter une nouvelle ligne au tableau

Plus d'informations dans l'exemple 9 sur https://bluesatkv.github.io/jquery-tabledit/#examples9-10

Utilisation de base

1. Ajoutez le plugin jQuery tabledit après la bibliothèque jQuery.

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery.tabledit.js"></script>

2. Créer une table Bootstrap avec des données

 <table class="table table-hover" id="my-table">
    <thead>
        <tr>
            <th>Id</th>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
            <th>Column 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
            <td>Data 4</td>
        </tr>
    </tbody>
</table>

3. Appelez le plugin sur votre table existante et spécifiez les colonnes modifiables comme vous le souhaitez.

 $('#my-table').Tabledit({

    columns: {
      identifier: [0, 'id'],                    
      editable: [[1, 'col1'], [2, 'col1'], [3, 'col3'], [4, 'col4']]
    }

});

Exemples

Valeur en lecture seule dans TD

Vous définissez cela dans le tableau modifiable, si vous souhaitez en lecture seule, laissez la colonne en dehors du tableau « modifiable », par exemple : la colonne 3 ne serait pas modifiable.

 $('#my-table').Tabledit({

    columns: {
      identifier: [0, 'id'],                    
      editable: [[1, 'col1'], [2, 'col1'], [4, 'col4']]
    }

});

Documentation

Documentation complète complète par BluesatKV sur https://bluesatkv.github.io/jquery-tabledit/#documentation

Journal des modifications

Voir CHANGELOG sur https://github.com/BluesatKV/jquery-tabledit/blob/master/CHANGELOG.md