Làm cách nào để chỉnh sửa dữ liệu trong phương thức Bootstrap?

Thay đổi kích thước của modal bằng cách thêm lớp .modal-sm cho modal nhỏ, lớp .modal-lg cho modal lớn hoặc .modal-xl cho modal cực lớn

Thêm lớp kích thước vào

phần tử với lớp .modal-dialog

Theo mặc định, các phương thức có kích thước "trung bình"

Trung tâm phương thức

Căn giữa phương thức theo chiều dọc và chiều ngang trong trang, với lớp .modal-dialog-centered

Phương thức cuộn

Khi bạn có nhiều nội dung bên trong phương thức, một thanh cuộn sẽ được thêm vào trang. Xem các ví dụ dưới đây để hiểu nó

Tuy nhiên, chỉ có thể cuộn bên trong phương thức, thay vì chính trang đó, bằng cách thêm .modal-dialog-scrollable vào .modal-dialog

Hoàn thành tài liệu tham khảo phương thức Bootstrap

Để có tham khảo đầy đủ về tất cả các tùy chọn, phương thức và sự kiện phương thức, hãy truy cập Tham khảo phương thức Bootstrap JS của chúng tôi

Trong bài viết trước, tôi đã viết, “Cách thêm dữ liệu từ plugin Datable bằng phương thức Bootstrap trong CodeIgniter”, tôi chỉ hiển thị thêm dữ liệu mới. Bài viết này mình sẽ chia sẻ cách chỉnh sửa dữ liệu qua Bootstrap modal. Đi nào

nội dung

Thêm một cột mới cho bộ điều khiển trong trang xem

Trong mẫu, chúng tôi thêm cột mới vào thẻ bảng. Bảng này sẽ sử dụng cho plugin DataTable

            
            

                

                    

                        
Id
                        
Title
                        
Slug
                        
Text
                        
 
                    
                
                

                    

                        
Id
                        
Title
                        
Slug
                        
Text
                        
 
                    
                
            

Thêm điều khiển chỉnh sửa trong mẫu chân trang

Mở mẫu chân trang của bạn, thêm kết xuất cột như mã bên dưới. Mã JavaScript này sẽ được thêm vào cuối mẫu. Nó sẽ nằm dưới tập lệnh DataTable

Chúng tôi thêm tùy chọn kết xuất cho cột cuối cùng cho bảng của chúng tôi. Chúng tôi trả lại nút chỉnh sửa với giá trị hàng cho các thuộc tính dữ liệu. Vì vậy, trong chức năng phương thức Bootstrap, chúng ta có thể truy cập giá trị hàng thông qua thuộc tính dữ liệu

Lưu ý rằng, chúng tôi thêm chuyển đổi dữ liệu và mục tiêu dữ liệu để kích hoạt chế độ chỉnh sửa Bootstrap

Thêm phương thức chỉnh sửa dữ liệu trong trang xem

Mở mẫu của bạn và thêm mã phương thức chỉnh sửa bên dưới. Mã này sẽ hiển thị cửa sổ phương thức chỉnh sửa dữ liệu

    

        

            

                
Edit News item
                ×
            
            


                

                    
                    

                        Title
                        
                    
                    

                        Slug
                        
                    
                    

                        Text
                        
                    

                    

                        Close
                        
                    
                

            
 
        
 
    
 
 

Bây giờ khi bạn nhấp vào nút chỉnh sửa, chế độ chỉnh sửa sẽ bật lên như màn hình bên dưới

Thêm biểu mẫu cập nhật đang gửi

Tiếp theo, chúng tôi sẽ thêm mã JavaScript để xử lý biểu mẫu gửi. Dưới đây là mã

        /**
         * Add update data via ajax 
         */
        $('#update_form').on("submit", function(event) {
            event.preventDefault();

            // # form validation
            // Optional, you can use the jQuery validation plugin (https://applerinquest.com/how-to-validate-a-form-with-jquery-validation-plugin/)
            // if you don't want to do the form validation manually.

            // For the warning message, you can use the Alert message from Bootstrap if you like. I use alert() because I want to keep the post short.
            // https://getbootstrap.com/docs/4.0/components/alerts/
            var edit_modal = $('#edit_news_modal');
            var $title = edit_modal.find('#title');
            var $slug = edit_modal.find('#slug');
            var $text = edit_modal.find('#text');

            if ($title.val() == "") {
                alert("Title is required");
                $title.focus();

            } else if ($slug.val() == '') {
                alert("Slug is required");
                $slug.focus();

            } else if ($text.val() == '') {
                alert("Text is required");
                $text.focus();

            } else {
                $.ajax({
                    url: "",
                    method: "POST",
                    data: $('#update_form').serialize(),
                    dataType: "JSON", // you must set dataType as JSON while sending the Ajax request
                    beforeSend: function() {
                        $('#update').val("Updating");
                    },
                    success: function(response) {
                        // # get the response from our controller
                        // console.log(response);
                        // console.log(response.upd_status);
                        // console.log(response.data);

                        if (response.upd_status) {
                            // reset the form
                            $('#update_form')[0].reset();
                            $('#update').val("Save");

                            // hide the Bootstrap modal
                            $('#edit_news_modal').modal('hide');

                            // refresh the Datatable plugin
                            $('#rep_news').dataTable().fnDestroy();
                            $('#rep_news').DataTable({
                                data: response.data,
                                columns: [{
                                        "data": "id"
                                    },
                                    {
                                        "data": "title"
                                    },
                                    {
                                        "data": "slug"
                                    },
                                    {
                                        "data": "text"
                                    }
                                ],
                                columnDefs: [{
                                        // # hide the first column
                                        // https://datatables.net/examples/advanced_init/column_render.html                    
                                        "targets": [0],
                                        "visible": false
                                    },
                                    {
                                        // # disable search for column number 2
                                        // https://datatables.net/reference/option/columns.searchable                    
                                        "targets": [3],
                                        "searchable": false,
                                        // # disable orderable column
                                        // https://datatables.net/reference/option/columns.orderable
                                        "orderable": false
                                    },
                                    {
                                        // # action controller (edit,delete)
                                        "targets": [4],
                                        // # column rendering
                                        // https://datatables.net/reference/option/columns.render
                                        "render": function(data, type, row, meta) {
                                            return 'Edit';
                                        }
                                    }
                                ],
                                // # set order descending and ascending
                                // https://datatables.net/reference/option/order
                                "order": [
                                    [1, 'desc'],
                                    [2, 'asc']
                                ]
                            });

                            // success message
                            alert('success');

                        } else {

                            alert('data is not updated. you must check the update script in your model.');
                        }

                    },
                    error: function(xhr, status, error) {
                        var err = eval("(" + xhr.responseText + ")");
                        alert(err.Message);
                    }
                });
            }
        });

Trong mã JavaScript, nó thực hiện xác thực biểu mẫu trước. Sau đó, nó gọi Ajax để gửi dữ liệu biểu mẫu để cập nhật dữ liệu trong cơ sở dữ liệu

Nếu cập nhật thành công sẽ hiện thông báo thành công và ẩn mod. Cuối cùng, nó sẽ làm mới dữ liệu tại bảng

Bạn phải đặt kiểu dữ liệu là JSON trong lệnh gọi Ajax

quan trọng

Thêm phương thức mục dữ liệu cập nhật trong bộ điều khiển

Trong lệnh gọi Ajax, chúng ta cần gửi yêu cầu đến đối tượng URL. Trong cuộc gọi ajax của chúng tôi, chúng tôi gửi yêu cầu tới “index. php/tin tức/upd_news_item“. Nhưng chúng tôi chưa tạo phương thức upd_news_item. Hãy tạo ngay bây giờ

Mở bộ điều khiển của bạn, trong trường hợp của tôi, đó là bộ điều khiển tin tức và thêm mã bên dưới

    /**
     * Update new data from Bootstrap modal
     */
    public function upd_news_item()
    {
        $upd = $this->news_model->upd_news();
        $news = $this->news_model->get_news();

        // # Return our data back to ajax with Json format (json_encode)
        // you must use "echo" for returning the result you want.
        echo json_encode(
            // using the array for returning data
            array(
                'upd_status' => $upd,
                'data' => $news
            )
        );
    }

Trong phương thức, chúng tôi gọi phương thức upd_news từ mô hình tin tức để cập nhật dữ liệu. Tiếp theo, chúng tôi truy vấn tất cả dữ liệu tin tức và gửi lại cho cuộc gọi Ajax

Lưu ý rằng, chúng tôi sử dụng “echo” để trả lại kết quả cho Ajax và gửi mảng dưới dạng kết quả. Ngoài ra, chúng tôi sử dụng hàm json_encode để chuyển đổi mảng thành JSON vì Ajax của chúng tôi đặt kiểu dữ liệu là JSON

Quan trọng

Thêm phương thức upd_news vào mô hình

Trong bộ điều khiển ở trên, chúng tôi gọi phương thức upd_news từ mô hình để cập nhật dữ liệu. Nhưng chúng ta chưa tạo phương thức này

Để tạo phương thức, hãy thêm mã bên dưới

    public function upd_news()
    {
        $this->load->helper('url');

        $slug = url_title($this->input->post('title'), 'dash', TRUE);

        $data = array(
            'title' => $this->input->post('title'),
            'slug' => $slug,
            'text' => $this->input->post('text')
        );

        $this->db->where('id', $this->input->post('id'));
        return $this->db->update('news', $data);
    }

Bây giờ bạn có thể chỉnh sửa dữ liệu bằng phương thức Bootstrap qua Ajax

Phần kết luận

Với các plugin Bootstrap modal và Datatable, người dùng của bạn có thể quản lý dữ liệu dễ dàng và nhanh hơn. Tôi hy vọng bài viết này sẽ hữu ích cho mỗi ngày

Làm cách nào để chỉnh sửa phương thức Bootstrap?

Làm cách nào để cập nhật dữ liệu trong phương thức Bootstrap?

Làm cách nào để chỉnh sửa dữ liệu theo phương thức trong PHP?

Làm cách nào để lấy dữ liệu động trong phương thức Bootstrap?