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
| <script src="Ressources/jsNew/jquery.min.js"></script>
<link rel="stylesheet" href="Ressources/cssNew/bootstrap.min.css" />
<script src="Ressources/jsNew/bootstrap.min.js"></script>
<script src="Ressources/jsNew/jquery.tabledit.js"></script>
<script type="text/javascript" src="Ressources/jsNew/jquery.freezeheader.js"></script>
<link rel="stylesheet" type="text/css" href="cssNew/styleFreeze.css" />
<link href="Ressources/cssNew/jquerysctipttop.css" rel="stylesheet" type="text/css">
<script src="Ressources/jsNew/filtable.js?dev"></script>
<link rel="stylesheet" href="Ressources/cssNew/jquery-uiDatePicket.css">
<script src="Ressources/jsNew/jquery-ui.js"></script>
........
<table id="editable_table" class="table table-bordered table-striped">
<thead bgcolor = "cyan">
<tr>
<th>ID</th>
<th>DATE</th>
<th>CONTENEUR</th>
<th>SHP_NO</th>
<th>PORTE</th>
<th>PRO</th>
................
<tbody>
<?php
foreach ($lesMainInbnds as $unMainInbnd)
{
echo "
<tr bgcolor='".$couleurLigne."'>
<td>{$unMainInbnd->id()}</td>
<td>{$unMainInbnd->DateInbnd()}</td>
<td>{$unMainInbnd->LuId()}</td>
<td>{$unMainInbnd->ShpNo()}</td>
<td>{$unMainInbnd->Gate()}</td>";
if ($unMainInbnd->Process()==true) {
echo '<td align="center"><input type="checkbox" name="Process[]" value=1 checked="checked" ></td>'; }
else {
echo '<td align="center"><input type="checkbox" name="Process[]" value=0 ></td>'; };
..........
La colonne Process s'affiche bien en checkbox selon les valeurs 1 ou 0 provenant de la BD MYSQL.
Voici le code JS pour editer mon tableau :
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#editable_table").freezeHeader();
$('#editable_table').Tabledit({
url:'actionReceptions.php',
columns:{
identifier:[0, "id"],
editable:[[1, 'DateInbnd'],[4, 'Gate'],[8, 'Classe', '{"1": "1", "2": "2", "3": "3", "4": "4", "5": "5", "6": "6", "7": "7"}'],[9, 'YardLocation'],[11, 'Comment']]
},
hideIdentifier: true,
onSuccess:function(data, textStatus, jqXHR)
{
if(data.action == 'delete')
{
$('#'+data.id).remove();
}
},
onDraw: function() {
// Select all inputs of second column and apply datepicker each of them
$('editable_table tr td:nth-child(1) input').each(function() {
$(this).datepicker({
format: 'yy-mm-dd',
todayHighlight: true
});
});
} |
