Champs calculé tableau dynamique

Version imprimable

26/07/2013, 21h49
Darkaurora

Champs calculé tableau dynamique

J'ai réaliser un plug in permettant de créer un tableau HTML selon le paramétrage choisis.

cependant j'aimerais passé un cap en permettant de calculer une cellule en fonction de plusieurs et ce selon le paramétrage de l'utilisateur.

j'ai réussis à récupérer le contenu des cellules qui sont à prendre en compte pour le calcul mais j'aimerais pouvoir rentrer un paramètre qui serait la formule de calcul mais je n'ai aucune idée de comment faire.

si quelqu'un à une réponse ou souhaite des éclaircissements...

Apparemment ma question n'est pas clair...

Bref j'ai trouvé une fonction permettant de faire ce que je souhaite. J'ai cependant certains problème à l'appréhender. La fonction eval permet d'interpréter une chaine de caractère comme du code et de l'exécuter ( si j'ai bien tout compris )

Cependant je reste bloqué si une partie de ce que je mets dans eval est une chaîne de caractère.

exemple :
Code:

1 2 3 4 for( a in dyn ) // tableau contenant les objets jquery correspondant à des cellules de tableau eval( 'C'+a+'='+dyn[a].html( ) ) //Me mets une erreur en disant que le contenu de ma cellule est undefined //Me retourne bien le contenu de ma cellule cependant
par contre si je fait:
Code:

1 2 3 for( a in dyn ) // tableau contenant les objets jquery correspondant à des cellules de tableau eval( 'C'+a+'='+parseFloat( dyn[a].html( ) ) ) // plus d'erreurs
Mon problème est que mes cellules peuvent tout aussi bien être parseFloat, parseInt ou des string, et c'est sur cette dernière alternative que je bug.

30/07/2013, 07h54
Bovino

Effectivement, je n'ai rien compris à ton problème, mais ce qui est sûr, c'est que ta solution est probablement la pire que l'on puisse trouver ! :aie:
Il n'y a à priori aucune raison de passer par cet horrible eval() !

Quant au fait d'obtenir un undefined, c'est certainement dû au fait que dyn[a] ne soit pas un objet jQuery et que donc il ne possède pas de méthode .html()...
30/07/2013, 09h19
Darkaurora
dyn est un tableau dans lequel j'ai stocké des objets jquery...

exemple:
Code:

1 2 3 4 var dyn = []; $( ':input' ).each( function( ) { dyn.push( $( this ) ); });
si je console.log( dyn ), j'ai bien un tableau comprenant l'ensemble de mes inputs récupérer et si je console.log( dyn[0].val( ) ) (et que mon premier input contient "coucou") il m'affiche coucou.

J'ai bien compris que eval() n'est pas conseillé mon problème que je n'ai que cette piste pour arriver à ce que je veux
30/07/2013, 20h47
danielhagnoul

Bonsoir

Tant que vous ne nous donnerez pas un code complet (CSS, HTML, JS) qui montre clairement ce que vous voulez faire (pas besoin d'un exemple complexe, juste l'essentiel), on ne pourra pas vous aider efficacement.
30/07/2013, 21h52
Darkaurora

Mon problème est là :) Je n'ai pas de problème de coding, mais un problème de connaissance...

clairement je créer un tableau permettant de faire des devis, des commandes, des bons de livraisons etc

mes tableaux se structure généralement de la manière suivante

Référence | Désignation | Quantité | Prix | Nombre de jour | Coefficient | Montant HT

j'arrive à créer mon tableau en fonction de mes données ( contenue sur une base de données ) et d'ajouter des options tels que l'édition de certaine cellules, le type des cellules ( entier, décimale, alphanumérique... )

J'ajoute d'autre options tels que l'ajout/suppression d'une ligne, le déplacement vers le haut ou le bas d'une ligne etc...

Bref je souhaite créer une option ou un paramètre permettant de prendre une équation tel que ==> Quantité * Prix * Nombre de jour * Coefficient = Montant HT

afin que je puisse effectué ce calcul sur chaque ligne de mon tableau.

j'ai trouvé la fonction eval() mais qui présente de nombreux problème... (sécurité, tout le monde la critique mais personne ne l'explique, résultat aléatoire...)

Bonjour

Travaillons alors sur mon exemple :

Code:

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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		"use strict";
 
		head.js( 
			"http://d3js.org/d3.v3.min.js",
			"http://code.jquery.com/jquery-2.0.3.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery-ui-i18n.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/d3Base.js",
			function(){
 
				$( function(){
 
					$( "#btnCalcul" ).on( "click", function(){
						var temp = [],
							result;
 
						$( "#tableID" ).find( "tbody > tr" ).each( function( i, item ){
							temp = [];
 
							/*
							 * On enregistre le contenu texte des td (jtem)
							 * de 2 à 5 (numérotation base 0).
							 * 
							 * Le résultat final est une simple multiplication. 
							 */
							$( item ).children().each( function( j, jtem ){
								if ( j > 1 && j < 6 ){
									temp.push( $( jtem ).text() );
								}
 
								// Pour le td Montant HT €
								if ( j == 6 ){
									for ( var n in temp ){
										if ( n == 0 ){
											result = parseFloat( temp[ n ] );
										} else {
											result *= parseFloat( temp[ n ] );
										}
									}
 
									// insertion du résultat de la multiplication
									$( jtem ).text( result );
								}
							});
						});
					});
 
				});
 
				$( window ).load( function(){
 
				});
			}
		);
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/sunny/jquery-ui.min.css">
	<style>
		/* TEST -- Nota bene : ici 1 rem est égal à 1 px, voir dvjhRemBase.css */
 
		table {
		    margin: 2.5rem;
		    padding: 2.5rem;
		    background: #EEEEEE;
		}
 
		tr {
		    margin: 2.5rem;
		    background: rgba(255,128,0,0);
		}
 
		td {
		    width: 8rem;
		    height: 8rem;    
		    text-align: center;
		    vertical-align: center;
		}		
 
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
		<button id="btnCalcul">Calcul</button>
 
		<table id="tableID">
			<thead>
				<tr>
					<th>Référence</th>
					<th>Désignation</th>
					<th>Quantité</th>
					<th>Prix €</th>
					<th>Nombre de jour</th>
					<th>Coefficient</th>
					<th>Montant HT €</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>R001</td>
					<td>D001</td>
					<td>10</td>
					<td>67</td>
					<td>7</td>
					<td>0.25</td>
					<td></td>
				</tr>
				<tr>
					<td>R002</td>
					<td>D002</td>
					<td>5</td>
					<td>14</td>
					<td>13</td>
					<td>0.81</td>
					<td></td>
				</tr>
				<tr>
					<td>R003</td>
					<td>D003</td>
					<td>3</td>
					<td>104</td>
					<td>25</td>
					<td>0.08</td>
					<td></td>
				</tr>
				<tr>
					<td>R004</td>
					<td>D004</td>
					<td>72</td>
					<td>14</td>
					<td>3</td>
					<td>0.34</td>
					<td></td>
				</tr>
			</tbody>
		</table>
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-07-31T11:38:11.74+02:00" pubdate>2013-07-31T11:38:11.74+02:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
</body>
</html>

31/07/2013, 12h16
Darkaurora

Tout d'abord merci de l'aide que tu m'apportes.

Dans l'ensemble c'est tout à fait ça, on prend les éléments et on opère dessus puis on affiche...

Seulement je procède déjà de cette manière (juste je ne passe par de bouton, mes cellules sont éditables et je lance une fonction calcul sur un blur ou change )

Mon problème est que j'ai des tableaux ou je ne vais plus seulement faire une multiplication de plusieurs cellules. Ma formule ressemblera plutôt à ça:

( a * ( b + c ) ) / d. et non plus a * b * c * d

J'ai réussis à sérialiser l'ensemble de mes différents tableaux grâce à un plug in maison, ce qui me fait gagner au bas mot 600 lignes sur chacune de mes pages (je ne comptabilise pas les lignes du plug in, mais uniquement les conditions spécifiques qui s'appliquer à chacun de mes tableaux).

Bref il ne me reste plus qu'a trouvé un moyen pour faire ce que tu m'as proposé mais en passant la formule de calcul applicable à la situation.

Si ce n'est pas possible je garderais toujours une fonction de calcul spécifique sur chacune de mes pages et basta mais dans le cas contraire j'aurais appris un truc et se serait AWESOME!!

Le changement de formule n'apporte que des modifications mineures :

Code:

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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		"use strict";
 
		head.js( 
			"http://d3js.org/d3.v3.min.js",
			"http://code.jquery.com/jquery-2.0.3.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery-ui-i18n.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/d3Base.js",
			function(){
 
				$( function(){
 
					$( "#btnCalcul" ).on( "click", function(){
						var temp = [];
 
						$( "#tableID" ).find( "tbody > tr" ).each( function( i, item ){
							temp = [];
 
							/*
							 * On enregistre le contenu texte des td (jtem)
							 * de 2 à 5 (numérotation base 0).
							 * 
							 * Le résultat final est ( a * ( b + c ) ) / d. 
							 */
							$( item ).children().each( function( j, jtem ){
								if ( j > 1 && j < 6 ){
									temp.push( parseFloat( $( jtem ).text() ) );
								}
 
								// Pour le td Montant HT €
								if ( j == 6 ){
									$( jtem ).text( ( ( temp[ 0 ] * ( temp[ 1 ] + temp[ 2 ] ) ) / temp[ 3 ] ).toFixed( 2 ) );
								}
							});
						});
					});
 
				});
 
				$( window ).load( function(){
 
				});
			}
		);
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/sunny/jquery-ui.min.css">
	<style>
		/* TEST -- Nota bene : ici 1 rem est égal à 1 px, voir dvjhRemBase.css */
 
		table {
		    margin: 2.5rem;
		    padding: 2.5rem;
		    background: #EEEEEE;
		}
 
		tr {
		    margin: 2.5rem;
		    background: rgba(255,128,0,0);
		}
 
		td {
		    width: 8rem;
		    height: 8rem;    
		    text-align: center;
		    vertical-align: center;
		}		
 
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
		<button id="btnCalcul">Calcul</button>
 
		<table id="tableID">
			<thead>
				<tr>
					<th>Référence</th>
					<th>Désignation</th>
					<th>Quantité</th>
					<th>Prix €</th>
					<th>Nombre de jour</th>
					<th>Coefficient</th>
					<th>Montant HT €</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>R001</td>
					<td>D001</td>
					<td>10</td>
					<td>67</td>
					<td>7</td>
					<td>0.25</td>
					<td></td>
				</tr>
				<tr>
					<td>R002</td>
					<td>D002</td>
					<td>5</td>
					<td>14</td>
					<td>13</td>
					<td>0.81</td>
					<td></td>
				</tr>
				<tr>
					<td>R003</td>
					<td>D003</td>
					<td>3</td>
					<td>104</td>
					<td>25</td>
					<td>0.08</td>
					<td></td>
				</tr>
				<tr>
					<td>R004</td>
					<td>D004</td>
					<td>72</td>
					<td>14</td>
					<td>3</td>
					<td>0.34</td>
					<td></td>
				</tr>
			</tbody>
		</table>
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-07-31T11:38:11.74+02:00" pubdate>2013-07-31T11:38:11.74+02:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
</body>
</html>

31/07/2013, 15h20
Darkaurora

Je comprends bien :)

Mais je suis un éternel fainéant :) c'est pourquoi je ne veux pas à avoir à modifier mon code sur chaque page (je parle bien sûr de la fonction de calcul)
mais juste à modifier un paramètre et que le traitement se fasse en condition de ce paramètre.

Désoler de vous embêter avec ça je serais juste ravis de savoir le faire, maintenant ça fait une semaine que je cherche parallèlement une solution mais mon application fonctionne avec une partie calculatoire externe semblable à celle que danielhagnoul m'a proposé.

Je ne vais donc pas marquer ce sujet comme résolut pour le moment, puisque nous avons un nouvel arrivant mais je le ferais d'ici à la fin de semaine.