Gestion d'un tableau avec une base de données [Résolu]

Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
- - Dernière réponse : 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
Afficher la suite 

4 réponses

Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
0
Merci
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.
Commenter la réponse de EnguerrandP
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
0
Merci
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
Commenter la réponse de EnguerrandP
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
0
Merci
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)
Commenter la réponse de EnguerrandP
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
0
Merci
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.
Commenter la réponse de EnguerrandP