Блог

Я работаю над сеткой, где я использую для нее подкачку на стороне сервера. Я хочу переключать столбцы. Когда пользователь выберет столбец из выпадающего списка, он будет удален из сетки. Он работает, но изменяет поведение сетки, как показано на изображении. Плюс есть ли способ перенести это в общий компонент, чтобы повторно использовать его в других компонентах, потому что у меня много сетки, где я должен реализовать эту функциональность. Вот мой тестовый код.

Код стороны Ts

 toggle(event) {
      let col = event.target.value
      this.cols = this.cols.filter(c => {
        return c.name !== col;
      });
    }
 

Выпадающий код на стороне Html

   <select (change)="toggle($event)" [(ngModel)]="currentCol" class="col-md-2 mr-2 mt-2  form-control">
              <option value="">-Select Column-</option>
              <option value="{{col.prop}}" *ngFor="let col of cols">
                {{ col.name }}
              </option>
        </select>
 

Html-Код Сетки

 <ngx-datatable-column [sortable]="false" [canAutoResize]="false" [draggable]="false" [resizeable]="false"
              *ngIf="!ischildGroup amp;amp; !IsPast amp;amp; IsUpcoimg amp;amp; (_LmsUserSession.Roles.includes('Admin') || _LmsUserSession.Roles.includes('Instructor') || _LmsUserSession.Roles.includes('ClassCoordinator'))">
              <ng-template ngx-datatable-header-template let-value="value" let-allRowsSelected="allRowsSelected"
                let-selectFn="selectFn">
                <input type="checkbox" [checked]="rows.totalCount > 0 amp;amp; rows.totalCount == this.selectedClasses.length"
                  (change)="selectAllRows($event)" />
                <span> All</span>
              </ng-template>
              <ng-template ngx-datatable-cell-template let-value="value" let-isSelected="isSelected"
                let-onCheckboxChangeFn="onCheckboxChangeFn" let-row="row">
                <input type="checkbox" [checked]="IsRowReselect(row.Id)" id="{{row.Id}}"
                  (change)="selectSingleRows($event)" (click)="$event.stopPropagation()" />
              </ng-template>
            </ngx-datatable-column>

            <ngx-datatable-column [resizeable]="false" [sortable]="false" name="Actions">
              <ng-template let-row="row" ngx-datatable-cell-template>
                <span
                  *ngIf="!ischildGroup amp;amp; (_LmsUserSession.Roles.includes('Instructor') || _LmsUserSession.Roles.includes('Admin') || _LmsUserSession.Roles.includes('Student') || _LmsUserSession.Roles.includes('Client') || _LmsUserSession.Roles.includes('ClassCoordinator'))">
                  <a type="button" href="javascript:void(0)" title="View Enrollments"
                    (click)="$event.stopPropagation(navigateToEnrollments(row.Id))"><i class="fa fa-users"></i></a>
                  |
                </span>
                <span>
                  <span
                    *ngIf="!_LmsUserSession.Roles.includes('Client') 
                amp;amp; ClassCompleteStatus!=row.Status amp;amp;
               (!_LmsUserSession.Roles.includes('PaperworkInstructor') || _LmsUserSession.Roles.includes('Instructor') || _LmsUserSession.Roles.includes('Admin') || _LmsUserSession.Roles.includes('ClassCoordinator'))">

                    <a type="button" href="javascript:void(0)" title="Copy Enrollment Url"
                      (click)="$event.stopPropagation(copyInviteLink(row.CourseId,row.Id))"><i
                        class="fa fa-globe"></i></a>
                    |
                  </span>


                  <span
                    *ngIf="(_LmsUserSession.Roles.includes('Admin') || _LmsUserSession.Roles.includes('Instructor') || _LmsUserSession.Roles.includes('ClassCoordinator') || _LmsUserSession.Roles.includes('PaperworkInstructor')) amp;amp; ((row.Status < PaperWorkSubmittedStatus || row.Status==ClassRejected ))">

                    <a *ngIf="!isUserExpired" title="Edit" type="button" href="javascript:void(0)"
                      (click)="$event.stopPropagation(editHandler(row.Id))"><i
                        [ngClass]="ischildGroup ? 'fa fa-eye' : 'fa fa-pencil'"></i></a>
                    <a *ngIf="isUserExpired" title="View" type="button" href="javascript:void(0)"
                      (click)="$event.stopPropagation(editHandler(row.Id))"><i class="fa fa-eye"></i></a>

                  </span>

                  <span
                    *ngIf="(_LmsUserSession.Roles.includes('Admin') || _LmsUserSession.Roles.includes('Instructor') || _LmsUserSession.Roles.includes('PaperworkInstructor') || _LmsUserSession.Roles.includes('ClassCoordinator')) amp;amp; row.Status >= PaperWorkSubmittedStatus amp;amp; row.Status!=ClassRejected ">

                    <a title="View" type="button" href="javascript:void(0)"
                      (click)="$event.stopPropagation(editHandler(row.Id))"><i class="fa fa-eye"></i></a>

                  </span>

                  <span
                    *ngIf="!ischildGroup amp;amp; (_LmsUserSession.Roles.includes('Admin') || _LmsUserSession.Roles.includes('ClassCoordinator'))">
                    |
                    <a title="Delete" type="button" href="javascript:void(0)"
                      (click)="$event.stopPropagation(deleteHandler(row.Id, row.IsEnrollmentExist))"><i
                        class="fa fa-trash-o"></i></a>
                  </span>

                </span>
              </ng-template>
            </ngx-datatable-column>
            <ngx-datatable-column [resizeable]="false" name="Date/Time" prop="Date">
              <ng-template let-row="row" ngx-datatable-cell-template>
                <span *ngIf="row.DateAndTime">{{ row.DateAndTime.Date | date }}
                  <span *ngIf="row.DateAndTime.flexibleTime" class="badge badge-pill badge-primary">Flexible Class
                    Timings</span><br>
                  <span *ngIf="!row.DateAndTime.flexibleTime" class="badge badge-pill badge-primary">
                    {{ row.StartTime | date:'shortTime' }} - {{row.EndTime | date:'shortTime' }}
                  </span><br></span>
              </ng-template>
            </ngx-datatable-column>

            <ngx-datatable-column [resizeable]="false" name="Course" prop="Course">
              <ng-template let-row="row" ngx-datatable-cell-template>
                <div [title]="row.Course">
                  {{ (row.Course.length > 50) ? (row.Course | slice:0:50)   '...' : row.Course }}
                </div>
              </ng-template>
            </ngx-datatable-column>

            <ngx-datatable-column [resizeable]="false" name="Status" prop="StatusName">
              <ng-template let-row="row" ngx-datatable-cell-template>
                <div *ngIf="GridType ==PastGridType">
                  <span *ngIf="row.Status == 0"><span class='badge badge-info'> Awaiting paperwork</span></span>
                  <span *ngIf="row.Status != 0" [innerHTML]="row.StatusName"></span>
                </div>
                <span *ngIf="GridType!=PastGridType" [innerHTML]="row.StatusName"></span>
              </ng-template>
            </ngx-datatable-column>

            <ngx-datatable-column [resizeable]="false" name="Client" prop="Client">
              <ng-template let-row="row" ngx-datatable-cell-template>
                {{ row.Client }}
              </ng-template>
            </ngx-datatable-column>

            <ngx-datatable-column [resizeable]="false" name="Loc" prop="Location">
              <ng-template let-row="row" ngx-datatable-cell-template>
                {{ row.Location }}
              </ng-template>
            </ngx-datatable-column>

            <ngx-datatable-column [resizeable]="false" name="Instructor" prop="Instructor">
              <ng-template let-row="row" ngx-datatable-cell-template>
                {{ row.Instructor }}
              </ng-template>
            </ngx-datatable-column>

            <!-- <ngx-datatable-column [resizeable]="false" name="Certificate" prop="Certificate">
          <ng-template let-row="row" ngx-datatable-cell-template>
            {{ row.Certificate }}
          </ng-template>
        </ngx-datatable-column> -->

            <ngx-datatable-column [resizeable]="false" name="Enrolled" prop="Enrolled">
              <ng-template let-row="row" ngx-datatable-cell-template>
                {{ row.Enrolled }}
              </ng-template>
            </ngx-datatable-column>

            <ngx-datatable-column [resizeable]="false" name="Seat(s) Left" prop="RemainingSeat">
              <ng-template let-row="row" ngx-datatable-cell-template>
                {{ row.RemainingSeat < 0 ? 0: row.RemainingSeat }} </ng-template>
            </ngx-datatable-column>
          </ngx-datatable>
 

Вот изображение до и после столбца переключения из него.

После выбора столбца из выпадающего списка.

Это то, с чем я сталкиваюсь здесь.Он удаляет столбец клиента из сетки, но изменяет представление сетки.