使用可折叠表行创建材质角表

时间:2017-10-18 10:54:17

标签: angular angular-material

我正在使用Angular 4和材料开发应用程序。我试图使用材料表,现在我想让它的行可折叠。 任何人都可以帮我吗?

html:

<section class="container-fluid no-padding">
    <div class="row panel">

        <div class="row">
            <div class="right-section col-md-4">
                <span id="volunteer">
                    داوطلب
                </span>

                <span id="dot">
                    .
                </span>

                <span id="volunteers-population" class="PersianNumber">
                    2341 نفر
                </span>

                <span class="sorting-title">
                    مرتب سازی براساس:
                </span>

                <div id="select-option">
                    <!-- <select id="select-sorting">
                        <option value="volvo">تاریخ ثبت نام</option>
                        <option value="saab">تاریخ ثبت نام</option>
                        <option value="mercedes">تاریخ ثبت نام</option>
                        <option value="audi">تاریخ ثبت نام</option>
                    </select> -->
                    <mat-form-field>
                        <mat-select dir="rtl" [(ngModel)]="selectedValue">
                            <mat-option *ngFor="let food of foods" [value]="food.value">
                                {{ food.viewValue }}
                            </mat-option>
                        </mat-select>
                    </mat-form-field>
                </div>
            </div>
            <div class="left-section col-md-3 col-md-offset-3">
                <button mat-button class="icon-button" (click)="log(1111)">
                    <i class="material-icons base-icon ">search</i>
                </button>
                <button mat-button class="filter-button">
                    <span>
                        فیلتر کردن
                    </span>
                    <i class="material-icons">filter_list</i>
                </button>
                <button mat-button class="add-button">
                    <span class="add-text">
                        اضافه کردن
                    </span>
                    <img src="../../assets/icon/folder.png" alt="" class="add-icon">
                    <!-- <i class="material-icons  add-icon">create_new_folder</i> -->
                </button>
                <button mat-button class="icon-button">
                    <i class="material-icons base-icon">more_vert</i>
                </button>
            </div>
        </div>

        <div class="row">
            <div class="table-container" id="data-table">
                <mat-table dir="rtl" #table [dataSource]="dataSource">

                    <!-- Position Column -->
                    <ng-container matColumnDef="position">
                        <mat-header-cell *matHeaderCellDef class="position-header-class"> ردیف </mat-header-cell>
                        <mat-cell *matCellDef="let element" class="position-class PersianNumber">
                            <i class="material-icons position-arrow">keyboard_arrow_down</i>
                            <span class="position-number">
                                {{element.position}}
                            </span>
                        </mat-cell>
                    </ng-container>


                    <ng-container matColumnDef="reset">
                        <mat-header-cell *matHeaderCellDef class="reset-class">
                            <mat-checkbox [(ngModel)]="checked"></mat-checkbox>
                        </mat-header-cell>
                        <mat-cell *matCellDef="let element" class="reset-class">
                            <mat-checkbox [(ngModel)]="checked"></mat-checkbox>
                        </mat-cell>
                    </ng-container>

                    <ng-container matColumnDef="avatar">
                        <mat-header-cell *matHeaderCellDef class="avatar"> </mat-header-cell>
                        <mat-cell *matCellDef="let element" class="avatar">
                            <img class="table-profile-picture" src="{{element.avatar}}" alt=""> </mat-cell>
                    </ng-container>


                    <!-- Name Column -->
                    <ng-container matColumnDef="name">
                        <mat-header-cell *matHeaderCellDef class="avatar"> نام </mat-header-cell>
                        <mat-cell *matCellDef="let element" class="avatar"> {{element.name}} </mat-cell>
                    </ng-container>



                    <!-- Weight Column -->
                    <ng-container matColumnDef="last_name">
                        <mat-header-cell *matHeaderCellDef class="avatar"> نام خانوادگی </mat-header-cell>
                        <mat-cell *matCellDef="let element" class="avatar"> {{element.last_name}} </mat-cell>
                    </ng-container>

                    <!-- Color Column -->
                    <ng-container matColumnDef="father_name">
                        <mat-header-cell *matHeaderCellDef class="avatar"> نام پدر </mat-header-cell>
                        <mat-cell *matCellDef="let element" class="avatar"> {{element.father_name}} </mat-cell>
                    </ng-container>

                    <ng-container matColumnDef="gender">
                        <mat-header-cell *matHeaderCellDef class="avatar"> جنسیت </mat-header-cell>
                        <mat-cell *matCellDef="let element" class="avatar"> {{element.gender}} </mat-cell>
                    </ng-container>

                    <ng-container matColumnDef="ragistration_date">
                        <mat-header-cell *matHeaderCellDef class="reg-date"> تاریخ ثبت نام </mat-header-cell>
                        <mat-cell *matCellDef="let element" class="reg-date PersianNumber"> {{element.registration_date}} </mat-cell>
                    </ng-container>

                    <ng-container matColumnDef="plan">
                        <mat-header-cell *matHeaderCellDef> طرح </mat-header-cell>
                        <mat-cell *matCellDef="let element">
                            <mat-chip-list>
                                <mat-chip *ngIf="element.plan[0]">{{element.plan[0]}}</mat-chip>
                                <mat-chip *ngIf="element.plan[1]"> {{element.plan[1]}}</mat-chip>
                                <!-- <mat-chip *ngIf="checkPlanLength(element.plan)">
                                    <i class="material-icons">more_horiz</i>
                                </mat-chip> -->
                            </mat-chip-list>
                        </mat-cell>
                    </ng-container>

                    <ng-container matColumnDef="status">
                        <mat-header-cell *matHeaderCellDef class="plan"> وضعیت </mat-header-cell>
                        <mat-cell *matCellDef="let element" class="plan" style="color: #4caf50">
                            {{element.status}}
                            <div class="green-dot">
                            </div>
                            <button mat-button class="icon-button more-icon">
                                <i class="material-icons ">more_vert</i>
                            </button>
                        </mat-cell>
                    </ng-container>

                    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
                    <mat-row *matRowDef="let row; columns: displayedColumns; let index=index"></mat-row>
                </mat-table>
            </div>
        </div>

        <div class="row ">
            <div class="col-md-2 paginator">
                <button mat-button class="icon-button">
                    <i class="material-icons base-icon">keyboard_arrow_right</i>
                </button>
                <button mat-button class="icon-button" id="page-button">
                    <span id="page-num" class="PersianNumber">
                        صفحه 1
                    </span>
                    <i class="material-icons base-icon">keyboard_arrow_down</i>
                </button>
                <button mat-button class="icon-button">
                    <i class="material-icons base-icon">keyboard_arrow_left</i>
                </button>
            </div>
            <div class="col-md-2 col-md-offset-3 left-side-pagination ">
                <select name="" id="page-size" class="PersianNumber">
                    <option value="10" >10</option>
                </select>
                <span class="title ">
                    تعداد نمایش در هر صفحه:
                </span>

            </div>
        </div>
    </div>
</section>

TS代码:

import { Component } from '@angular/core';
import { DataSource } from '@angular/cdk/collections';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';

@Component({
    templateUrl: './volunteers.component.html',
    styleUrls: ['./volunteers.component.scss']
})

export class Volunteers {
    checked = true;

    foods = [
        { value: 'steak-0', viewValue: 'تاریخ ثبت نام' },
        { value: 'pizza-1', viewValue: 'جنسیت' },
        { value: 'tacos-2', viewValue: 'وضعیت' }
    ];

    selectedValue: string = this.foods[0].value;

    displayedColumns = ['position','reset','avatar', 'name', 'last_name', 'father_name', 'gender', 'ragistration_date', 'plan', 'status'];
    dataSource = new ExampleDataSource();


    checkPlanLength(inputArray): boolean{
        console.log(inputArray > 2)
        return inputArray.length > 2;
    }

    log(input) :void{
        console.log(input);
    }

}

export interface Element {
    position: number;
    avatar:string;
    name: string;
    last_name: string;
    father_name: string;
    gender: string;
    registration_date: string;
    plan: string[];
    status: string;
}

const data: Element[] = [
    { position: 1, avatar:'../../assets/img/profile_user.jpg' , name: 'شاکره', last_name: 'مبارک', father_name: 'جمشید', gender: 'دختر', registration_date: '95/5/13', plan: ['سوم'], status: 'تایید شده' },
    { position: 2, avatar:'../../assets/img/profile_user.jpg' , name: 'شاکره', last_name: 'مبارک', father_name: 'جمشید', gender: 'دختر', registration_date: '95/5/13', plan: [ 'اول', 'دوم'], status: 'تایید شده' },
    { position: 3, avatar:'../../assets/img/profile_user.jpg' , name: 'شاکره', last_name: 'مبارک', father_name: 'جمشید', gender: 'دختر', registration_date: '95/5/13', plan: ['سوم', 'اول', 'دوم'], status: 'تایید شده' },
    { position: 4, avatar:'../../assets/img/profile_user.jpg' , name: 'شاکره', last_name: 'مبارک', father_name: 'جمشید', gender: 'دختر', registration_date: '95/5/13', plan: [], status: 'تایید شده' },
    { position: 5, avatar:'../../assets/img/profile_user.jpg' , name: 'شاکره', last_name: 'مبارک', father_name: 'جمشید', gender: 'دختر', registration_date: '95/5/13', plan: ['سوم', 'اول', 'دوم'], status: 'تایید شده' },
    { position: 6, avatar:'../../assets/img/profile_user.jpg' , name: 'شاکره', last_name: 'مبارک', father_name: 'جمشید', gender: 'دختر', registration_date: '95/5/13', plan: ['سوم', 'اول', 'دوم','چهارم' ], status: 'تایید شده' },
    { position: 7, avatar:'../../assets/img/profile_user.jpg' , name: 'شاکره', last_name: 'مبارک', father_name: 'جمشید', gender: 'دختر', registration_date: '95/5/13', plan: ['سوم', 'اول', 'دوم'], status: 'تایید شده' },
    { position: 8, avatar:'../../assets/img/profile_user.jpg' , name: 'شاکره', last_name: 'مبارک', father_name: 'جمشید', gender: 'دختر', registration_date: '95/5/13', plan: ['سوم', 'اول', 'دوم'], status: 'تایید شده' },
    { position: 9, avatar:'../../assets/img/profile_user.jpg' , name: 'شاکره', last_name: 'مبارک', father_name: 'جمشید', gender: 'دختر', registration_date: '95/5/13', plan: ['سوم', 'اول', 'دوم'], status: 'تایید شده' },
    { position: 10, avatar:'../../assets/img/profile_user.jpg' , name: 'شاکره', last_name: 'مبارک', father_name: 'جمشید', gender: 'دختر', registration_date: '95/5/13', plan: ['سوم', 'اول', 'دوم'], status: 'تایید شده' }
];

/**
 * Data source to provide what data should be rendered in the table. The observable provided
 * in connect should emit exactly the data that should be rendered by the table. If the data is
 * altered, the observable should emit that new set of data on the stream. In our case here,
 * we return a stream that contains only one set of data that doesn't change.
 */
export class ExampleDataSource extends DataSource<any> {
    /** Connect function called by the table to retrieve one stream containing the data to render. */
    connect(): Observable<Element[]> {
        return Observable.of(data);
    }

    disconnect() { }
}

如您所知,我们不能使用材料扩展面板在这里,那么什么是解决方案? 是否有为此准备的任何其他组件或模块,或者您必须由您自己实现它?

1 个答案:

答案 0 :(得分:-2)

mat-table现在具有使用when谓词

的可折叠行

编辑:删除了示例,因为人们显然希望1岁的例子仍可用于不断发展的平台。