Trang tài liệu Trí Nam

Chín người đàn bà không thể đẻ ra một đứa trẻ trong vòng một tháng

Tuyển dụng
Updated on Tháng chín 27, 2022

Tùy biến cột – nút chức năng

Estimated reading: 3 minutes 518 views

Tùy chỉnh hiển thị thêm thông tin trong cột của bảng

				
					ngOnInit(){
    ...
    this.setting.cols = [
        new ColumnSchemaBase({
            field: 'idCanBoChuNhiem',
            label: this._translateService.instant('Chủ nhiệm đề tài'),
            displayField: 'hoVaTen',
            plusUrl: 'WithChucDanhChucVu', // **1  
            textAlign: TextAlign.Center,
            baseService: this._canBoHoSoService,
            width: '150px',
            funcGetLabel: (item) => {  // tùy chỉnh hiển thị thêm thông tin của cột(lấy thêm đơn vị chính)
                return this.getFullLabel(item);  
            },
        }),
    ]
    ...
}
private getFullLabel(item) {
    const ten = item.hoVaTen ?? `${item.ho || ''} ${item.ten || ''}`;
    let donViChucVuChinh;
    if (item.donViChucVus && item.donViChucVus.length > 0) {
        for (const donViChucVu of item.donViChucVus) {
            if (donViChucVu.isDonViChinh !== true) {
                continue;
            }
            donViChucVuChinh = donViChucVu;
            break;
        }
        if (donViChucVuChinh == null) {
            donViChucVuChinh = item.donViChucVus[0];
        }
    }
    const info = donViChucVuChinh ? donViChucVuChinh.donVi || '' : '';
    return `${ten} ${info && info !== '' ? '- ' + info : ''}`;
}


//**1: Mặc định khi get data Url sẽ là GetAllByFilter, trường hợp muốn custom lại 
// có thể sửa url trong plusUrl => url sẽ thành GetAllByFilter/WithChucDanhChucVu. 
// Tạo thêm 1 action trong Controller để nhận request này



Tùy chỉnh hiển thị giá trị cột cấu hình ở html

				
					ngOnInit(){
    ...
    this.setting.cols = [
        new ColumnSchemaBase({
            field: 'ten',
            label: this._translateService.instant('Tên nhiệm vụ'),
            dataType: 'customTenDeTai',  // custom control 
            width: '400px',
            showEditLink: true,
            order: 1
        }),
    ]
    ...
}

				
			
				
					
//// file HTML
// gọi stridCapDetai để từ id cấp đề tài(field idcapDetai) lấy luôn ra tên Cấp đề tài có id đó
 
    <div>
        <div class="p-md-12 lb-title">
            <div>{{rowData.ten}}</div>
            <div class="cs-flexbox">
                <div class="p-pr-1">Cấp nhiệm vụ: <strong>{{rowData.stridCapDeTai}}</strong></div>
                <div class="p-pr-1">Loại hình nghiên cứu: <strong>{{rowData.stridLoaiHinhNghienCuu}}</strong></div>
                <div class="p-pr-1">Lĩnh vực: <strong>{{rowData.stridLinhVucNghienCuu}}</strong></div>
            </div>
        </div>
    </div>



Tùy chỉnh chèn thêm các nút chức năng ở menuButtons trong grid

				
					
_menuButtons: DicMenuButtonBase = {
    EDIT_THUYET_MINH: {
        icon: 'pi pi-pencil',
        label: 'Xem chi tiết thuyết minh',
        command: this.openFormThuyetMinhDetail.bind(this)
    },
    IN_THUYET_MINH: { 
        icon: 'pi pi-print', 
        label: 'In thuyết minh', 
        command: this.inThuyetMinh.bind(this) 
    }
    ...
};
    
ngOnInit(){
    ...
}    
        
// lấy ds button với từng bản ghi        
async getMenuButtons(rowData) {
    this.rowDataCurrent = rowData;
    const buttons: TnMenuItem[] = [];

    this.inputSetting.menuButtons.forEach(menuButton =&gt; {
        if (menuButton === ConstantBtnDeTaiThuyetMinh.ADD_THUYET_MINH &amp;&amp; (rowData.idThuyetMinh || !rowData.trongDotDangKy)) {
            return;
        }
        buttons.push(this._menuButtons[menuButton]);
    });
    // mặc định thêm 2 nút này
    buttons.push(
        this._menuButtons.IN_THUYET_MINH,
        this._menuButtons.EDIT_THUYET_MINH
    );
    return buttons;
}

openFormThuyetMinhDetail(): void {
    ...
}
inThuyetMinh(): void {
    ...
}

//*** file html
Kết quả:


Cấu hình chèn thêm các nút ở cột chức năng:

				
					// khai báo thêm các button ở control #buttonBefore  
  

    <button class="link-or-action p-button-text p-button-rounded p-button-secondary" type="button" style="color: green"></button>

    <button class="link-or-action p-button-text p-button-rounded p-button-secondary" type="button"></button>

    <button class="link-or-action p-button-text p-button-rounded p-button-secondary" type="button" style="color: red"></button>
Kết quả:

Cấu hình chèn thêm nút chức năng ở sau nút Thêm mới

				
					// khai báo thêm các button ở ng-template #buttonAfterToolbar  
  

    <button type="button" class="p-button-text p-button-secondary"></button>
Kết quả:



Cấu hình ẩn các nút sửa xóa trong mỗi hàng của table view

				
					  
  ...
  ngOnInit(){
    ...
  }
  ...
  
  async beforeRenderDataSource(datasource: any): Promise {
        for (const item of datasource) {
            item.hiddenDelete = true;
            item.hiddenEdit = true;
        }
    }
CONTENTS