19. tháng 1 2025

Ví dụ đã gửi hàng chưa, đã niêm yết chưa - tại f8bet

Bạn có thể tạo một loại trường danh sách tùy chỉnh, còn được gọi là column type. Hiệu ứng như hình: !Tùy chỉnh thành phần trong trang danh sách Backpack để chỉnh sửa trường

Trang danh sách phía trước sẽ tự động cập nhật

Nếu quá trình cập nhật thành công, hệ thống sẽ trả về giá trị đã cập nhật từ backend và frontend sẽ cập nhật tương ứng với giá trị đó. Tạo một column type tùy chỉnh tương tự như field type vendor/backpack/crud/src/resources/views/columns/

Abstraction ở phía backend

Các tham số giao tiếp bao gồm:

Tên mô hình (model name)
ID
Tên trường (field name)
Giá trị

Phòng tránh định nghĩa nhiều lần hàm JS

Sử dụng JavaScript không hợp lý trong trường hợp này, vì vậy hãy dùng PHP để ngăn chặn vấn đề này. Chỉ có hai kiểu hàm: radio và sửa đổi số. Vì thế, việc viết chúng trực tiếp vào list.js cũng hoàn toàn khả thi. public/vendor/backpack/crud/js/list.js

Một vài tình huống cụ thể

Kiểm soát các nút radio true/false chuyển đổi. Ví dụ: đã gửi hàng chưa, đã niêm yết chưa.
Chỉnh sửa số hoặc văn bản. Ví dụ: giá trị sắp xếp, giá trị tiền tệ.

Thành phần radio

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

Ý nghĩa của entry:

$entry - mục cơ sở dữ liệu bạn đang hiển thị (đối tượng Eloquent);
$crud - tất cả các cài đặt, tùy chọn và biến của bảng điều khiển CRUD;

Tên biến động trong PHP

$entry->{$keyName}

Nút Switch

Không phù hợp khi sử dụng thành phần Vue. Vì dữ liệu được tải xuống bất đồng bộ đánh bài online dưới dạng HTML, nên không thể ràng buộc sự kiện.

Cửa sổ xác nhận JS đẹp hơn

Column

[2019-04-30 16:37:52] local.INFO: Mảng
(
  [name] => publish
  [label] => Có xuất bản hay không
  [type] => change_radio
  [options] => Mảng
    (
      [0] => Không
      [1] => Có
    )
)
[2019-04-30 16:48:09] local.INFO: App\Models\Comments
get_class($entry)

Không áp dụng chung API backend

Dễ xảy ra lỗ hổng bảo mật. Thành phần có thể được làm chung nhưng API backend cuối cùng vẫn cần được viết riêng từng lần. Liên kết API được gọi qua thông qua tham số của thành phần.

Thảo luận tại đây