From efa0c77213545bc111a62c568988647a54f97fbc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabrice=20PENHO=C3=8BT?= Date: Thu, 9 Dec 2021 11:49:44 +0100 Subject: [PATCH] Ajout page d'exemple pour l'extension SortingFieldsStandAlone --- public/examples.html | 1 + public/withUL.html | 53 +++++++++++++++++++++++++++++++++++++++ src/demo/exampleWithUL.ts | 51 +++++++++++++++++++++++++++++++++++++ webpack.config.js | 1 + 4 files changed, 106 insertions(+) create mode 100644 public/withUL.html create mode 100644 src/demo/exampleWithUL.ts diff --git a/public/examples.html b/public/examples.html index 5afc1a3..2c2a330 100644 --- a/public/examples.html +++ b/public/examples.html @@ -31,6 +31,7 @@
  • Parser et afficher un fichier CSV prédéfini, avec ajout de filtres multi-critères, moteur de recherche, pagination, compteur de résultats.. Il s'agit de l'exemple le plus complet.
  • Parser et afficher des données JSON, avec ajout d'un filtre, d'un moteur de recherche, pagination et compteur de résultats.
  • Parser et réafficher les données situées dans le code HTML de la page, avec filtre, pagination et adaptation à la taille de l'écran.
    • +
  • Utilisation d'une extension créant des liens de classement, dans le cas où les données ne sont pas listées dans un tableau.

    • 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.

    diff --git a/public/withUL.html b/public/withUL.html new file mode 100644 index 0000000..a98f7ea --- /dev/null +++ b/public/withUL.html @@ -0,0 +1,53 @@ + + + + + + + + + + + + Classer des données non listées sous forme de tableau HTML - FreeDatas2HTML + + + + +
    +

    FreeDatas2HTML

    + +
    + +

    Classer des données non listées sous forme de tableau

    + +
    +

    Dans l’exemple ci-dessous FreeDatas2HTML liste les données autrement que sous forme de tableau.
    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.

    +

    Aussi, une extension 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.

    +
    + + +
    +
    + +
    +

    Si tout se passe bien, ce texte sera remplacé par un tableau de données extraites du fichier CSV.

    +
    + + + + + + + + \ No newline at end of file diff --git a/src/demo/exampleWithUL.ts b/src/demo/exampleWithUL.ts new file mode 100644 index 0000000..7aea3bb --- /dev/null +++ b/src/demo/exampleWithUL.ts @@ -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:"

    Liste des éléments chimiques :

    ", + allEnding:"", + linesBegining:"", + lineBegining:"
    • ", + dataDisplaying:"
  • #FIELDNAME : #VALUE
    • ", + }; + 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="

    #LABEL