Plugin Jquery Footable - Edition de ligne
Bonjour à tous,
J'utilise le plugin jquery footable (http://fooplugins.com/plugins/footable-jquery/) pour réaliser un tableau dans lequel j'inscris des interlocuteurs (personnes) avec tout un tas d'informations, Nom, prénom, téléphone, mail, etc...
J'en suis au point ou, il est pleinement responsive, les fonctions de tri marchent, de recherches également. Mais l'édition de ligne non...
Tout d'abord, voici le code en question :
Le JS :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
| $(document).ready(function() {
var $modal = $('#editor-modal'),
$editor = $('#editor'),
$editorTitle = $('#editor-title'),
ft = FooTable.init('#editing-example', {
"sorting": { "enabled": true },
columns: $.get('columns.json'),
rows: $.get('test.json'),
editing: {
"addText": "Ajouter un nouvel interlocuteur",
enabled: true,
addRow: function(){
$modal.removeData('row');
$editor[0].reset();
$editorTitle.text('Ajouter un nouvel interlocuteur');
$modal.modal('show');
},
editRow: function(row){
var values = row.val();
$editor.find('#id').val(values.id);
$editor.find('#firstName').val(values.firstName);
$editor.find('#lastName').val(values.lastName);
$editor.find('#jobTitle').val(values.jobTitle);
$editor.find('#startedOn').val(values.startedOn);
$editor.find('#dob').val(values.dob);
$modal.data('row', row);
$editorTitle.text('Modifier #' + values.id);
$modal.modal('show');
},
deleteRow: function(row){
if (confirm('Voulez-vous vraiment supprimer cet interlocuteur?')){
row.delete();
}
}
}
}),
uid = 10;
$editor.on('submit', function(e){
if (this.checkValidity && !this.checkValidity()) return;
e.preventDefault();
var row = $modal.data('row'),
values = {
id: $editor.find('#id').val(),
firstName: $editor.find('#firstName').val(),
lastName: $editor.find('#lastName').val(),
jobTitle: $editor.find('#jobTitle').val(),
startedOn: moment($editor.find('#startedOn').val(), 'YYYY-MM-DD'),
dob: moment($editor.find('#dob').val(), 'YYYY-MM-DD')
};
if (row instanceof FooTable.Row){
row.val(values);
} else {
values.id = uid++;
ft.rows.add(values);
}
$modal.modal('hide');
});
}); |
Le code en rouge est le code qui pose problème, que j'expliquerais plus tard.
L'html :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
| <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet">
<!-- Prism -->
<link href="footable.standalone.css" rel="stylesheet">
<!-- FooTable Bootstrap CSS -->
<link href="footable.core.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="docs.css" rel="stylesheet">
<script src="demo-rows.js"></script>
</head>
<body>
<table id="editing-example" class="table" data-sort="true" data-editing-show-text='<span class="fooicon fooicon-pencil" aria-hidden="true"></span> Edit rows' data-editing="true" data-editing-always-show="true" data-editing-add-test="Ajouter un nouvel interlocuteur" data-filtering="true" data-editing-edit-text='<span class="fooicon fooicon-pencil" aria-hidden="true"></span>' data-paging="true"></table>
<div class="modal fade" id="editor-modal" tabindex="-1" role="dialog" aria-labelledby="editor-title">
<style scoped>
/* provides a red astrix to denote required fields - this should be included in common stylesheet */
.form-group.required .control-label:after {
content:"*";
color:red;
margin-left: 4px;
}
</style>
<div class="modal-dialog" role="document">
<form class="modal-content form-horizontal" id="editor">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="editor-title">Ajouter un nouvel interlocuteur</h4>
</div>
<div class="modal-body">
<input type="number" id="id" name="id" class="hidden"/>
<div class="form-group required">
<label for="firstName" class="col-sm-3 control-label">Nom</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="First Name" required>
</div>
</div>
<div class="form-group required">
<label for="lastName" class="col-sm-3 control-label">Prénom</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="lastName" name="lastName" placeholder="Last Name" required>
</div>
</div>
<div class="form-group">
<label for="jobTitle" class="col-sm-3 control-label">Téléphone</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="jobTitle" name="jobTitle" placeholder="Job Title">
</div>
</div>
<div class="form-group required">
<label for="startedOn" class="col-sm-3 control-label">Portable</label>
<div class="col-sm-9">
<input type="date" class="form-control" id="startedOn" name="startedOn" placeholder="Started On" required>
</div>
</div>
<div class="form-group">
<label for="dob" class="col-sm-3 control-label">E-mail</label>
<div class="col-sm-9">
<input type="date" class="form-control" id="dob" name="dob" placeholder="Date of Birth">
</div>
</div>
<div class="form-group">
<label for="dob" class="col-sm-3 control-label">Fonction carte de visite</label>
<div class="col-sm-9">
<input type="date" class="form-control" id="dob" name="dob" placeholder="Date of Birth">
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Sauvegarder les changements</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button>
</div>
</form>
</div>
</div>
<script src="jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="footable.js"></script>
<script src="prism.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<script src="footable.sort.js"></script>
<script src="script_test.js" charset="utf-8"></script>
</body>
</html> |
Pour revenir dans le code en rouge, c'est le code venu de l'exemple donné. A la différence, c'est que dans l'exemple fourni, les données sont en local alors que pour ma part, j'exécute une requête AJAX et récupère le tout.
Du coup, vous l'auriez deviner, je ne peux pas retrouver mes éléments par ID puisque toutes les lignes sont générées automatiquement et après avoir jeté un coup d'oeil à l'HTML qui est généré, les lignes n'ont aucun ID, les cellules non plus...
Du coup, je ne sais pas de quelle manière récupérer mes données pour, au clic sur le bouton "Editer", avoir les informations pré-remplis de la ligne.
Si quelqu'un à déjà eu affaire à ça, où à éventuellement une idée...
Je tiens à dire que je n'ai pas de longues années de Javascript encore, et donc j'ai pu passer à côté d'une notion...
Merci à toute aide qui sera apportée :)
Bonne journée à tous !
