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
});
});
} |
Partager