使用相同的引导模态编辑/显示对象

Question

我有下表

<table id="dtBasicExample"
                    class="table table-striped table-bordered table-sm"
                    cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th class="th-sm">Nom</th>                              
                            <th class="th-sm">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr th:each="field : ${list}">
                            <td th:text="${field.nom}" />                           
                            <td>
                            <a
                    class="btn btn-info btn-lg" data-toggle="modal" data-target="#exampleModal"
                    th:attrappend="data-target=${field}">Edit
            </a></td></tr></tbody>
</table>

我正在使用以下模式

<form th:object="${field}" name="modal" method="post"
            th:action="@{/ajouterNewField}">
            <div class="modal fade" id="exampleModal" tabindex="-1"
                role="dialog" aria-labelledby="exampleModalLabel"
                aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Ajouter un
                                nouveau champs</h5>
                            <button type="button" class="close" data-dismiss="modal"
                                aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            ...
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary"
                                data-dismiss="modal">Annuler</button>
                            <button type="submit" class="btn btn-primary">Valider</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>

我想重新使用模式（在这种情况下，它用于创建新元素）来编辑或仅显示其他元素。

Answer 1

我开始关注这篇文章：How to use bootstrap modal to edit the table data in MVC?，它为我提供了解决方案的主要部分。

要使用相同的Bootstrap模式执行Edit/Show，您将处理一些JS

myHTMLPage （表格部分）

<table id="dtBasicExample"
                    class="table table-striped table-bordered table-sm"
                    cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th style="display: none" class="th-sm">ID</th>
                            <th class="th-sm">Nom</th>
                            <th class="th-sm">ID Jira</th>
                            <th class="th-sm">Type</th>
                            <th style="display: none" class="th-sm">valueD</th>
                            <th class="th-sm">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr th:each="field : ${list}">
                            <td style="display: none" class="id" th:text="${field.id}" />
                            <td class="nom" th:text="${field.nom}" />
                            <td class="jira" th:text="${field.idJira}" />
                            <td class="type" th:text="${field.type}" />
                            <td style="display: none" class="valueDefaut"
                                th:text="${field.value}" />

                            <td><a class=" btn btn-outline-danger mr-3 edit">EDIT</a>
                                <a class="btn btn-outline-danger mr-3 show">SHOW</a> 
                                <a class="btn btn-outline-danger mr-3 deleteEnr">DELETE</a></td>


                        </tr>



                    </tbody>

                </table>

这是您需要在HTML

中使用的唯一内容

重要类名（edit，show，deleteEnr）非常重要，它们将帮助您执行JS代码，请不要跳过它们。

myHTMLPage （JS部分）

在这一部分中，我将向您展示显示代码，但对于其他人来说，它几乎是相同的

$('a.show').on('click', function() {

        var btn = document.getElementById('validate');
        var ann = document.getElementById('annuler');
        btn.style.visibility = 'hidden';
        ann.style.visibility = 'hidden';

        var myModal = $('#exampleModal');
        /// THIS IS HOW YOU GET YOUR VALUE
        var id = $(this).closest('tr').find('td.id').html();
        var nom = $(this).closest('tr').find('td.nom').html();
        var jira = $(this).closest('tr').find('td.jira').html();
        var type = $(this).closest('tr').find('td.type').html();
        var valueD = $(this).closest('tr').find('td.valueDefaut').html();
        /// THIS IS HOW YOU GET YOUR VALUE
        /// THIS IS HOW YOU REPLACE YOUR VALUE IN YOU R MODAL
        $('.id', myModal).val(id);
        $('.nomField', myModal).val(nom);
        $('.nomField', myModal).prop("readonly", true);
        $('.jiraField', myModal).val(jira);
        $('.jiraField', myModal).prop("readonly", true);
        $('.typeField', myModal).val(type);
        $('.typeField', myModal).prop("disabled", true);

        if (type == "Select Simple") {
            var element = document.getElementById('defaultValue');
            element.style.visibility = 'visible';
            var fieldsD = valueD.split(',');
            $('#tagsinput').tagsinput('removeAll');
            for (i = 0; i < fieldsD.length; i++) {
                $('#tagsinput').tagsinput('add', fieldsD[i]);
            }

            $('.tagsinput', myModal).prop("disabled", true);

        } else if (type == "Select Multiple") {
            var element = document.getElementById('defaultValue');
            element.style.visibility = 'visible';
            var fieldsD = valueD.split(',');
            $('#tagsinput').tagsinput('removeAll');
            for (i = 0; i < fieldsD.length; i++) {
                $('#tagsinput').tagsinput('add', fieldsD[i]);
            }

            $('.tagsinput', myModal).prop("disabled", true);

        } else {

            var element = document.getElementById('defaultValue');
            element.style.visibility = 'hidden';
        }



        myModal.modal({
            show : true
        });

    });

希望会有所帮助。