Chức năng mô tả
Hãy tham khảo các số chỉ mục trên hình ảnh để xem mô tả chức năng tương ứng.
1. Tên menu và mô tả
Mặc định CRUD được tạo ra không hiển thị tên menu và mô tả. Nếu bạn cần hiển thị, hãy sửa đổi `Quản lý quyền` -> `Quy tắc menu`, thêm thông tin ghi chú cho menu tương ứng, sau đó nó sẽ được hiển thị. Hỗ trợ HTML.
2. Tab lọc
Khi tạo CRUD bằng một cú nhấp chuột, nếu bảng có trường `status` và là kiểu `ENUM`, tab lọc tương ứng sẽ được tạo. Nếu bạn cần tạo tab lọc cho các trường khác, bạn có thể chỉ định tên trường bằng cách sử dụng `--headingfilterfield= tên trường` khi sử dụng `php think crud`.
3. Tìm kiếm chung
Nội dung tìm kiếm chung được xác định bởi cấu hình trường `columns` của `bootstrap-table`. Nội dung và định dạng được hiển thị sẽ được FastAdmin tự động xử lý. Nếu bạn cần vô hiệu hóa hoặc xóa một tùy chọn, bạn có thể cấu hình `operate:false` trong JS để xóa tùy chọn trong tìm kiếm chung. Ví dụ, thông thường chúng ta cấu hình trường trong JS như sau:
{field: 'createtime', title: __('Create Time')}Mặc định tìm kiếm chung được bật. Đối với tìm kiếm chung, có một vài cấu hình thường dùng:
operate:'=' //toán tử sử dụng khi truy vấn, mặc định là =, false có nghĩa là vô hiệu hóa tìm kiếm chung cho trường này, hỗ trợ !=、LIKE、NOT LIKE、>、<、>=<=、FIND_IN_SET、IN、NOT IN、BETWEEN、NOT BETWEEN、RANGE、NOT RANGE、NULL、NOT NULL、false
searchList: //dữ liệu để hiển thị danh sách, hỗ trợ định dạng JSON Array, JSON Object, $.getJSON, Function
addclass: //thêm class bổ sung cho input hoặc select
type: //định nghĩa kiểu của input text, mặc định là text
data: //thêm thuộc tính bổ sung cho input hoặc selectVí dụ cấu hình thường dùng:
//Tìm kiếm theo khoảng thời gian
{field: 'createtime', title: __('Createtime'), operate: 'RANGE', addclass: 'datetimerange', formatter: Table.api.formatter.datetime},
//Tìm kiếm theo khoảng tiền
{field: 'money', title: __('Money'), operate: 'RANGE'},
//Tìm kiếm theo danh sách thả xuống
{field: 'flag', title: __('Flag'), searchList: {"hot": __('Flag hot'), "index": __('Flag index'), "recommend": __('Flag recommend')}, operate: 'FIND_IN_SET', formatter: Table.api.formatter.label},
//Tìm kiếm theo danh sách thả xuống động
{field: 'type', title: __('Type'), searchList: $.getJSON("ajax/dynamicselect")},
//Vô hiệu hóa tìm kiếm chung
{field: 'keywords', title: __('Keywords'), operate: false}Nếu chúng ta cần tùy chỉnh hoàn toàn thanh tìm kiếm chung, chúng ta có thể định nghĩa tùy chọn `searchFormTemplate` khi cấu hình `bootstrap-table` để viết lại thanh tìm kiếm chung của mình. Vui lòng tham khảo ví dụ tùy chỉnh tìm kiếm trong `plugin ví dụ phát triển`.
4. Nút thanh công cụ
FastAdmin tự động tạo HTML cho các nút thêm, sửa, xóa, nhập, và nhiều hơn nữa khi tạo CRUD bằng một cú nhấp chuột. Các nút này sẽ được kiểm soát hiển thị hoặc ẩn dựa trên quyền của người dùng. Chúng ta có thể sửa đổi hoặc xóa các nút tương ứng trong tệp view `index.html` của bộ điều khiển. Hãy đặc biệt chú ý rằng các nút được tạo tự động này đều được liên kết với sự kiện bằng thuộc tính `class`. Ví dụ, nút thêm có class `btn-add`, các class đã được framework sử dụng bao gồm:
btn-add: sử dụng cho nút thêm
btn-edit: sử dụng cho nút sửa
btn-del: sử dụng cho nút xóa
btn-import: sử dụng cho nút nhập
btn-more: sử dụng cho nút nhiều hơn
btn-multi: sử dụng cho thao tác
btn-disabled: thêm class này thì nút chỉ có thể sử dụng khi có dữ liệu được chọn trong danh sáchNếu chúng ta muốn mở nút `Thêm` ở chế độ toàn màn hình theo mặc định, chúng ta có thể thêm `data-area='["100%","100%"]'` cho nút thêm. Nếu chúng ta muốn tùy chỉnh nút và thêm sự kiện, chúng ta cần thêm mã HTML tương ứng trong view, sau đó thêm sự kiện thực thi nút trong tệp JS tương ứng. Tuyệt đối không viết mã JS hoặc jQuery trực tiếp trong view để liên kết sự kiện.
5. Thông tin thống kê động
Nhiều lúc chúng ta cần hiển thị dữ liệu động được trả về từ máy chủ trên trang. Lúc này, chúng ta chỉ cần thêm vào view `index.html`:
<a href="javascript:;" class="btn btn-default" style="font-size:14px;color:dodgerblue;">
<i class="fa fa-dollar"></i>
<span class="extend">
Số tiền：<span id="money">0</span>
Đơn giá：<span id="price">0</span>
</span>
</a>Sau đó thêm mã JS sau trong phương thức index của JS tương ứng với bộ điều khiển:
//Khi bảng dữ liệu được tải thành công
table.on('load-success.bs.table', function (e, data) {
//Ở đây chúng ta có thể lấy dữ liệu JSON từ máy chủ
console.log(data);
//Ở đây chúng ta đặt thủ công giá trị ở cuối
$("#money").text(data.extend.money);
$("#price").text(data.extend.price);
});Lưu ý phải thêm đoạn mã này sau:
var table = $("#table");Trong đó `data.extend.money` và `data.extend.price` là dữ liệu động mà chúng ta trả về từ máy chủ, như sau:
$result = array("total" => $total, "rows" => $list, "extend" => ['money' => 1024, 'price' => 888]);
return json($result);Bằng cách cấu hình trên, chúng ta có thể hiển thị dữ liệu bổ sung được trả về từ máy chủ một cách động.
6. Tìm kiếm nhanh
Tìm kiếm nhanh sẽ tìm kiếm dữ liệu từ máy chủ theo thời gian thực khi bạn nhập từ khóa. Nếu dữ liệu trong bảng của bạn lớn, bạn nên tắt chức năng này. Cách tắt là sử dụng `search:false`. Thêm vào đó, tìm kiếm nhanh mặc định chỉ tìm kiếm trường `id`. Nếu bạn cần tìm kiếm các trường khác, bạn cần định nghĩa `$searchFields` trong bộ điều khiển của máy chủ, như sau:
protected $searchFields = 'id,name,title';Bằng cách này, khi tìm kiếm nhanh, nó sẽ tìm kiếm ba trường `id, name, title`. Nếu bạn cần thay đổi placeholder mặc định của hộp văn bản, bạn có thể định nghĩa trước khi khởi tạo bảng:
$.fn.bootstrapTable.locales[Table.defaults.locale]['formatSearch'] = function(){return "Placeholder tùy chỉnh";};7. Chế độ xem, hiển thị/ẩn cột, xuất, tìm kiếm chung
Chế độ xem có thể chuyển đổi giữa chế độ xem thẻ và chế độ xem bảng. Nếu bạn không cần chức năng này, hãy đặt `showToggle: false`. Hiển thị/ẩn cột có thể chuyển đổi nhanh hiển thị và ẩn của cột trường. Nếu bạn không cần chức năng này, hãy đặt `showColumns: false`. Nếu bạn muốn các cột trường trong bảng ẩn theo mặc định, hãy đặt thuộc tính trường là `visible: false`. Nút xuất mặc định sẽ xuất tất cả các hàng của bảng. Nếu bạn chỉ cần xuất dữ liệu của trang hiện tại, hãy đặt `exportDataType: 'basic'`. Nếu bạn muốn xuất các hàng được chọn, hãy đặt `exportDataType: 'selected'`. Nếu bạn không cần chức năng này, hãy đặt `showExport: false`. Tìm kiếm chung đề cập đến thanh tìm kiếm ở trên bảng. Mặc định, biểu mẫu tìm kiếm chung bị ẩn. Nếu bạn cần hiển thị theo mặc định, hãy đặt `searchFormVisible: true`. Nếu bạn không cần chức năng tìm kiếm chung, hãy đặt `commonSearch: false`. Nếu bạn muốn kiểm soát cột trường không tham gia tìm kiếm, hãy đặt thuộc tính cột trường là `operate: false`.
8. Cấu hình trường
Mặc định, việc kiểm soát trường được thực hiện bởi JS tương ứng với bộ điều khiển, do đó cấu hình trường được thực hiện thông qua JS, và trong view `index.html` của chúng ta không có cấu hình trường nào. Thông thường chúng ta cấu hình như sau:
columns: [
[
{checkbox: true},
{field: 'id', title: __('Id')},
{field: 'admin_id', title: __('Admin_id')},
{field: 'category.name', title: __('Tên danh mục'), formatter:Table.api.formatter.search},
{field: 'category_id', title: __('Category_id'), visible: false},
{field: 'flag', title: __('Flag'), searchList: {"hot": __('Flag hot'), "index": __('Flag index'), "recommend": __('Flag recommend')}, operate: 'FIND_IN_SET', formatter: Table.api.formatter.label},
{field: 'genderdata', title: __('Genderdata'), searchList: {"male": __('Genderdata male'), "female": __('Genderdata female')}, formatter: Table.api.formatter.normal},
{field: 'title', title: __('Title')},
{field: 'image', title: __('Image'), formatter: Table.api.formatter.image},
{field: 'images', title: __('Images'), formatter: Table.api.formatter.images},
{field: 'createtime', title: __('Createtime'), operate: 'RANGE', addclass: 'datetimerange', formatter: Table.api.formatter.datetime},
{field: 'updatetime', title: __('Updatetime'), operate: 'RANGE', addclass: 'datetimerange', formatter: Table.api.formatter.datetime, visible: false},
{field: 'weigh', title: __('Weigh'), operate: false, visible: false},
{field: 'switch', title: __('Switch'), searchList: {"1": __('Yes'), "0": __('No')}, formatter: Table.api.formatter.toggle},
{field: 'status', title: __('Status'), searchList: {"normal": __('Normal'), "hidden": __('Hidden')}, formatter: Table.api.formatter.status},
]
]Các tham số cấu hình trường:
checkbox:true, //có phải là cột checkbox đầu tiên không
field:'name' //tên trường, nếu sử dụng truy vấn liên quan, bạn có thể sử dụng bí danh, ví dụ: category.name, lưu ý trường trả về từ máy chủ phải tương ứng, nếu sử dụng một trường không tồn tại, không có dữ liệu nào sẽ được hiển thị
title:'Tên' //tiêu đề trường, hiển thị ở đầu
operate:'=' //toán tử tìm kiếm chung, xem phần giới thiệu tìm kiếm chung ở trên
visible:false //trường có hiển thị không, false sẽ ẩn theo mặc định
formatter:Table.api.formatter.search //định dạng nội dung hiển thị, FastAdmin đã định nghĩa nhiều phương thức định dạng chung
events: //định nghĩa sự kiện phản hồi của phần tử
searchList: //định nghĩa dữ liệu danh sách thả xuống cho tìm kiếm chung
addclass: //thêm class bổ sung cho input hoặc select
type: //định nghĩa kiểu của input text
data: //thêm thuộc tính bổ sung cho input hoặc select
buttons: //cấu hình nhóm nútFastAdmin đã đóng gói nhiều phương thức formatter thường dùng, chúng ta có thể gọi nhanh:
Table.api.formatter.icon //hiển thị trường dưới dạng nút, chỉ hỗ trợ nút Fontawesome
Table.api.formatter.image //hiển thị trường dưới dạng hình ảnh
Table.api.formatter.images //hiển thị trường dưới dạng nhiều hình ảnh, dữ liệu trường cần được phân tách bằng dấu phẩy
Table.api.formatter.status //hiển thị trường dưới dạng trạng thái, mặc định normal/hidden/deleted/locked
Table.api.formatter.url //hiển thị trường dưới dạng hộp URL
Table.api.formatter.search //hiển thị trường dưới dạng liên kết có thể tìm kiếm, nhấp vào sẽ thực hiện tìm kiếm
Table.api.formatter.addtabs //hiển thị trường dưới dạng liên kết có thể thêm vào tab, nhấp vào sẽ thêm liên kết vào tab
Table.api.formatter.flag //hiển thị trường dưới dạng cờ, chỉ hỗ trợ index/hot/recommend/new
Table.api.formatter.label //hiển thị trường dưới dạng nhãn
Table.api.formatter.datetime //định dạng dữ liệu timestamp thành dữ liệu ngày giờ
Table.api.formatter.operate //nút cố định trong cột hoạt động
Table.api.formatter.buttons //tạo nhiều nút nhanh
Table.api.formatter.toggle //tạo nút chuyển đổi nhanh9. Checkbox
Nếu chúng ta không cần checkbox, hãy xóa `{checkbox: true}`.
10. Tên danh mục (tìm kiếm liên quan để lấy tên từ bảng danh mục)
Tên danh mục hiển thị ở đây là kết quả truy vấn liên quan từ bảng danh mục. Nếu chúng ta sử dụng truy vấn liên quan, chúng ta phải đặt thuộc tính trong bộ điều khiển hiện tại:
protected $relationSearch = true;Cùng với đó, phương thức `index` của chúng ta cũng cần được ghi đè. Vui lòng tham khảo phần mã PHP trong mã hoàn chỉnh bên dưới. Nếu chúng ta sử dụng truy vấn liên quan, khi có xung đột trường giữa hai bảng, chúng ta phải thêm bí danh vào trường. Vui lòng tham khảo phần JS trong mã hoàn chỉnh bên dưới.
11. Cờ
Chúng ta có thể sử dụng:
formatter:Table.api.formatter.flagđể hiển thị trường cờ, mặc định sẽ hiển thị các màu sau cho giá trị trong cơ sở dữ liệu:
{index: 'success', hot: 'warning', recommend: 'danger', 'new': 'info'}Nếu chúng ta cần mở rộng màu bổ sung, chúng ta có thể sử dụng:
custom:{aaa: 'info', bbb:'danger'}Bằng cách này, khi giá trị là `aaa` sẽ hiển thị màu xanh, `bbb` sẽ hiển thị màu đỏ.
12. Hình ảnh và nhóm hình ảnh
Chúng ta có thể sử dụng:
formatter:Table.api.formatter.image
formatter:Table.api.formatter.imagescách trên để hiển thị hình ảnh hoặc nhóm hình ảnh. Lưu ý rằng nếu là nhóm hình ảnh, giá trị dữ liệu nên được phân tách bằng dấu phẩy.
13. Công tắc
Chúng ta có thể sử dụng:
formatter:Table.api.formatter.toggleđể tạo thành phần công tắc. Mặc định, nó sử dụng 1 và 0 trong cơ sở dữ liệu để biểu thị bật và tắt. Chúng ta có thể định nghĩa bật và tắt bằng cách cấu hình bổ sung, ví dụ:
yes: 'open', no: 'close'Thì lúc này sẽ hiển thị công tắc dựa trên giá trị `open` hoặc `close` trong cơ sở dữ liệu. Mặc định, khi nhấp vào công tắc, nó chỉ cho phép sửa đổi trường `status` trong cơ sở dữ liệu. Nếu công tắc không phải là trường `status`, chúng ta cần định nghĩa trong bộ điều khiển tương ứng của máy chủ:
protected $multiFields="id,name,swith";Nhiều trường được phân tách bằng dấu phẩy.
14. Trạng thái hiển thị
Chúng ta có thể sử dụng:
formatter:Table.api.formatter.statusđể hiển thị trạng thái. Mặc định, nó sẽ hiển thị màu dựa trên các giá trị sau:
{normal: 'success', hidden: 'gray', deleted: 'danger', locked: 'info'}Nếu trạng thái của chúng ta có giá trị bổ sung, chúng ta có thể sử dụng custom để mở rộng màu hiển thị, như sau:
custom: {rejected:'danger', agreed:'success'}Text hiển thị của trạng thái được hiển thị dựa trên giá trị được cấu hình bởi `searchList`.
15. Nút tùy chỉnh
Chức năng nhóm nút được tạo bởi `Table.api.formatter.buttons` trong mục 8, mã như sau:
{
field: 'buttons',
width: "120px",
title: __('Nhóm nút'),
table: table,
events: Table.api.events.operate,
buttons: [
{
name: 'detail',
text: __('Mở trong cửa sổ bật lên'),
title: __('Mở trong cửa sổ bật lên'),
classname: 'btn btn-xs btn-primary btn-dialog',
icon: 'fa fa-list',
url: 'example/bootstraptable/detail',
callback: function (data) {
Layer.alert("Nhận dữ liệu trả về: " + JSON.stringify(data), {title: "Dữ liệu trả về"});
},
visible: function (row) {
//Trả về true để hiển thị nút, trả về false để ẩn
return true;
}
},
{
name: 'ajax',
text: __('Gửi Ajax'),
title: __('Gửi Ajax'),
classname: 'btn btn-xs btn-success btn-magic btn-ajax',
icon: 'fa fa-magic',
url: 'example/bootstraptable/detail',
confirm: 'Xác nhận gửi',
success: function (data, ret) {
Layer.alert(ret.msg + ", Dữ liệu trả về: " + JSON.stringify(data));
//Nếu cần ngăn thông báo thành công, phải sử dụng return false;
//return false;
},
error: function (data, ret) {
console.log(data, ret);
Layer.alert(ret.msg);
return false;
}
},
{
name: 'addtabs',
text: __('Mở trong tab mới'),
title: __('Mở trong tab mới'),
classname: 'btn btn-xs btn-warning btn-addtabs',
icon: 'fa fa-folder-o',
url: 'example/bootstraptable/detail'
}
],
formatter: Table.api.formatter.buttons
}Các tham số được hỗ trợ bởi cấu hình nút:
name định danh duy nhất của nút, trong đó add/edit/del/dragsort đã được sử dụng, nếu sử dụng sẽ ghi đè cấu hình nút tương ứng. Nếu cần hiển thị nút, chúng ta có thể thêm data-buttons-định danh vào table trong tệp view HTML để kiểm soát hiển thị theo quyền
text nội dung văn bản của nút, nếu không cần hiển thị văn bản có thể bỏ qua, hỗ trợ function và string
title tiêu đề khi di chuột hoặc tiêu đề cửa sổ bật lên/tab, hỗ trợ function và string
icon biểu tượng của nút, vui lòng sử dụng thư viện biểu tượng font-awesome, ví dụ fa fa-home
classname class của nút, trong đó btn-dialog、btn-ajax、btn-addtabs、btn-click, FastAdmin đã đăng ký sự kiện cho các class cố định này, vì vậy có thể sử dụng trực tiếp, nếu muốn thực hiện chức năng khác, cần tự viết mã để liên kết sự kiện
url liên kết/Ajax event request URL/cửa sổ bật lên/tab link, hỗ trợ function và string, liên kết này sẽ tự động thêm ids/{ids},{ids} là ID khóa chính của hàng hiện tại, nếu cần truyền giá trị trường khác, vui lòng sử dụng {tên trường} placeholder trong URL
refresh tự động làm mới, chỉ dành cho sự kiện btn-ajax
confirm văn bản提示 của hộp xác nhận, sau khi cấu hình, sẽ thực hiện thao tác tương ứng sau khi xác nhận, chỉ dành cho btn-ajax/btn-dialog/btn-addtabs
success callback khi sự kiện thành công, chỉ dành cho btn-ajax
error callback khi sự kiện thất bại, chỉ dành cho btn-ajax
callback callback khi cửa sổ bật lên trả về dữ liệu, chỉ dành cho btn-dialog, cần sử dụng Fast.api.close(data) trong trang mở tương ứng để trả về dữ liệu
hidden có ẩn nút không, nút hiển thị theo mặc định, hỗ trợ function và bool
visible có hiển thị nút không, nút hiển thị theo mặc định, hỗ trợ function và bool
disable có vô hiệu hóa nút không, nút không bị vô hiệu hóa theo mặc định, hỗ trợ function và bool
click callback sự kiện khi classname chứa btn-click
extend thông tin mở rộng của nút, có thể tùy chỉnh tham số nút, ví dụ chúng ta muốn mở liên kết trong cửa sổ mới, cấu hình extend:' target="_blank"' là được
dropdown tên nhóm danh sách thả xuống, khi nhiều nút cần hiển thị ở cấp một, giá trị này là văn bản hiển thị16. Hoạt động
Khu vực hoạt động mặc định là `sắp xếp, sửa, xóa` ba nút này. Chức năng này cũng được thực hiện bởi `Table.api.formatter.operate` trong mục 8. Nút sắp xếp chỉ xuất hiện khi có trường `weigh` trong bảng. Nút sửa và nút xóa sẽ được hiển thị theo yêu cầu dựa trên quyền của quản trị viên. Nếu chúng ta cần ghi đè các thuộc tính liên quan của nút sửa (sắp xếp, xóa), chúng ta có thể sử dụng `buttons` để định nghĩa các thuộc tính liên quan của sửa (sắp xếp, xóa). Thêm vào đó, `Table.api.formatter.operate` cũng hỗ trợ thuộc tính `buttons` để cấu hình nhiều nút khác, như nút `chi tiết` trong ví dụ, tham số cấu hình vui lòng tham khảo mục 15. Nút tùy chỉnh. Vui lòng tham khảo phần JS trong mã hoàn chỉnh bên dưới. Nếu muốn vô hiệu hóa nút `sửa, xóa`, có thể sửa đổi thuộc tính của bảng trong view thành rỗng:
<table id="table" class="table table-striped table-bordered table-hover table-nowrap"
data-operate-edit=""
data-operate-del=""
width="100%">
</table>17. Thông tin phân trang
Văn bản hiển thị của thông tin phân trang có thể được định nghĩa trước khi khởi tạo bảng:
$.fn.bootstrapTable.locales[Table.defaults.locale]['formatSearch'] = function (pageFrom, pageTo, totalRows) {
return 'Hiển thị từ ' + pageFrom + ' đến ' + pageTo + ' bản ghi, tổng cộng ' + totalRows + ' bản ghi';
};Kích thước trang hoặc tùy chọn kích thước trang có thể được cấu hình khi khởi tạo bảng bằng cách truyền các tham số sau:
pageSize: 10,
pageList: [10, 25, 50, 'All'],18. Thông tin lật trang
Thông tin lật trang sẽ được hiển thị tự động dựa trên số hàng được trả về từ máy chủ. Nếu số hàng được trả về không đáp ứng điều kiện phân trang, mục này sẽ không được hiển thị.
Mã hoàn chỉnh
Mã PHP
<?php
namespace app\admin\controller;
use app\common\controller\Backend;
/**
* Quản lý thử nghiệm
*
* @icon fa fa-circle-o
* @remark Danh sách này được tạo bằng php think crud -t test để thực hiện các chức năng xem, thêm, sửa, xóa, sửa hàng loạt, chỉ cần đảm bảo các trường tên, ghi chú phù hợp với yêu cầu của FastAdmin khi thiết kế bảng, có thể tạo các thành phần biểu mẫu liên quan
*/
class Test extends Backend
{
protected $model = null;
protected $relationSearch = true;
public function _initialize()
{
parent::_initialize();
$this->model = model('Test');
}
/**
* Xem
*/
public function index()
{
if ($this->request->isAjax())
{
list($where, $sort, $order, $offset, $limit) = $this->buildparams();
$total = $this->model
->with("category")
->where($where)
->order($sort, $order)
->count();
$list = $this->model
->with("category")
->where($where)
->order($sort, $order)
->limit($offset, $limit)
->select();
$result = array("total" => $total, "rows" => $list, "extend" => ['money' => 1024, 'price' => 888]);
return json($result);
}
return $this->view->fetch();
}
}Mã JS
define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {
var Controller = {
index: function () {
// Khởi tạo cấu hình tham số bảng
Table.api.init({
extend: {
index_url: 'test/index',
add_url: 'test/add',
edit_url: 'test/edit',
del_url: 'test/del',
multi_url: 'test/multi',
table: 'test',
}
});
var table = $("#table");
//Khi bảng dữ liệu được tải thành công
table.on('load-success.bs.table', function (e, data) {
//Ở đây chúng ta có thể lấy dữ liệu JSON từ máy chủ
console.log(data);
//Ở đây chúng ta đặt thủ công giá trị ở cuối
$("#money").text(data.extend.money);
$("#price").text(data.extend.price);
});
// Khởi tạo bảng
table.bootstrapTable({
url: $.fn.bootstrapTable.defaults.extend.index_url,
pk: 'id',
sortName: 'weigh',
columns: [
[
{checkbox: true},
{field: 'id', title: __('Id')},
{field: 'admin_id', title: __('Admin_id')},
{field: 'category.name', title: __('Tên danh mục'), formatter:Table.api.formatter.search},
{field: 'category_id', title: __('Category_id'), visible: false},
{field: 'flag', title: __('Flag'), searchList: {"hot": __('Flag hot'), "index": __('Flag index'), "recommend": __('Flag recommend')}, operate: 'FIND_IN_SET', formatter: Table.api.formatter.label},
{field: 'genderdata', title: __('Genderdata'), searchList: {"male": __('Genderdata male'), "female": __('Genderdata female')}, formatter: Table.api.formatter.normal},
{field: 'title', title: __('Title')},
{field: 'image', title: __('Image'), formatter: Table.api.formatter.image},
{field: 'images', title: __('Images'), formatter: Table.api.formatter.images},
{field: 'createtime', title: __('Createtime'), operate: 'RANGE', addclass: 'datetimerange', formatter: Table.api.formatter.datetime},
{field: 'updatetime', title: __('Updatetime'), operate: 'RANGE', addclass: 'datetimerange', formatter: Table.api.formatter.datetime, visible: false},
{field: 'weigh', title: __('Weigh'), operate: false, visible: false},
{field: 'switch', title: __('Switch'), searchList: {"1": __('Yes'), "0": __('No')}, formatter: Table.api.formatter.toggle},
{field: 'status', title: __('Status'), searchList: {"normal": __('Normal'), "hidden": __('Hidden')}, formatter: Table.api.formatter.status},
{
field: 'buttons',
width: "120px",
title: __('Nhóm nút'),
table: table,
events: Table.api.events.operate,
buttons: [
{
name: 'detail',
text: __('Mở trong cửa sổ bật lên'),
title: __('Mở trong cửa sổ bật lên'),
classname: 'btn btn-xs btn-primary btn-dialog',
icon: 'fa fa-list',
url: 'example/bootstraptable/detail',
callback: function (data) {
Layer.alert("Nhận dữ liệu trả về: " + JSON.stringify(data), {title: "Dữ liệu trả về"});
},
visible: function (row) {
return true;
}
},
{
name: 'ajax',
text: __('Gửi Ajax'),
title: __('Gửi Ajax'),
classname: 'btn btn-xs btn-success btn-magic btn-ajax',
icon: 'fa fa-magic',
url: 'example/bootstraptable/detail',
confirm: 'Xác nhận gửi',
success: function (data, ret) {
Layer.alert(ret.msg + ", Dữ liệu trả về: " + JSON.stringify(data));
return false;
},
error: function (data, ret) {
console.log(data, ret);
Layer.alert(ret.msg);
return false;
}
},
{
name: 'addtabs',
text: __('Mở trong tab mới'),
title: __('Mở trong tab mới'),
classname: 'btn btn-xs btn-warning btn-addtabs',
icon: 'fa fa-folder-o',
url: 'example/bootstraptable/detail'
}
],
formatter: Table.api.formatter.buttons
},
{
field: 'operate', title: __('Hoạt động'), table: table, events: Table.api.events.operate,
buttons: [
{
name: 'detail',
title: __('Chi tiết'),
classname: 'btn btn-xs btn-primary btn-dialog',
icon: 'fa fa-list',
url: 'test/detail',
callback: function (data) {
Layer.alert("Nhận dữ liệu trả về: " + JSON.stringify(data), {title: "Dữ liệu trả về"});
}
}],
formatter: Table.api.formatter.operate
}
]
]
});
// Liên kết sự kiện TAB
$('.panel-heading a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var field = $(this).closest("ul").data("field");
var value = $(this).data("value");
var options = table.bootstrapTable('getOptions');
options.pageNumber = 1;
options.queryParams = function (params) {
var filter = {};
if (value !== '') {
filter[field] = value;
}
params.filter = JSON.stringify(filter);
return params;
};
table.bootstrapTable('refresh', {});
return false;
});
// Liên kết sự kiện cho bảng
Table.api.bindevent(table);
},
add: function () {
Controller.api.bindevent();
},
edit: function () {
Controller.api.bindevent();
},
api: {
bindevent: function () {
Form.api.bindevent($("form[role=form]"));
}
}
};
return Controller;
});Mã HTML
<div class="panel panel-default panel-intro">
<div class="panel-heading">
{:build_heading(null,FALSE)}
<ul class="nav nav-tabs" data-field="status">
<li class="active"><a href="#t-all" data-value="" data-toggle="tab">{:__('All')}</a></li>
{foreach name="statusList" item="vo"}
<li><a href="#t-{$key}" data-value="{$key}" data-toggle="tab">{$vo}</a></li>
{/foreach}
</ul>
</div>
<div class="panel-body">
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="one">
<div class="widget-body no-padding">
<div id="toolbar" class="toolbar">
<a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}" ><i class="fa fa-refresh"></i> </a>
<a href="javascript:;" class="btn btn-success btn-add {:$auth->check('test/add')?'':'hide'}" title="{:__('Add')}" ><i class="fa fa-plus"></i> {:__('Add')}</a>
<a href="javascript:;" class="btn btn-success btn-edit btn-disabled disabled {:$auth->check('test/edit')?'':'hide'}" title="{:__('Edit')}" ><i class="fa fa-pencil"></i> {:__('Edit')}</a>
<a href="javascript:;" class="btn btn-danger btn-del btn-disabled disabled {:$auth->check('test/del')?'':'hide'}" title="{:__('Delete')}" ><i class="fa fa-trash"></i> {:__('Delete')}</a>
<a href="javascript:;" class="btn btn-danger btn-import {:$auth->check('test/import')?'':'hide'}" title="{:__('Import')}" id="btn-import-file" data-url="ajax/upload" data-mimetype="csv,xls,xlsx" data-multiple="false"><i class="fa fa-upload"></i> {:__('Import')}</a>
<div class="dropdown btn-group {:$auth->check('test/multi')?'':'hide'}">
<a class="btn btn-primary btn-more dropdown-toggle btn-disabled disabled" data-toggle="dropdown"><i class="fa fa-cog"></i> {:__('More')}</a>
<ul class="dropdown-menu text-left" role="menu">
<li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="status=normal"><i class="fa fa-eye"></i> {:__('Set to normal')}</a></li>
<li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="status=hidden"><i class="fa fa-eye-slash"></i> {:__('Set to hidden')}</a></li>
</ul>
</div>
<a class="btn btn-info btn-disabled disabled btn-selected" href="javascript:;"><i class="fa fa-leaf"></i> Lấy mục đã chọn</a>
<a class="btn btn-success btn-singlesearch" href="javascript:;"><i class="fa fa-user"></i> Tìm kiếm tùy chỉnh</a>
<a class="btn btn-success btn-change btn-start" data-params="action=start" data-url="example/bootstraptable/start" href="javascript:;"><i class="fa fa-play"></i> Bắt đầu</a>
<a class="btn btn-danger btn-change btn-pause" data-params="action=pause" data-url="example/bootstraptable/pause" href="javascript:;"><i class="fa fa-pause"></i> Tạm dừng</a>
<a href="javascript:;" class="btn btn-default" style="font-size:14px;color:dodgerblue;">
<i class="fa fa-dollar"></i>
<span class="extend">
Số tiền：<span id="money">0</span>
Đơn giá：<span id="price">0</span>
</span>
</a>
</div>
<table id="table" class="table table-striped table-bordered table-hover table-nowrap"
data-operate-edit="{:$auth->check('test/edit')}"
data-operate-del="{:$auth->check('test/del')}"
width="100%">
</table>
</div>
</div>
</div>
</div>
</div>