Modifier des champs dans une table bootstrap-table
Je suis en train de faire des champs dans une table de Bootstrap Table qui est modifiable comme dans cet exemple, mais je ne peux pas le faire: http://issues.wenzhixin.net.cn/bootstrap-table/#extensions/editable.html
Je suis un chargement de données JSON, trie les colonnes, mais je ne peux pas faire que chaque champ de la table est modifiable.
<head>
<title>custom-sort</title>
<meta charset="utf-8">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap-table.min.css">
<link rel="stylesheet" href="assets/examples.css">
<script src="assets/jquery.min.js"></script>
<script src="assets/jquery.dataTables.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/bootstrap-table/src/bootstrap-table-custom.min.js"></script>
<script src="assets/bootstrap-table/src/bootstrap-table-editable.js"></script>
<script src="ga.js"></script>
</head>
<body>
<div class="container">
<h1>Custom Sort</h1>
<p>Use <code>sorter</code> column option to define the custom sort of bootstrap table.</p>
<table id="table" class="table table-bordered table-striped" data-editable="true" data-toggle="table" data-url="json/data1.json" data-pagination="true"></table>
</div>
$('#table').bootstrapTable({
url: 'json/data1.json',
columns: [{
field: 'id',
title: 'Item ID',
sortable: 'true',
editable: 'true'
}, {
field: 'name',
title: 'Item Name',
sortable: 'true',
editable: 'true'
}, {
field: 'price',
title: 'Item Price',
sortable: 'true',
editable: 'true'
}, ]
});
var $table = $('#table');
$(function () {
$table.on('click-row.bs.table', function (e, row, $element) {
$('.success').removeClass('success');
$($element).addClass('success');
});
});
JSON
[{
"id": 0,
"name": "Item 0",
"price": "$0"
},{
"id": 1,
"name": "Item 1",
"price": "$1"
},{
"id": 2,
"name": "Item 2",
"price": "$2"
}]
Pouvez-vous m'aider à faire tous les champs de la table modifiable s'il vous plaît.
Vous devez vous connecter pour publier un commentaire.
L'exemple ci-dessous montrent une initialisation de la table avec un champ " nom " qui est modifiable:
Source: http://issues.wenzhixin.net.cn/bootstrap-table/#options/detail-view.html
Modifiable Table est une Table de manipulation de plugin qui transforme un standard de tableau Html en responsive en place modifiable feuille de calcul avec l'entrée de validation basé sur jQuery et bootstrap 2/3. essayez ce lien
http://www.jqueryscript.net/table/Stylish-Editable-Table-Plugin-with-jQuery-Bootstrap-2-3-Editable-Table.html
Semble il vous manque un peu de css (bootstrap-modifiable.css fichier js (bootstrap-editable.js fichier, vous aussi inclus quelques autres js (jquery.dataTables.min.js).
Essayez de consulter la source de nouveau.
J'ai juste travaillé l'ajax côté de ça hier. Je vais inclure la nécessaire fichiers de la bibliothèque et de la partie du code nécessaire pour lancer ajax (en supposant que vous allez faire que, puisque vous êtes de chargement avec json).