Gestion d'un tableau avec une base de données

Résolu

EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 - 23 avril 2014 à 16:06
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 - 5 mai 2014 à 11:00

Bonjour,
Je recherche de l'aide pour la création d'une fonction pour gérer les lignes d'un tableau relier a une base de données.
voici le schéma théorique que j'ai imaginer.

If (Test Tableau Jour Workeur existe)
	{	

		true If(Test si il y a de nouvelle ligne dans la base de donnée qu il n'y a pas dans le TAb J W)
			{
				true : Creation des lignes manquantes
			}

			Affiche le tableau J W
	}
	
		false :Else If (Test si la date sélectionner existe dans la base de données)
					{
						true : If (Test si le workeur existe pour le jour sélectionner)
								{
									true : Crée  une ligne "édite" + crée le tableau du jour avec les lignes incrémenter des données correspondante à l'employer sélectionner pour le jour 
									sélectionner contenu dans la base de données .
								}
									false : Else
												{
													Crée le tableau J W avec seulement une ligne "édite"
												}	
					}
						false : Else
									{
										Crée le tableau J W avec seulement une ligne "édite"
									}

J'ai déjà une fonction Jscript qui me permet de gérer l'id des élément de mon tableau lors du clonage:

<script type="text/javascript">
$(function() 
{
   $('#inlineDatepick').datepick
   ({onSelect:
		function(dates)
   		{
			// Creation des variables Date
    		var dateText = $.datepick.formatDate(dates[0]);
       		var dateArr = dateText.split("/");
			var mois=dateArr[1];
			switch(mois) 
			{
			case "Jan":
					var ArrMonth = "01";
			break;
			case "Feb":
					var ArrMonth = "02";
			break;
			case "Mar":
					var ArrMonth = "03";
			break;
			case "Apr":
					var ArrMonth = "04";
			break;
			case "May":
					var ArrMonth = "05";
			break;
			case "Jun":
					var ArrMonth = "06";
			break;
			case "Jul":
					var ArrMonth = "07";
			break;
			case "Aug":
					var ArrMonth = "08";
			break;
			case "Sep":
					var ArrMonth = "09";
			break;
			case "Oct":
					var ArrMonth = "10";
			break;
			case "Nov":
					var ArrMonth = "11";
			break;
			case "Dec":
					var ArrMonth = "12";
			break;
			}
        	var IDfromDateText= dateArr[2] +"-"+ ArrMonth  +"-"+ dateArr[0];	 
			
			// Creation des variables Worker
			var IDWorker= document.getElementById("TopWorker").value;
			var WorkerArw = IDWorker.split(" ");
			var IDfromWorker = WorkerArw[0] ;
			var NamefromWorker = WorkerArw[1]+" "+ WorkerArw[2];
			
			if ($("#myDiv_TJour_"+IDfromDateText+'_'+IDfromWorker).length > 0)
			{
				// Il existe... donc j'affiche le tableau
                AffichDiv(IDfromDateText,IDfromWorker,NamefromWorker);
			}
			else
			{
		
				// L'element n'existe pas... je le crée ...
                CreaTable(IDfromDateText,IDfromWorker,NamefromWorker,dates);

                // ...puis j'affiche le tableau
                AffichDiv(IDfromDateText,IDfromWorker,NamefromWorker);                  
			}           
   		}
   });
});

function CreaTable(idJour,idWorker,nameWorker,dates)
{
	//Je crée un nouveau div pour le tableau
    $("#Zone_Tab").append("<div name='MesTBL' id='myDiv_" + "TJour_" + idJour + '_' + idWorker + "'></div>");
	//On crée un tableau pour le jour X 
	$("#myDiv_" +"TJour_" + idJour+'_'+ idWorker).append('<table border="2" id="TJour_' + idJour+'_'+ idWorker + '"></table>').css("border","2px inset #000000");
	
	// Line Title
	$("#TJour_" + idJour+'_'+ idWorker).append('<tr align="center" id="Row1_' + idJour+'_'+ idWorker + '"></tr>'); 
	//Title New Line
	$("#Row1_" + idJour+'_'+ idWorker).append('<td bgcolor="#F0FFFF">Option Line</td>');
	//On crée un Input pour la date
	$("#Row1_" + idJour+'_'+ idWorker).append('<td bgcolor="#F0FFFF">Date</td>');
	//Title Request
	$("#Row1_" + idJour+'_'+ idWorker).append('<td bgcolor="#F0FFFF" width="160px">Request</td>');
	//Title Times (h)
	$("#Row1_" + idJour+'_'+ idWorker).append('<td bgcolor="#F0FFFF">Time (h)</td>');
	//Title Description
	$("#Row1_" + idJour+'_'+ idWorker).append('<td bgcolor="#F0FFFF">Description</td>');
	//Title Worker
	$("#Row1_" + idJour+'_'+ idWorker).append('<td bgcolor="#F0FFFF"width="170px">Worker</td>');
 
	// First line
	$("#TJour_" + idJour+'_'+ idWorker).append('<tr align="center" class="Row" id="Row2_' + idJour+'_'+ idWorker+ '"></tr>'); 
	//On crée un Bouton New Line
	$("#Row2_" + idJour+'_'+ idWorker).append('<td><input type="button" value="New" style="width:100%" class="clone" id="TNewLine_' + idJour+'_'+ idWorker + '"></input><br /><input type="button" value="Save" style="width:100%" class="save" id="TSaveLine_' + idJour+'_'+ idWorker + '"></input></td>');
	//On crée un Input pour la date
	$("#Row2_" + idJour+'_'+ idWorker).append('<td><input type="date" style="width: 100%;" id="TDate_' + idJour+'_'+ idWorker + '"></input></td>');
	//On crée un Select pour la tache
	$.ajax
	({
		type: 'POST',
		data: {id_Jour : idJour+'_',id_Worker : idWorker},
		async: false,
		url:'TSRequest.ajx.php', 
		success:function(data) { $("#Row2_" + idJour+'_'+ idWorker).append('<td>'+data+'</td>');},
		error: function(error){alert("Erreur : " + error);}
	});
	//On crée un Input pour le Temps
	$("#Row2_" + idJour+'_'+ idWorker).append('<td><input type="text" value="" style="width: 100%;" id="TTime_' + idJour+'_'+ idWorker+ '"></input>');
	//On crée une Zone de texte pour la description
	$("#Row2_" + idJour+'_'+ idWorker).append('<td><textarea rows="2" cols="25" style="resize: none;" id="TTADescription_' + idJour+'_'+ idWorker +'"></textarea></td>');
	//On crée un Input pour l employer
	$("#Row2_" + idJour+'_'+ idWorker).append('<td><input type="text" style="width: 100%;" id="TIWorker_' + idJour+'_'+ idWorker+ '"></input>');
 
	// On met le nom de l'employer sélectionner dans l'input TSWorker+idJour+idWorker
	$("#TIWorker_"+idJour+'_'+ idWorker).val(nameWorker);
  
	// On met la valeur de la date sélectionner dans l'input TDate+idJour+idWorker
	var dateText = $.datepick.formatDate(dates[0]);
	$("#TDate_"+idJour+'_'+ idWorker).val(dateText); 
	
  	// Méthode pour le clonage
	var lineCount = 1;
	var Line ="#Row2_" + idJour+'_'+ idWorker;
	var N_Line ="Row2_" + idJour+'_'+ idWorker;
	
	var ID_B_TNewLine = "#TNewLine_" + idJour+'_'+ idWorker;
	var ID_B_TSaveLine = "#TSaveLine_" + idJour+'_'+ idWorker;
	var ID_I_Date = "#TDate_" + idJour+'_'+ idWorker ;
	var ID_S_Request = "#TSRequest_"+ idJour+'_'+ idWorker;
	var ID_I_Time = "#TTime_" + idJour+'_'+ idWorker ;
	var ID_TA_Description = "#TTADescription_" + idJour+'_'+ idWorker ;
	var ID_I_Worker = "#TIWorker_" + idJour+'_'+ idWorker;
	
	var N_B_TNewLine = "TNewLine_" + idJour+'_'+ idWorker;
	var N_B_TSaveLine = "TSaveLine_" + idJour+'_'+ idWorker;
	var N_I_Date = "TDate_" + idJour+'_'+ idWorker ;
	var N_S_Request = "TSRequest_"+ idJour+'_'+ idWorker;
	var N_I_Time = "TTime_" + idJour+'_'+ idWorker ;
	var N_TA_Description = "TTADescription_" + idJour+'_'+ idWorker ;
	var N_I_Worker = "TIWorker_" + idJour+'_'+ idWorker;
	
	$('.clone').click(function clone_line()
	{
	
		// Clone line
		newLine = $(Line).clone(true);
		$(newLine).attr('id', N_Line +'_'+ lineCount);		
		newLine.insertAfter("#Row1_" + idJour+'_'+ idWorker);	
		
		// Modify object id
		$('.clone').attr("style", "visibility: hidden");
		$(ID_B_TNewLine).attr('id', N_B_TNewLine +'_'+ lineCount).attr("style", "visibility: visible");	
		$(ID_B_TSaveLine).attr('id', N_B_TSaveLine +'_'+ lineCount);
		$(ID_I_Date).attr('id', N_I_Date +'_'+ lineCount);				
		$(ID_S_Request).attr('id', N_S_Request +'_'+ lineCount);			
		$(ID_I_Time).attr('id', N_I_Time +'_'+ lineCount).val('');			
		$(ID_TA_Description).attr('id', N_TA_Description +'_'+ lineCount);				
		$(ID_I_Worker).attr('id', N_I_Worker +'_'+ lineCount++);	
	});
	$('.Save').click(function Save_line()
	{
	
	});
}

function AffichDiv(idJour,idWorker)
{
    //On masque TOUS les tableaux
 	$('div[name="MesTBL"]').hide(); 
	
    // On affiche celui que l'on a selectionné
 	$('#myDiv_' + "TJour_" + idJour+'_'+ idWorker).show();   
}

</script>

Merci

A voir également:

Gestion d'un tableau avec une base de données
Base de données javascript - Conseils pratiques -Javascript
Récupérer données json (javascript) - Conseils pratiques -Javascript
Afficher un tableau php en html - Conseils pratiques -PHP
Connexion base de données - Conseils pratiques -PHP
Exemple base de donnée gestion de stock - Forum PHP

4 réponses

Réponse 1 / 4

EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 1
24 avril 2014 à 10:56

Bonjour,
Pour le 1er test :

If(Test si il y a de nouvelle ligne dans la base de donnée qu il n'y a pas dans le TAb J W)
			{
				true : Creation des lignes manquantes
			}

Je suis entrain de crée un fichier ajax mais je ne vois pas trop comment m'y prendre pour que cela fonctionne.

Réponse 2 / 4

EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 1
Modifié par EnguerrandP le 24/04/2014 à 12:59

Salut,
Je croit qu'il va falloir que j'extrais les données de chaque ligne de mon tableau html est que dans mon fichier ajax je récurer les valeur des ligne qui m'intéresse dans la BDD en les renvoyant en tant que variable puis que je compare celle-ci au données extraite de mon tableau html enfin crée une nouvelle ligne pour chaque ligne manquante.

Quelqu'un pourrait me dire par ou commencer?
Merci

Réponse 3 / 4

EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 1
25 avril 2014 à 08:52

Bonjour,
J'ai penser a une solution qui me permet d'éviter les comparaisons entre la table et le tableau html.
Pour cela il faut cas chaque fois que l'on change de ligne on face une save de la ligne dans la base de données (un update).
Sa me permettrait d'avoir se type de fonctionnement:
1-On vérifie sa le tableau existe:
1.2- Si oui :
1.2.1 On le supprime
1.2.2 On crée un nouveau tableau avec les données de la base de données et une ligne éditable
1.2.3 On affiche le tableau pour le jour sélectionner.
1.3- Si non :
1.3.1 On crée un nouveau tableau avec les données de la base de données et une lige éditable
1.3.2 On affiche le tableau pour le jour sélectionner.

Merci.
(Désoler pour se post très chaotique)

Réponse 4 / 4

EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 1
Modifié par EnguerrandP le 5/05/2014 à 11:01

Bonjour, je clos se topique car ces problème son traiter dans d'autre:
[JQuery+AJAX] Gestion de la sauvegarde des lignes d'un tableau
[JQuery+AJAX] Insertion de ligne de la BDD dans un Tableau HTML
Et que la méthode que je voulait utilisé et mal penser.

Merci et que le café soit avec vous.

Discussions similaires

ACCESS - Gestion du personnel

Prob de Restauration base de données

conception base de données e-commerce

Créer comme une clé d'activation pour un fichier excel en VBA

base de données gestion de stock

Votre réponse

Discussions similaires