Trang tài liệu Trí Nam

Hai thứ khó nhất trong ngành Khoa học máy tính là đặt tên và invalidate cache

DropdownControlSchema

Estimated reading: 7 minutes 548 views

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),
        ]);
      }
  })
				
			

Thuộc tính

CONTENTS