none
HTML : mise en forme de liste RRS feed

  • Discussion générale

  • Bonjour tout le monde,

    Je cherche à obtenir une mise en forme de ce style :

    • 001 Premier
    • 002 Deuxième

    Seulement voilà, là j'ai juste écrit un fichier HTML dans un éditeur de texte, avec donc un span dans chaque li, et ça marche, mais le but est d'afficher des données là-dedans.

    Une application multi-couche envoie une collection de produits par un serveur WebAPI à une liste OL.

    Les produits sont mis en forme par un module jQuery comme ceci :

    $(document).ready(function () {
        $("#divProducts").products();
    });
    (function ($) {
           
        var methods = {
            init: function (args) {
                $(this).products("loadPage", args);
            },
    		formatItem: function (item) {
    			var str = (("0000" + item.ProductID + " ").slice(-5, -1));
    			return (("[" + str + "] ") + item.ProductName + ': $' + item.UnitPrice);
            },

    Au départ on avait juste return item.ProductName + ': $' + item.UnitPrice;

    Comme on demandait à l'utilisateur de saisir un identifiant dans une zone de saisie, il me paraissait cohérent que l'identifiant soit fourni, d'où la modification -qui fonctionne.

    Si maintenant je mets un span dans la mise en forme :

    		formatItem: function (item) {
    			var str = (("0000" + item.ProductID + " ").slice(-5, -1));
    			return (("<span style='color:blue'>[" + str + "]</span> ") + item.ProductName + ': $' + item.UnitPrice);
            },

    le code du span est affiché sur la page, au lieu d'être interprété.

    J'ai tenté quelque chose du style new HTMLString, mais sans vraiment trouver la bonne syntaxe. C'est dommage, en plus de mettre l'identifiant en bleu, ça aurait permis d'aligner les prix dans une colonne à droite (car je crois que l'usage de TABLE risque d'être cafouilleux dans ce contexte).

    Est-ce que ça inspire quelqu'un ?




    mardi 28 août 2018 11:32

Toutes les réponses

  • Après avoir créé quelques serveurs WepAPI, j'ai cherché des solutions pour présenter des données. D'où le téléchargement d'un ensemble AngularWebApiCrud (peut-être bien de chez CodeProject), et par ailleurs l'apprentissage d'Angular JS.

    J'ai toutefois l'impression que les deux ne se rejoignent pas, puisque dans la solution SM.Store.WebApi je ne trouve ni directive, ni template, ni même Angular.

    Introduire Angular JS dans le projet pourrait être une solution, et je remplacerais alors <ol> par <article>, en prenant toutefois garde d'avoir en amont une section, avec les attributs ng-app et ng-controller.

    Il reste quand même la question de savoir si ce n'est pas surdimensionné pour juste la mise en forme, en partant d'un projet qui affiche déjà les données sous forme de liste.

    mardi 28 août 2018 12:27