Tùy chỉnh thành phần trong trang danh sách Backpack để sửa trường

Ngày cập nhật: 2019-05-03
Lượt đọc: 6696
Số từ: 398
Phân loại: Backpack

Tìm kiếm
Bạn có thể tùy chỉnh một cột (column) trên trang danh sách, tức là định nghĩa kiểu column type.
Hiệu ứng được mô tả như hình minh họa sau:
!Tùy chỉnh thành phần trong trang danh sách Backpack để sửa trường

Nếu cập nhật thành công, hệ thống sẽ nhận lại giá trị đã cập nhật từ backend và hiển thị giá trị đó ngay lập tức.
Việc tùy chỉnh một column type tương tự như việc tạo một field type.
Đường dẫn mẫu của các file liên quan:
vendor/backpack/crud/src/resources/views/columns/

Khái niệm ở phía backend

Danh sách tham số gửi lên qua API:

• tên model
• id bản ghi
• tên trường
• giá trị mới

Tránh định nghĩa lại hàm JS nhiều lần

Việc sử dụng JavaScript trực tiếp có thể gây ra xung đột, vì vậy nên dùng PHP để tránh điều này.
Trên thực tế, chỉ cần hai hàm chính là radio và chỉnh sửa giá trị số, do đó cũng có thể viết chúng vào file list.js.
Đường dẫn: public/vendor/backpack/crud/js/list.js

Một vài tình huống sử dụng

1. Kiểu radio – chuyển đổi giữa true/false. Ví dụ: hàng đã giao hay chưa, sản phẩm đã kích hoạt hay chưa.
2. Chỉnh sửa giá trị số hoặc văn bản – ví dụ: thứ tự sắp xếp, giá tiền.

Thành phần Radio

1
2
3
4
5
6

@php
  $keyName = isset($column['key']) ? $column['key'] : $column['name'];
  $entryValue = $entry->{$keyName};
  $displayValue = isset($column['options'][$entryValue]) ? $column['options'][$entryValue] : '';
@endphp
<td>{{ $displayValue }}</td>

Giải thích về $entry:

• $entry - đối tượng bản ghi trong cơ sở dữ liệu (đối tượng Eloquent);
• $crud - toàn bộ cài đặt, tùy chọn và biến liên quan đến bảng CRUD;

Biến động PHP

1

$entry->{$keyName}

Công tắc Switch

Không phù hợp khi tích hợp component Vue, bởi vì dữ liệu được tải HTML bất đồng bộ và không thể ràng buộc sự kiện.

Hộp thoại xác nhận đẹp mắt bằng JS

Cột (Column)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

[2019-04-30 16:37:52] local.INFO: Array
(
  [name] => publish
  [label] => Có phải đã đăng
  [type] => change_radio
  [options] => Array
    (
      [0] => Không
      [1] => Có
    )
)
[2019-04-30 16:48:09] local.INFO: App\Models\Comments
get_class($entry)

Nên tránh dùng chung interface backend

Việc dùng chung có thể gây rủi ro bảo mật.
Các thành phần có thể được thiết kế chung, nhưng từng endpoint backend vẫn nên được xây dựng riêng biệt.
Link API gọi tới có thể truyền vào thông qua các thuộc tính của component.

Tài liệu

• Thảo luận chi tiết tại: