Discussion :

[SylvainM]

Bonjour à tous,

Je tente de mettre en place un tableau en utilisant Bootstrap Table (http://bootstrap-table.wenzhixin.net.cn).
Ce tableau utilise des données au format Json.
Dans une des colonnes de ce tableau, j'ai un array de valeurs (dont le nombre peut varier d'une ligne à l'autre).
J'aimerais mettre en forme cet array avec des <span> pour chaque valeur.

Pourriez-vous m'aider dans cette tâche ? (je pense à une boucle FOR, comme tenté dans le code ci-dessous, mais pour l'instant, je ne sais pas sur quelles variables la faire tourner)

Voici où j'en suis avec des données bidon :
http://jsfiddle.net/14wkr6ab/

Sur mon serveur, les fonctions de formatage fonctionnent, mais pas sur ce JsFiddle : je comprends pas trop pourquoi ?

Merci à vous !

Sylvain M.

[Invité]

Bonjour,

Merci :

• d'écrire (aussi) le code directement dans le contenu du message.
• d'être plus précis

1- Quelle est la question, précisément ?

2- "...J'aimerais mettre en forme cet array avec des <span> pour chaque valeur..."
Quel array ?

3- "...les fonctions de formatage..."
Quelles fonctions ? Pour formater quoi ?

[SylvainM]

Merci jreaux62 de te pencher sur mon problème !

Merci d'écrire (aussi) le code directement dans le contenu du message.

Ok, je le mets ci-dessous !

2- Quelle est la question, précisément ?

La voici : quelle fonction me permettrait, à partir d'un array contenu dans un JSON utilisé en source d'un tableau (Bootstrap Table), de convertir cet array en autant de <span> que de valeurs de l'array.

J'ai écrit cette fonction qui arrive à le faire avec un array indépendant du JSON, et en dehors du tableau :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
var liste = ["KML", "SHP", "MDB", "TXT", "GEOJSON", "DBF"];
 
liste.forEach(createHTML);
 
function createHTML(arrayItem, index, array) {
    var spanObj = '<span class="badge badge-info">' + arrayItem + '</span>'
    var div = document.createElement('div');
    div.innerHTML = spanObj;
    document.body.append(div);
}

Mais je ne sais pas comment faire cette fonction pour les valeurs à l'intérieur d'une colonne du tableau (row.l_ext dans mon exemple).

3- "...les fonctions de formatage..."
Quelles fonctions ? Pour formater quoi ?

Les fonction "data-formatter", comme dans cet exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<th data-field="name" data-formatter="nameFormatter">Name</th>

Encore merci de te pencher sur mon problème !

Sylvain M.

[SylvainM]

Je pensais à quelque chose comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
// Fonction pour formater les valeurs de la colonne
function BadgesFormatter(value, row, index) {
    return value.forEach(createSpan)
}
 
// Fonction pour créer les <span> à chaque item de l'array
function createSpan(arrayItem, index, array) {
    var spanObj = '<span class="badge badge-info">' + arrayItem + '</span>'
    return spanObj;
}

Mais ça ne marche pas... J'ai ce message d'erreur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

TypeError: value.forEach is not a function[En savoir plus]

et si je tente avec "row.l_ext.forEach(createSpan)", ça ne marche pas non plus...

[Watilin]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
let liste = ["KML", "SHP", "MDB", "TXT", "GEOJSON", "DBF"];
 
for (let item of liste) {
  let spanObj = document.createElement("span");
  spanObj.className = "badge badge-info";
  spanObj.append(item);
  document.body.append(spanObj);
}

Voir createElement et append.

En un seul .append() sur le body pour être plus efficace :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
let liste = ["KML", "SHP", "MDB", "TXT", "GEOJSON", "DBF"];
let spanArray = [];
 
for (let item of liste) {
  let spanObj = document.createElement("span");
  spanObj.className = "badge badge-info";
  spanObj.append(item);
  spanArray.push(spanObj);
}
document.body.append(...spanArray);

Voir spread.

Si la syntaxe ... (spread) n’est pas supportée, on peut le faire à l’ancienne mais c’est moins beau :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.body.append.apply(document.body, spanArray);

Voir apply.

En version fonctionnelle :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
let liste = ["KML", "SHP", "MDB", "TXT", "GEOJSON", "DBF"];
 
document.body.append(...liste.map((item) => {
  let spanObj = document.createElement("span");
  spanObj.className = "badge badge-info";
  spanObj.append(item);
  return spanObj;
}));

Voir map.

Quant au Fiddle, il ne marche pas pour une simple raison :

TypeError: $(...).bootstrapTable is not a function

Tu n’as pas inclus le plugin bootstrapTable. Tu l’aurais vu tout de suite si tu avais ouvert la console.

[SylvainM]

Merci Watilin

Je tiens à préciser, pour expliquer (non excuser) mon incompétence, que je ne suis pas du tout développeur, que je n'ai jamais eu un seul cours de développement, mais que mes "bidouilles" sur codes me sont très utiles
Merci donc pour votre indulgence !

Quant au Fiddle, il ne marche pas pour une simple raison : [...] Tu n’as pas inclus le plugin bootstrapTable. Tu l’aurais vu tout de suite si tu avais ouvert la console.

Bon, je ne comprends pas grand chose dans la console, mais SI, je l'avais ouvert !? Et je n'ai pas vu ce message d'erreur !?
Et j'ai bien fait la référence au plugin dans la partie "Ressources" du Fiddle ???

Du coup, je suis parti du Fiddle où les fonctions de formatage fonctionnent, et en ajoutant mon code, ça marche !
Voici le lien du Fiddle : http://jsfiddle.net/7hf6c8d2/9/

Tu verras que j'y ai intégré avec succès ta méthode que je suis en train d'essayer de comprendre.

Mais ce que je ne vois vraiment pas, c'est comment faire tourner cette fonction sur les items de la colonne de mon tableau (data-field="l_ext").

Pourriez-vous m'aider à y parvenir ?

Merci encore !!!