EntityPickerControlSchema

Estimated reading: 4 minutes 273 views

Hình ảnh / Demo

Link demo: https://dhgt-canbo.dttt.vn/admin/authorization/rule

Mục đích

Tạo một danh sách dữ liệu trong form.

Dữ liệu được chọn và hiển thị trong control sẽ được thể hiện được nhiều thông tin hơn đến người dùng qua các trường được cấu hình.

Cách dùng

Import

Import vào đầu file .ts cần sử dụng

				
					import { EntityPickerControlSchema } from 'tnx-shared';

Cách dùng cơ bản

TextControlSchema được thêm vào trong this.setting.schema khi khởi tạo form.

				
					...
ngOnInit() {
...
    this.setting.schema = [
        new EntityPickerControlSchema({
            field: 'myField',
            label: 'Trường muốn dùng',
            title: 'Text của nút chọn',
            baseService: ,
            columns: [
                new EntityPickerColumn({
                    code: 'field1',
                    label: 'Trường thứ 1 của danh sách',
                    operator: Operator.contain
                }),
                new EntityPickerColumn({
                    code: 'field2',
                    label: 'Trường thứ 2 của danh sách',
                    operator: Operator.contain
                })
            ]
        }),
        ...
    ]
    ...
}
...

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

Thuộc tính

Sự kiện

				
					...
ngOnInit() {
...
    this.setting.schema = [
        new EntityPickerControlSchema({
            field: 'myField',
            label: 'Trường muốn dùng',
            title: 'Text của nút chọn',
            baseService: ,
            columns: [
                new EntityPickerColumn({
                    code: 'field1',
                    label: 'Trường thứ 1 của danh sách',
                    operator: Operator.contain
                }),
                new EntityPickerColumn({
                    code: 'field2',
                    label: 'Trường thứ 2 của danh sách',
                    operator: Operator.contain
                })
            ],
            onSearchFormInitialized: (evt: EventData) =&gt; {
                // Event fire khi tìm kiếm
                // Do something
            },
            onFormEvent: (evt: EventData) =&gt; {
                // Event fire khi thao tác với control
                // Do something
            },
            onSelectEntity: (evt: EventData) =&gt; {
                // Event fire khi chọn 1 bản ghi trong danh sách
                // Do something
            },
            onChanged: (evt: EventData) =&gt; {
                // Event fire khi thay đổi dữ liệu của danh sách
                console.log(eventData);
                if (this.model.data.property) {
                    evt.formControls['other control name'].hidden = true;
                } else {
                evt.formControls['other control name'].hidden = false;
                }
            },
            onInit: (evt: EventData) =&gt; {
                // Event fire khi khởi tạo dữ liệu của danh sách
                // Do something
            },
            ...
        }),
        ...
    ]
    ...
}
...

Trang tài liệu Trí Nam