как перенести записи из одной сетки в другую сетку в angular6 - PullRequest
Новая
       10

как перенести записи из одной сетки в другую сетку в angular6

0 голосов
/ 16 февраля 2019

У меня есть две сетки, одна из которых dataListGridData и alldataListGridData, в обеих сетках у меня есть данные, теперь одна сетка, которую я удаляю, а другая - мне нужно добавить кнопку, если нужно нажать кнопку «Удалить данные», чтобы использовать ее для сетки alldataListGridData, и если нажать наКнопка добавления выбранной записи должна быть нажата в сетке dataList.Пожалуйста, помогите мне в этой записи записей в сетку. 

export class SaveObjectComponent implements OnInit {
  public dataListGridData: GridDataResult;
  public alldataListGridData: GridDataResult;
  principleId: string;
  dataId: any;
  dataList: any[] = [];
  alldataList: any[] = [];
  sort: SortDescriptor[] = [{
    field: 'name',
    dir: 'asc'
  }];
  state: State = {
    skip: 0,
    take: 0,
    sort: [{
      field: 'name',
      dir: 'asc'
    }]
  };
  public stateAll: State = {
    skip: 0,
    take: 0,
  };

  constructor(private dataservice: DataService) {
    this.dataId = 'aabb2b4a-bfa6-4ca4-a911-8d89dca7a575';
  }


  ngOnInit() {
 
    this.refresh();
  }
  
  async refresh() {
    this.updatedSearchesList = [];
    const search = await this.worksheetService.getAvailableSearches(this.dataId, this.principleId);
    if (!search.hasError && search.result) {
      this.dataList = search.result;
      this.dataListGridData = {
        data: this.dataList.slice(this.state.skip, this.state.take),
        total: this.dataList.length
      };
    }
    if (this.dataList.length > 0) {
      this.dataList.forEach(element => {
        this.updatedSearchesList.push(element.resourceId);
      });
    }
    this.getAvailableSearch();
  }

  async getAvailableSearch() {
    console.log(this.principleId);
    const allSearch = await this.worksheetService.getAvailableSearches(this.worksheetId, this.principleId);
    console.log(allSearch);
    this.alldataList = allSearch.result;
    this.alldataListGridData = {
      data: this.alldataList.slice(this.stateAll.skip, this.stateAll.take),
      total: this.alldataList.length
    };
  }
  onRemoveRowClicked(object: any) {
    debugger;
    console.log(object);
    const objectIndex = this.dataList.indexOf(object.resourceId);
    console.log(objectIndex);
    if (objectIndex === -1) {
      object.isClicked = true;
      this.dataList.splice(objectIndex);
      console.log( this.dataList.splice(objectIndex));
    } else {
      object.isClicked = false;
      this.dataList.push(object);
    }
  }
  onAddRowClicked(rowAdd: any) {
    console.log(rowAdd);
    const objectIndex = this.a.indexOf(rowAdd);
    if (objectIndex === -1) {
      rowAdd.isClicked = true;
      this.alldataList.push(rowAdd);
      this.alldataListGridData = null;
      this.alldataListGridData = {
        data: rowAdd.splice(this.stateAll.skip, this.stateAll.take),
        total: rowAdd.length
      };
      console.log(this.alldataList);
    } else {
      rowAdd.isClicked = false;
      this.alldataList.splice(objectIndex, 1);
    }
  }
  public dataStateChange(state: DataStateChangeEvent): void {
    this.state = state;
    this.dataListGridData = process(this.dataList, this.state);
  }
  public dataStateChanges(state: DataStateChangeEvent): void {
    this.state = state;
    this.alldataListGridData = process(this.alldataList, this.stateAll);
  }
  public sortChange(sort: SortDescriptor[]): void {
    this.sort = sort;
  }
  public sortChanges(sort: SortDescriptor[]): void {
    this.sort = sort;
  }

  
}
<kendo-grid [data]="worksheetGridData" [filter]="state.filter" filterable="menu" [sortable]="true" [sort]="sort"
      (sortChange)="sortChange($event)" (dataStateChange)="dataStateChange($event)" 
       [resizable]="true" [scrollable]="'scrollable'" [height]="300">
      <kendo-grid-column field="name" title="Object Name" [width]="165">
      </kendo-grid-column>
      <kendo-grid-column field="categoryName" title="Category" [width]="150">
      </kendo-grid-column>
      <kendo-grid-command-column title="Remove" width="80">
        <ng-template kendoGridCellTemplate let-dataItem>
          <button mat-icon-button color="primary" (click)="onRemoveRowClicked(dataItem)" [ngClass]="{'selectedRemoveButton': dataItem.isClicked}">
            <mat-icon>remove_circle</mat-icon>
          </button>
        </ng-template>
      </kendo-grid-command-column>
    </kendo-grid>





<kendo-grid [data]="recentWorksheetGridData" [filter]="state.filter" filterable="menu" [sortable]="true" [sort]="sort"
      (sortChange)="sortChanges($event)" (dataStateChange)="dataStateChanges($event)"
       [resizable]="true" [scrollable]="'scrollable'" [height]="300" >
      <kendo-grid-column field="name" title="Object Name" [width]="165">
      </kendo-grid-column>
      <kendo-grid-column field="categoryName" title="Category" [width]="150">
 
      <kendo-grid-command-column title="Add" width="80">
        <ng-template kendoGridCellTemplate let-dataItem>
          <button mat-icon-button color="primary" (click)="onAddRowClicked(dataItem)" [ngClass]="{'selectedAddButton': dataItem.isClicked}">
            <mat-icon>add_circle</mat-icon>
          </button>
        </ng-template>
      </kendo-grid-command-column>
    </kendo-grid>

1 Ответ

0 голосов
/ 16 февраля 2019

Имейте в виду, что сами сетки - это просто компоненты пользовательского интерфейса, которые представляют данные, а не хранят данные.Таким образом, вы на самом деле не перемещаете строку из одной сетки в другую, вы перемещаете ее из структуры данных, поддерживающей один массив, в структуру данных, поддерживающую другую сетку, и тогда обе сетки повторно визуализируют измененные данные.

Итак, вам нужно написать код, который перемещает данные между вашими структурами «worksheetGridData» и «latestWorksheetGridData».

...