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
$[document].ready[function[] {
/**
* DataTable initialization
*/
$['#rep_news'].DataTable[{
data: ,
columns: [{
"data": "id"
},
{
"data": "title"
},
{
"data": "slug"
},
{
"data": "text"
}
],
columnDefs: [{
// # hide the first column
// //datatables.net/examples/advanced_init/column_render.html
"targets": [0],
"visible": false
},
{
// # disable search for column number 2
// //datatables.net/reference/option/columns.searchable
"targets": [3],
"searchable": false,
// # disable orderable column
// //datatables.net/reference/option/columns.orderable
"orderable": false
},
{
// # action controller [edit,delete]
"targets": [4],
// # column rendering
// //datatables.net/reference/option/columns.render
"render": function[data, type, row, meta] {
return 'Edit';
}
}
],
// # set order descending and ascending
// //datatables.net/reference/option/order
"order": [
[1, 'desc'],
[2, 'asc']
]
}];
}]; // document ready ends
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 [//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.
// //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
// //datatables.net/examples/advanced_init/column_render.html
"targets": [0],
"visible": false
},
{
// # disable search for column number 2
// //datatables.net/reference/option/columns.searchable
"targets": [3],
"searchable": false,
// # disable orderable column
// //datatables.net/reference/option/columns.orderable
"orderable": false
},
{
// # action controller [edit,delete]
"targets": [4],
// # column rendering
// //datatables.net/reference/option/columns.render
"render": function[data, type, row, meta] {
return 'Edit';
}
}
],
// # set order descending and ascending
// //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