TTrack – Bootstrap Popup

popup

Witaj czytelniku, z uwagi na brak czasu musiałem zrobić przerwę z projektem, gdy wróciłem do kodu koncepcja aplikacji się troszkę zmieniła:).                   


 
 
 
 

Popup

 

Po wymuszonej przerwie, zacząłem od zabawy z frontendem a dokładnie od utworzenia popupa do wyświetlania tasków i dzisiaj pokażę Ci jak zrobić szybko takie okno z danych w formacie JSON z pomocą Bootstrap Table.

 

 

Na początek musimy utworzyć sobie formę która będzie naszym popupem. Skorzystamy tutaj z klasy modal dodatkowo dorzucimy „style=”display:table;””, aby okno było wrap content:) czyli dopasowywało się do zawartości. Teraz ważna część – w tabeli ustawiamy parametry data-field tak jak nazywają się nasze atrybuty w jsonie. Aby uzyskać przyciski przy każdym rekordzie tworzymy custom formattery które za chwilę zobaczysz w pliku js. Zwracają poprostu odpowiednie buttony. Należy też pamiętać, aby dodać skrypty do obsługi bootstrap table.

 




<div class="modal fade" id="allTasksModal" tabindex="-1" role="dialog" aria-hidden="true" >
   <div class="modal-dialog modal-lg" style="display:table;">
       <div class="modal-content">
           <div class="modal-body">
               <table id="tableTasks" class="table table-hover">
                   <thead>
                   <tr>
                       <th data-field="id" id="taskID">ID</th>
                       <th data-field="name">Name</th>
                       <th data-field="description">Description</th>
                       <th data-formatter="editButtonFormatter"></th>
                       <th data-formatter="deleteButtonFormatter"></th>
                   </tr>
                   </thead>
               </table>
           </div>
           <div class="modal-footer">
               <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
           </div>
       </div>
   </div>
</div>

 

 Aby przyszły do nas dane w formacie Jsona po stronie Javy należy do controllera dodać jescze adnotację @ResponseBody i zwróćić interesujące nas dane.

 

    @RequestMapping(value = {"/tasks-{ssoId}"}, method = RequestMethod.GET)
    @ResponseBody
    public List<Task> listOfTasks(@PathVariable String ssoId) {

        Employer currentEmployer = employerService.findBySSO(ssoId);
        List<Task> tasks = taskService.findAllTasksByEmployer(currentEmployer);

        return tasks;
    }

 

Następnie tworzymy skrypt z pomocą js który po naciśnięciu przycisku Tasks pobiera odpowiednie dane z serwera i umieszcza we wcześniej utworzonej formię oraz wyświetla ją jako popup. Jest też event który obsługuje przyciski edit w popupie.

 

var employerID = null;

$(document).ready(function() {
    $('.showAll').on('click', function() {
        employerID = $(this).attr('data-id');

        $.ajax({
            type: "GET",
            url: 'http://localhost:8080/tasks-' + employerID,
            dataType : 'json',
            contentType : 'application/json',
            success: function (tasks) {

             $('#tableTasks').bootstrapTable({
                data: tasks
             });

             $('#allTasksModal').modal('show');
            }
        });
    });

    $("#tableTasks").on("click-cell.bs.table", function (field, value, row, $el) {

       var taskId = $el.id - 1;
       window.location.replace('http://localhost:8080/manage-employer-'+ employerID +'-task-' + taskId);
    });

});

function editButtonFormatter(value) {
            return '<button class="btn btn-success custom-width manageEmployer">Edit</button>';
}

function deleteButtonFormatter(value) {
            return '<button class="btn btn-danger custom-width manageEmployer" onclick="deleteTask()">Delete</button>';
}

 
Kod dostępny jak zwykle na githubie. Dzięki Cześć:)

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *