Редактировать / Показывать объект с той же модальностью начальной загрузки - PullRequest
Новая
       43

Редактировать / Показывать объект с той же модальностью начальной загрузки

0 голосов
/ 11 сентября 2018

У меня есть следующая таблица 

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

Я хочу повторно использовать модал (в данном случае он использовался длясоздать новый элемент) для редактирования или просто показать другие элементы.

1 Ответ

0 голосов
/ 13 сентября 2018

Я начал следить за этим постом: Как использовать мод загрузки для редактирования данных таблицы в MVC? , и это дает мне большую часть решения.

Чтобы выполнить Edit/Show, используя тот же модальный Bootstrap, вы будете обрабатывать некоторые 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
        });

    });

Надеждаэто поможет

...