[JAVA] J'ai essayé de développer un outil de gestion des effectifs

Ce que j'ai fait

Nous avons développé une application web qui gère le nombre d'étapes. Langage: Java (Spring), JavaScript

procédure

1. Créez un projet (enregistrez le code du projet à ce moment)
2. En entrant le code de projet enregistré en 1., passez au projet que vous souhaitez ajouter / modifier / afficher
3. Ajouter une tâche (nom de la tâche, main-d'œuvre, date de début, date de fin, responsable, etc.)
4. Parcours des tâches (quel type de tâche la personne en charge a accompli dans une certaine période, combien d'efforts chaque personne en charge du projet consacre, etc.)

écran

Écran de saisie du code de projet

Écran d'ajout (et de modification) de tâche

Écran de visualisation des tâches

Obstrué

Coopération entre JavaScript et Thymeleaf?

Comme je l'ai écrit dans Article précédent, par exemple, en JavaScript

target.html('<a th:href="@{/hello}">échantillon</a>');

Même si j'écrivais, la balise a ne fonctionnait pas.

Solution

<script type="text/javascript" th:inline="javascript">
    const link = /*[[@{/hello}]]*/'';
    target.html('<a href="' + link + '">échantillon</a>');
</script>

Je l'ai résolu en écrivant. De cette façon, j'ai eu du mal avec le fait que le `` th: '' de Thymeleaf ne peut pas être utilisé en JavaScript.

Le problème de ne pas pouvoir écrire la balise form à l'intérieur de la balise `` table

Par exemple

<table>
    <tr>
        <th>#</th>
        <th>Nom</th>
        <th>bouton</th>
    </tr>
    <tr>
        <form>
            <td>1</td>
            <td><input type="text"/></td>
            <td><input type="submit"></td>
        </form>
    </tr>
    <tr>
        <form>
            <td>2</td>
            <td><input type="text" /></td>
            <td><input type="submit"></td>
        </form>
    </tr>
</table>

Si c'est une image

C'est le cas. En regardant cela avec les outils de développement de Chrome, ...

Étrange. .. .. Balise `` form '', ne la fermez pas ici. .. ..

Solution

1. Ajoutez l'attribut id à la balise `` form ''
2. Entrez l'identifiant donné en 1. dans l'attribut form de la balise input.

En faisant cela, vous pouvez envoyer la valeur de la valeur input correspondant à l'id de la balise `form```. Au fait, la balise form``` peut être écrite n'importe où au-dessus ou en dessous de la balise ʻinput```.

Dans l'exemple ci-dessus

<table>
    <tr>
        <th>#</th>
        <th>Nom</th>
        <th>bouton</th>
    </tr>
    <tr>
        <form id="form_01"></form>
        <td>1</td>
        <td><input type="text" form="form_01" /></td>
        <td><input type="submit" form="form_01"></td>
    </tr>
    <tr>
        <form id="form_02"></form>
        <td>2</td>
        <td><input type="text" form="form_02" /></td>
        <td><input type="submit" form="form_02"></td>
    </tr>
</table>

En regardant les outils de développement

Ça devrait ressembler à ça! Cela fonctionnera probablement.

c'est tout. Merci d'avoir lu jusqu'au bout.

référence

Les balises de formulaire ne peuvent pas être imbriquées et comment les gérer Comment écrire le formulaire HTML5 et INPUT séparément