Удалить кнопки из PrimeNG PickList в Angular - PullRequest
Новая
       51

Удалить кнопки из PrimeNG PickList в Angular

0 голосов
/ 01 апреля 2020

На следующем изображении я хотел бы иметь только кнопки выбора одного элемента и удалить кнопки выбора всех (отмечены черными пузырьками).

picklist screenshot

Я использую PrimeNG Picklist для создания списка.

Может ли кто-нибудь мне помочь?

Ответы [ 2 ]

1 голос
/ 26 апреля 2020

PrimeNg не имеют возможности удалять кнопки. Но мы можем сделать это с помощью listbox.

шаг 1: импорт ListboxModule в app.module.ts 

import {ListboxModule} from 'primeng/listbox';
...
imports: [
ListboxModule
...
],

шаг 2: app.component. html

<div class="container-fluid">
<div class="row">
    <div class="col-md-3">
        <p-listbox [options]="users" filter="filter" multiple="true" checkbox="true"
        [style]="{'width':'100%'}" [listStyle]="{'max-height': '200px'}" [metaKeySelection]="false"
        [(ngModel)]="selectedUserList"></p-listbox>
    </div>
    <div class="col-md-2">
        <div class="my-2 ml-3"><i class="pi pi-angle-double-right clickable"
            (click)="moveUserToGroupMember()"></i></div>
        <div class="my-2 ml-3"><i class="pi pi-angle-double-left clickable" 
            (click)="moveGroupToUser()"></i></div>
    </div>
    <div class="col-md-3">
        <p-listbox [options]="groupUserList" filter="filter" multiple="true" checkbox="true"
        [style]="{'width':'100%'}" [listStyle]="{'max-height': '200px'}" [metaKeySelection]="false"
        [(ngModel)]="selectedGroupUsersList"></p-listbox>
    </div>
</div>

Шаг 3: файл app.component.ts с ручным функционалом списка выбора 

export class AppComponent {
public users = [];
public groupUserList = [];
public selectedUserList:any;
public selectedGroupUsersList:any;
constructor AppComponent(){
this.users = [
    { label: 'Ganesh', value: '3' },
    { label: 'John', value: '1' },
    { label: 'Joshua', value: '2' },


  ];
  this.groupUserList = [
    { label: 'Vetri', value: '5' },
    { label: 'shiva', value: '6' },
  ];
};


  moveUserToGroupMember() {
    this.users.forEach((elem, index) => {
      this.selectedUserList.forEach((selUser, indexes) => {
        if (selUser === elem.value) {
          this.groupUserList.push(elem);
          setTimeout(() => {
            this.removeByAttr(this.users, 'value', selUser);
          }, 500);
        }
      });
    });
  }
  moveGroupToUser() {
    this.groupUserList.forEach((elem, index) => {
      this.selectedGroupUsersList.forEach((selUser, indexes) => {
        if (selUser === elem.value) {
          this.users.unshift(elem);
          setTimeout(() => {
            this.removeByAttr(this.groupUserList, 'value', selUser);
          }, 500);
        }
      });
    });
  }

  removeByAttr = (arr, attr, value) => {
    let i = arr.length;
    while (i--) {
      if (arr[i]
        && arr[i].hasOwnProperty(attr)
        && (this.users.length > 0 && arr[i][attr] === value)) {

        arr.splice(i, 1);

      }
    }
    return arr;
  }

}

Вы можете выбрать выбранных пользователей из selectedUserList: любой и selectedGroupUserList: любой. Теперь вы можете перемещать пользователей из одного списка в другой.

Для получения дополнительной информации:

helperscript.com

Демо-изображение

0 голосов
/ 01 апреля 2020

Глядя на источник p-picklist , вы можете установить свойство отображения CSS этих кнопок на none. Но чтобы действительно удалить их из реализации, не существует готового решения. Вы должны расширить его и удалить самостоятельно.

Попробуйте следующее CSS

button[icon="pi-angle-double-right"],
button[icon="pi-angle-double-left"] {
  display: none !important;
}
...