Ajout page d'exemple pour l'extension SortingFieldsStandAlone
This commit is contained in:
parent
ad7575bf8b
commit
efa0c77213
@ -31,6 +31,7 @@
|
||||
<li><a href="/withCSV.html">Parser et afficher un fichier CSV prédéfini</a>, avec ajout de filtres multi-critères, moteur de recherche, pagination, compteur de résultats.. Il s'agit de l'exemple le plus complet.</li>
|
||||
<li><a href="/withJSON.html">Parser et afficher des données JSON</a>, avec ajout d'un filtre, d'un moteur de recherche, pagination et compteur de résultats.</li>
|
||||
<li><a href="/withHTML.html">Parser et réafficher les données situées dans le code HTML</a> de la page, avec filtre, pagination et adaptation à la taille de l'écran.</li>
|
||||
<li><a href="/withUL.html">Utilisation d'une extension créant des liens de classement</a>, dans le cas où les données ne sont pas listées dans un tableau.</li>
|
||||
</ul>
|
||||
<p>Un lien vers le code source TypeScript est fourni pour chaque exemple, de manière à ce que vous puissiez lire le code, tout en observant le résultat.</p>
|
||||
</article>
|
||||
|
||||
53
public/withUL.html
Normal file
53
public/withUL.html
Normal file
@ -0,0 +1,53 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Exemple d’utilisation de FreeDatas2HTML pour classer des données, non listées sous forme de tableau.">
|
||||
<meta name="robots" content="index, follow">
|
||||
<link rel="stylesheet" href="CSS/paper.min.css">
|
||||
<link rel="stylesheet" href="CSS/fd2html.css">
|
||||
<script src="JS/exampleWithUL.app.js" defer></script>
|
||||
<script src="JS/matomo.js" defer></script>
|
||||
<title>Classer des données non listées sous forme de tableau HTML - FreeDatas2HTML</title>
|
||||
</head>
|
||||
|
||||
<body class="paper container">
|
||||
|
||||
<header id="header" class="text-center">
|
||||
<h1><a href="/">FreeDatas2HTML</a></h1>
|
||||
<nav id="menu-principal">
|
||||
<ul class="inline row flex-center">
|
||||
<li><a href="./#intro" class="badge warning sm-12 col">Introduction</a></li>
|
||||
<li><a href="./examples.html#content" class="badge success sm-12 col">Exemples</a></li>
|
||||
<li><a href="https://forge.chapril.org/Fab_Blab/FreeDatas2HTML" target="_blank" title="accéder au dépôt GIT" rel="noopener" class="badge success sm-12 col">Git</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<h2>Classer des données non listées sous forme de tableau</h2>
|
||||
|
||||
<article id="content">
|
||||
<p>Dans l’exemple ci-dessous FreeDatas2HTML liste les données autrement que sous forme de tableau.<br>Dans ce cas, l’absence d’entêtes de colonne ne permet pas d’utiliser le module rendant cliquables ces entêtes pour lancer le classement les données.</p>
|
||||
<p>Aussi, <a href="https://forge.chapril.org/Fab_Blab/freeDatas2HTML/src/branch/master/src/extensions/exampleWithUL.ts" title="Script de l’extension" target="_blank">une extension</a> est utilisée. Elle gère de manière autonome la création et le fonctionnement des liens de classements. Vous pouvez écrire votre propre extension, par exemple si vous préférez proposer une liste SELECT pour choisir le champ de classement. L’important est que la demande de classement par l’utilisateur appelle la fonction d’actualisation de FreeDatas2HTML, en lui ayant transmis préalablement le champ sur lequel classer les données et l’ordre dans lequel les classer.</p>
|
||||
</article>
|
||||
|
||||
|
||||
<div id="classement">
|
||||
</div>
|
||||
|
||||
<div id="datas">
|
||||
<p>Si tout se passe bien, ce texte sera remplacé par un tableau de données extraites du fichier CSV.</p>
|
||||
</div>
|
||||
|
||||
<aside>
|
||||
<p>Les données listées viennent d’<a href="./datas/elements-chimiques.csv">un fichier CSV</a> reprenant une partie des informations trouvées <a href="https://fr.wikipedia.org/wiki/%C3%89l%C3%A9ment_chimique#Caract%C3%A9ristiques_des_diff%C3%A9rents_%C3%A9l%C3%A9ments" target="_blank" rel="noopener" title="Wikipédia">sur Wikipédia</a>.</p>
|
||||
</aside>
|
||||
|
||||
<aside>
|
||||
<p><a href="https://forge.chapril.org/Fab_Blab/freeDatas2HTML/src/branch/master/src/demo/exampleWithUL.ts" target="_blank" title="accéder au code" rel="noopener" class="paper-btn btn-secondary">Code source utilisé par cette page.</a></p>
|
||||
</aside>
|
||||
|
||||
<footer><p>Design : <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a> | <a href="/mentions-legales.html">Contact et mentions légales</a>.</p></footer>
|
||||
</body>
|
||||
</html>
|
||||
51
src/demo/exampleWithUL.ts
Normal file
51
src/demo/exampleWithUL.ts
Normal file
@ -0,0 +1,51 @@
|
||||
import { FreeDatas2HTML, Pagination, Render, SearchEngine, Selector, SortingField } from "../FreeDatas2HTML";
|
||||
import { SortingFieldsStandAlone } from "../extensions/SortingFieldsStandAlone";
|
||||
|
||||
const initialise=async () =>
|
||||
{
|
||||
try
|
||||
{
|
||||
// Création d'un convertisseur parsant les données d'un fichier CSV "distant"
|
||||
const converter=new FreeDatas2HTML("CSV");
|
||||
converter.parser.setRemoteSource({ url:"http://localhost:8080/datas/elements-chimiques.csv" });
|
||||
// Parsage des données, qui ne sont pas encore affichées :
|
||||
await converter.run();
|
||||
// On affiche que certains champs :
|
||||
converter.fields2Rend=[0,1,2,3];
|
||||
|
||||
// Les données sont listées en dehors d'un tableau :
|
||||
const myRender=new Render();
|
||||
myRender.settings=
|
||||
{
|
||||
allBegining:"<h4>Liste des éléments chimiques :</h4>",
|
||||
allEnding:"",
|
||||
linesBegining:"<ul>",
|
||||
linesEnding:"</ul>",
|
||||
lineBegining:"<li><ul>",
|
||||
lineEnding:"</ul></li>",
|
||||
dataDisplaying:"<li><b>#FIELDNAME :</b> #VALUE</li>",
|
||||
};
|
||||
converter.datasRender=myRender;
|
||||
|
||||
// Désignation des champs permettant de classer les données en dehors de l'affichage des données
|
||||
let sortingField1=new SortingField(converter, 0);
|
||||
let sortingField2=new SortingField(converter, 1);
|
||||
let sortingField3=new SortingField(converter, 2);
|
||||
const allFields=new SortingFieldsStandAlone(converter,{ id:"classement" });
|
||||
allFields.datasSortingFields=[sortingField1,sortingField2, sortingField3];
|
||||
allFields.rendSettings.allBeginning="<h4>#LABEL</h4><ul>";
|
||||
allFields.rend2HTML("Champ sur lequel classer les données :") ;
|
||||
|
||||
// Affichage initial :
|
||||
converter.datasViewElt={ id:"datas" };
|
||||
converter.refreshView();
|
||||
}
|
||||
catch(e)
|
||||
{
|
||||
console.error(e);
|
||||
document.getElementById("datas")!.innerHTML=`<div class="alert alert-warning">Désolé, mais un problème technique empêche l'affichage des données.</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
console.log("Hello, ami développeur :-)\nLe code source TypeScript utilisé pour faire fonctionner cette page est lisible ici : :\nhttps://forge.chapril.org/Fab_Blab/freeDatas2HTML/src/branch/master/src/demo/exampleWithJSON.ts\nUn bug ? Une suggestion ? => fabrice@le-fab-lab.com");
|
||||
initialise();
|
||||
@ -8,6 +8,7 @@ module.exports =
|
||||
exampleWithCSV: "./src/demo/exampleWithCSV.ts",
|
||||
exampleWithHTML: "./src/demo/exampleWithHTML.ts",
|
||||
exampleWithJSON: "./src/demo/exampleWithJSON.ts",
|
||||
exampleWithUL: "./src/demo/exampleWithUL.ts",
|
||||
exampleWithUserFile: "./src/demo/exampleWithUserFile.ts"
|
||||
},
|
||||
output:
|
||||
|
||||
Loading…
Reference in New Issue
Block a user