DropdownControlSchema
Hình ảnh / Demo
link demo(trong form thêm, sửa chỗ Địa điểm): Danh sách nghỉ phép - TRƯỜNG ĐẠI HỌC GIAO THÔNG VẬN TẢI (dttt.vn)
Mục đích
Dùng để tạo dropdownlist như 1 thẻ select trong HTML
Cách dùng
Import
Import vào đầu file .ts cần sử dụng
import { DropdownControlSchema } from 'tnx-shared';
Cách dùng cơ bản
DropdownControlSchema được thêm vào trong this.setting.schema khi khởi tạo form.
...
ngOnInit() {
...
this.setting.schema = [
new DropdownControlSchema({
label: '3. Lĩnh vực nghiên cứu',
field: 'idLinhVucNghienCuu',
required: true,
baseService: this._nghienCuu_LinhVucService,
}),
...
]
...
}
...
Khi muốn tùy chỉnh lấy nhiều giá trị
new DropdownControlSchema({
label: '3. Lĩnh vực nghiên cứu',
field: 'idLinhVucNghienCuu',
required: true,
baseService: this._nghienCuu_LinhVucService,
multiple: true
}),
Mặc định dropdown sẽ chỉ nhận 1 giá trị, khi cần nhận nhiều giá trị thì thêm thuộc tính multiple
Khi muốn đổi trường hiển thị khác
new DropdownControlSchema({
label: '3. Lĩnh vực nghiên cứu',
fullLabel: 'Lĩnh vực nghiên cứu',
field: 'idLinhVucNghienCuu',
required: true,
baseService: this._nghienCuu_LinhVucService,
displayField: 'code',
}),
Trong trường hợp không muốn hiển thị ‘ten’ nữa thì sửa lại displayField và chọn trường muốn hiển thị
Note) Mặc định khi khởi tạo giá trị valueField sẽ là: ‘id’ và displayField là ‘ten’ ứng với cột ‘id‘ và ‘ten‘ trong database, displayField và valueField tương ứng với cặp key-value khi đổ dữ liệu ra dropdown
Khi muốn lọc giá trị lúc lấy dữ liệu về
new DropdownControlSchema({
label: '3. Lĩnh vực nghiên cứu',
fullLabel: 'Lĩnh vực nghiên cứu',
field: 'idLinhVucNghienCuu',
required: true,
baseService: this._nghienCuu_LinhVucService,
defaultFilters: [
this.newFilter('conHieuLuc', Operator.equal, true)
]
}),
Dùng thuộc tính defaultFilters (nhận vào 1 mảng các filter)
note) defaultFilter khác với modifyFilter, defaultFilter chỉ chạy lần đầu khi khởi tạo
Khi muốn sắp xếp thứ tự hiển thị
Dùng thuộc tính sortField: ‘tên trường muốn sắp xếp’. Mặc định sẽ sort tăng dần, Khi muốn sort theo thứ tự giảm dần thì thêm thuộc tính sortDir: -1
new DropdownControlSchema({
label: '3. Lĩnh vực nghiên cứu',
fullLabel: 'Lĩnh vực nghiên cứu',
field: 'idLinhVucNghienCuu',
required: true,
baseService: this._nghienCuu_LinhVucService,
sortField: 'thuTu',
sortDir: -1,
}),
Khi muốn tự cấu hình nguồn dữ liệu thay vì gọi API
new DropdownControlSchema({
label: 'Kết quả nghiệm thu',
field: 'ketQua',
required: true,
dataSource: DataSourceKetQuaNghiemThu,
}),
...
// Định nghĩa trong file models/constants.ts
export const DataSourceKetQuaNghiemThu = [
{ id: EnumKetQuaNghiemThu.XUAT_SAC, ten: 'Xuất sắc' },
{ id: EnumKetQuaNghiemThu.TOT, ten: 'Tốt' },
{ id: EnumKetQuaNghiemThu.KHA, ten: 'Khá' },
{ id: EnumKetQuaNghiemThu.DAT, ten: 'Đạt' },
{ id: EnumKetQuaNghiemThu.KHONG_DAT, ten: 'Không đạt' }
];
// Định nghĩa trong file models/enum.ts
export enum EnumKetQuaNghiemThu {
XUAT_SAC = 1,
TOT = 5,
KHA = 10,
DAT = 15,
KHONG_DAT = 20
}
Trong đó dataSource là nguồn dữ liệu tự tùy chỉnh, ưu tiên nên khai báo dữ liệu theo dạng enum thay vì đổ trực tiếp vào
Khi cần cấu hình dropdown theo dạng Tree (optgroup => option...)
new DropdownControlSchema({
field: 'arrDonVi',
label: 'Đơn vị',
baseService: this._coCauToChucService,
sortField: 'thuTu',
sortDir: 1,
placeholder: 'Chọn đơn vị',
isTree: true, // quyết định dropdown này có hiển thị theo dạng Tree không
fieldTree: 'idCha', // id trường cấp cha
valueParentRoot: this.guidEmpty, // giá trị cấp cha cao nhất xếp lên đầu
selectDescendant: true, // chọn các option cấp con khi chọn option cấp cha
multiple: true,
required: true,
mdWidth: 12
}),
//Ví dụ:
--Thực phẩm:--- Bánh
| |
| |_ Bánh trung thu
| |_ Bánh gạo
| | |
| | |_ Bánh gạo nếp
| | |_ Bánh gạo tẻ
| |
| |_ Bánh gấu
|
Nước uống......etc
Lấy theo điều kiện từ một danh sách khác
// control parent
new DropdownControlSchema({
field: 'idTinh',
label: 'Tỉnh',
baseService: this._tbl_DM_TinhService,
valueField:'id',
displayField:'ten',
}),
// field sẽ chưa lấy dữ liệu cho đến khi parentField(chính là dropdown bên trên) được chọn
//điều này giúp giảm tải số lượng bản ghi không cần thiết khi lấy data về
new DropdownControlSchema({
field: 'idHuyen',
label: 'Huyện',
baseService: this._tbl_DM_HuyenService,
parentField: 'idTinh', // field cha của dropdown này
valueField:'id',
displayField:'ten',
bindingFilters: [
this.newBindingFilter('idTinh', Operator.equal, 'idTinh') //***1
],
}),
//***1: các tham truyền vào
// tham số đầu: tên cột muốn lọc dữ liệu
// tham số 2: toán tử so sánh
// ts thứ 3: giá trị của control có field là 'idTinh'
Lấy nguồn dữ liệu từ bảng dùng chung trong Database core
new DropdownControlSchema({
field: 'idCapKhenThuong',
label: 'Cấp',
required: true,
baseService: this._masterDataService,
groupCode: 'demo113', //*** 1
valueField: 'code',
displayField: 'name'
}),
//***1:
// Đầu tiên dữ liệu sẽ lấy Id của bản ghi có trường
// Code = 'demo113' trong bảng [CommonMasterData][GroupCategories]
// Sau đó sẽ query dữ liệu từ bảng [CommonMasterData][SingleCategories]
// với Id trên và đổ dữ liệu vào Dropdown
Sự kiện
new DropdownControlSchema({
field: 'myField',
label: 'Trường muốn dùng',
onChanged: (eventData: EventData) => {
console.log(eventData);
if (this.model.data.property || <>) {
evt.formControls['other control name'].hidden = true;
} else {
evt.formControls['other control name'].hidden = false;
}
},
modifyFilter: (filters: Filter[]) => {
filters.push(...[
this.newFilter('id', Operator.notIn, this.idsThanhVienNgoaiDaChon),
]);
}
})