IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Gestion par calendrier des fiches journalières du planning


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Avril 2013
    Messages
    15
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Avril 2013
    Messages : 15
    Par défaut Gestion par calendrier des fiches journalières du planning
    Bonjour,

    Je cherche a mettre au point une page qui me permet grâce à un calendrier de gérer les fiche quotidienne du planning.

    Présentation de la page :

    /-------------------------------------------------------------------------------
    / ! Name worker!^!
    / ! < Month> ! < Year > !______
    / !___!___!___!___!___!___!___!
    / !___!___!___!___!___!___!___!
    / !___!___!CALENDRIER!___!___!
    / !___!___!___!___!___!___!___!
    / !___!___!___!___!___!___!___!
    / !___!___!___!___!___!___!___!
    /
    / !______________________________________________________
    / !
    / !
    / !
    / ! PARTIE BASSE
    / !
    / !
    / !
    / !
    / !______________________________________________________!
    /
    /_____________________________________________________________
    /-------------------------------------------------------------------------------

    Fonctionnement souhaiter:
    0- Initialisation de la page : On clone le Tableau on change l'id du clone, on fait apparaitre le clone, on masque l'originale, on mais la date du jours dans l'input date du tableau
    1- Lorsque la page est charger on doit avoir dans la partie basse un tableau avec un input qui contient la date du jour
    2- Sélection d'un jour par le calendrier:
    2.1-On test si on a déjà créer un tableau pour cette date
    2.2-Si oui on le fait apparaitre
    2.3-Si non on le créer:
    En clonent le tableau original, changent son id puis en l'affichant.
    On mais la date du jour sélectionner dans l'input du jour du nouveau tableau cloner.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
     
    <html>
     
    <head>
    	<meta http-equiv="content-type" content="text/php; charset=ISO-8859-1" />
    	<link rel="stylesheet" href="CSS/CSS_Daily_Timer.css"/>
    	<link rel="stylesheet" href="CSS/Calendrier_CSS.css"/>
    	<link rel="stylesheet" href="CSS/Calendar_Fixe_Design/jquery.datepick.css">
    	<script type="text/javascript" src="JS/JS_JQuery_2_1_0.js"></script>
    	<script type="text/javascript" src="JS/JS_JQuery_Datepick_Pluging.js"></script>
    	<script type="text/javascript" src="JS/JS_JQuery_Datepick.js"></script>	
    	<script type="text/javascript" src="JS/JS_Calendrier.js" ></script>
    	<script type="text/javascript" src="JS/JS_Lanceur.js" ></script>
    </head>
     
    <body>
     
    <div id="inlineDatepicker"></div>
     
    <br>
     
    <div name="titi" id="toto">
    		 <!-- lier au calendrier les appel des onglets -->
    		 <!-- lors du clonnage ajouter le lien de l'onglet au calendrier -->
       		 <p> <a href="#Partie_Basse_Div" name="liens"> DIV 1 </a></p>
       		 <p> <a href="#Partie_Basse_Div_2" name="liens"> DIV 2 </a></p>
       		 <p> <a href="#Partie_Basse_Div_3" name="liens"> DIV 3 </a></p>
    	</div>	
     
    <fieldset id="Partie_Basse_Fieldset">
    <legend> DAILY TIMETABLE per request</legend>
     
    <div name="MesLignes" id="Partie_Basse_Div">
    	<table id="Partie_Basse_Table" border="2">
    	<tbody>
    		<tr align="center" id="Tab"> 
    			<td bgcolor="#F0FFFF"></td>	
    			<td bgcolor="#F0FFFF">Date</td>
    			<td bgcolor="#F0FFFF">Request</td>
    			<td bgcolor="#F0FFFF">Time(h)</td>
    			<td bgcolor="#F0FFFF">Description</td>
    			<td bgcolor="#F0FFFF">Worker</td>
    		</tr>		
    		<tr align="center" id="Line">
    			<td>					
    				<input type="button" name="NLine" id=""  size="3" value="New" 
    					onclick="CloneLine(this.parentNode.parentNode);">
    				</input>		
    			</td>
    			<td>					
    				<input type="date" name="date" id="TDate"  size="9" value="" readonly="readonly"></input>		
    			</td>
    			<td>					
    				<SELECT id="Select_Request" NAME="SRequest" onChange="saveValue(this)">
    					<option value="*****************" selected="selected"></option>
    					<option>*****************
    				</SELECT>		
    			</td>
    			<td>					
    				<input type="text" name="time" id=""  size="5" value=""></input>		
    			</td>			
    			<td>					
    				<textarea name="" id="TextArea_Description" rows="2" cols="30" value=""></textarea>			
    			</td>
    			<td>					
    				<SELECT id="Table_Select_Worker" NAME="SWorker" onChange="saveValue(this)">
    					<option value="*****************" selected="selected"></option>
    					<option>*****************
    				</SELECT>		
    			</td>										
    		</tr>	
    	</tbody>
    	</table>
    </div>	
    <div></div>
    </fieldset> 
     
    <script type="text/javascript">
    <!-- Tansfert de la valeur de la date à ...  ->
    $(function() 
    {
       $('#popupDatepicker').datepick();
     
       $('#inlineDatepicker').datepick(
        {
    		onSelect:function(dateText)
    		{
    		document.getElementById("TDate").value =dateText;
    		}
        });
    });
     
    function CloneLine(Line)
    {
    	newLine = Line.cloneNode(true); 
    	Line.parentNode.insertBefore(newLine,Line)
    	//Line.parentNode.appendChild(newLine);
    }
     
    var tbl=document.getElementById("Partie_Basse_Table")
    var newTab = tbl.rows[0].cloneNode(true); 
    var newTab2	= tbl.rows[1].cloneNode(true);
    $('#inlineDatepicker').click
    (
    	function ()
    	{	
    		newTab=Tab.parentNode.appendChild(newTab)	
    		Tab.parentNode.appendChild(newTab2)	
    	}
    );
     
    <!-- Fonction Switch ->
    $("a[name='liens']").click
    	(
    		function()
    		{
    		var target=$(this).attr('href');
    			$("div[name='MesLignes']").hide();
    			$(target).show();    
    		}
    	);
     
    </script>
     
    </body>
    </html>
    Comment je peut faire pour les switch de tableau a partir de clone et qu'il soit relier a leur date du calendrier?

    (Et je ne sais pas pour quoi mais la fonction clone ne marche qu'une seul fois.)

    Merci

  2. #2
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Avril 2013
    Messages
    15
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Avril 2013
    Messages : 15
    Par défaut
    Bonjour,
    Cela marche très bien maintenant.

    Voila le code :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    <html>
    <head>
    	<meta http-equiv="content-type" content="text/php; charset=ISO-8859-1" />
    	<link rel="stylesheet" href="CSS/CSS_Daily_Timer.css"/>
    	<link rel="stylesheet" href="CSS/Calendrier_CSS.css"/>
    	<link rel="stylesheet" href="CSS/Calendar_Fixe_Design/jquery.datepick.css">
    	<script type="text/javascript" src="JS/JS_JQuery_2_1_0.js"></script>
    	<script type="text/javascript" src="JS/JS_JQuery_Datepick_Pluging.js"></script>
    	<script type="text/javascript" src="JS/JS_JQuery_Datepick.js"></script>	
    	<script type="text/javascript" src="JS/JS_Calendrier.js" ></script>
    </head>
     
    <body>
     
    <div id="inlineDatepicker"></div>
     <input type="date" id="DATE1" Value='date' Size="9"></input>
     
    <fieldset id="Partie_Basse_Fieldset">
    <legend> DAILY TIMETABLE per request</legend>
     
    <div name="MesLignes" id="Partie_Basse_Div">
    	<table id="Table_Jour" border="2" name="MesTBL">
    	<tbody>
    		<tr align="center" id="Tab"> 
    			<td bgcolor="#F0FFFF"></td>	
    			<td bgcolor="#F0FFFF">Date</td>
    			<td bgcolor="#F0FFFF">Request</td>
    			<td bgcolor="#F0FFFF">Time(h)</td>
    			<td bgcolor="#F0FFFF">Description</td>
    			<td bgcolor="#F0FFFF">Worker</td>
    		</tr>		
    		<tr align="center" id="Line">
    			<td>					
    				<input type="button" name="NLine" id=""  size="3" value="New" 
    					onclick="CloneLine(this.parentNode.parentNode);">
    				</input>		
    			</td>
    			<td>					
    				<input type="date" name="date" id="TDate"  size="9" value="" readonly="readonly"></input>		
    			</td>
    			<td>					
    				<SELECT id="Select_Request" NAME="SRequest" onChange="saveValue(this)">
    					<option value="*****************" selected="selected"></option>
    					<option>*****************
    				</SELECT>		
    			</td>
    			<td>					
    				<input type="text" name="time" id=""  size="5" value=""></input>		
    			</td>			
    			<td>					
    				<textarea name="" id="TextArea_Description" rows="2" cols="30" value=""></textarea>			
    			</td>
    			<td>					
    				<SELECT id="Table_Select_Worker" NAME="SWorker" onChange="saveValue(this)">
    					<option value="*****************" selected="selected"></option>
    					<option>*****************
    				</SELECT>		
    			</td>										
    		</tr>	
    	</tbody>
    	</table>
    </div>	
    <div></div>
    </fieldset> 
     
    <script>
     
    $(window).load(function()
    {
            $("#Table_Jour").hide();
    });
     
    $(function() 
    {
       $('#inlineDatepicker').datepick
       ({onSelect:
                    function(dates)
                    {
                    var dateText = $.datepick.formatDate(dates[0]);
                            document.getElementById("DATE1").value =dateText;
                    var dateArr = dateText.split("/");
                    var IDfromDateText= dateArr[2] +  dateArr[0] + dateArr[1];       
                     
                            if ($("#myDivTable_Jour_"+IDfromDateText).length > 0)
                            {
                                    // Il existe..donc j'affiche le tableau
                    AffichDiv("Table_Jour_"+IDfromDateText);
                            }
                            else
                            {
                                    // L'element n'existe pas.. je le crée ( clone)..
                    CreaTable("Table_Jour_"+IDfromDateText); 
                    // ...puis j'affiche le tableau
                    AffichDiv("Table_Jour_"+IDfromDateText);               
                            }           
                    }
       });
    });
     
    function AffichDiv(idTable)
    {
        //On masque TOUS les tableaux
            $('div[name="MesTBL"]').hide(); 
        // On affiche celui que l'on a selectionné
            $('#myDiv'+ idTable).show();   
    }
     
    function CreaTable(idTable)
    {
            $("#Table_Jour").show();
            //On clone le tableau d'origine
            //et je lui donne comme ID : "MonTableau_"+ IDfromDateText 
        $("#Partie_Basse_Div").append("<div name='MesTBL' id='myDiv" + idTable + "'></div>")
            $("#Table_Jour").clone().appendTo("#myDiv" + idTable)  
            $("#Table_Jour").hide();
    }
     
    function CloneLine(Line)
    {
            newLine = Line.cloneNode(true); 
            Line.parentNode.insertBefore(newLine,Line)
            //Line.parentNode.appendChild(newLine);
    }
     
    </script>
    </body>
    </html>

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 51
    Dernier message: 13/03/2015, 14h26
  2. Gestion des URL par défaut des WebServices
    Par helios77 dans le forum ASP.NET
    Réponses: 4
    Dernier message: 13/05/2013, 13h39
  3. Réponses: 1
    Dernier message: 06/09/2011, 14h26
  4. Creation de logiciel de gestion des fiches
    Par anninina dans le forum E-Commerce
    Réponses: 2
    Dernier message: 25/03/2011, 18h04
  5. [Concept] BD ou Gestion par fichier. Intérêt de la BD ?
    Par Cian dans le forum Décisions SGBD
    Réponses: 3
    Dernier message: 28/11/2002, 12h16

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo