Отображение сетки данных и фильтрация для элемента с несколькими тегами или группами - PullRequest
0 голосов
/ 11 марта 2020

Итак, я делаю панель инструментов с Angular 9 и Clarity v2, где нужны разные датагриды. Теперь некоторые из этих Datagrids имеют данные, такие как комнаты собраний, в которые включены имя, здание и этаж, но это не проблема, я хочу добавить теги / группы, чтобы я мог знать, какая комната принадлежит каким группам. Поэтому я попытался проверить документацию, но ничего не увидел о возможности отобразить список / массив строк, и при этом я не нашел никакой информации о том, как фильтровать эти данные.

Так что это пример того, чего я хотел бы достичь (с фильтром флажка): Data table with tags

До сих пор мне удавалось сделать следующий Datagrid:

<clr-datagrid [(clrDgSingleSelected)]="selectedBuilding" [clrDgRowSelection]="true" *ngIf="!isLoading&&!hasError">
    <clr-dg-column [clrDgField]="'name'">
        <ng-container *clrDgHideableColumn="{hidden:false}">Name</ng-container>
    </clr-dg-column>
    <clr-dg-column [clrDgField]="'address'">
        <ng-container *clrDgHideableColumn="{hidden:false}">Address</ng-container>
    </clr-dg-column>
    <clr-dg-column [clrDgField]="'timezone'">
        <ng-container *clrDgHideableColumn="{hidden:false}">Timezone</ng-container>
    </clr-dg-column>
    <clr-dg-column [clrDgField]="'formatAMPM'">
        <ng-container *clrDgHideableColumn="{hidden:false}">Time format</ng-container>
    </clr-dg-column>
    <clr-dg-placeholder>There are no Buildings yet. Let's make one, shall we?
        <button class="btn btn-primary btn-sm btn-no-margin-r" (click)="onNewBuilding()">
            <clr-icon shape="user"></clr-icon> new building
        </button>
    </clr-dg-placeholder>
    <clr-dg-row *clrDgItems="let building of buildings" [clrDgItem]="building">
        <clr-dg-cell>{{building.name}}</clr-dg-cell>
        <clr-dg-cell>{{building.address}}</clr-dg-cell>
        <clr-dg-cell>{{building.timezone}}</clr-dg-cell>
        <clr-dg-cell>{{building.formatAMPM}}</clr-dg-cell>
    </clr-dg-row>
    <clr-dg-footer>
        <clr-dg-pagination #pagination [clrDgPageSize]="10">
            <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Rooms per page</clr-dg-page-size>
            {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} of {{pagination.totalItems}} categories
        </clr-dg-pagination>
    </clr-dg-footer>
</clr-datagrid>

I надеюсь, кто-нибудь сможет помочь мне с этим вопросом. Заранее спасибо.

РЕДАКТИРОВАТЬ 1:

У меня есть 2 вопроса: во-первых, как я могу отобразить список меток из массива в ячейке таблицы данных?

Второй вопрос, который у меня есть: возможно ли создать фильтр с флажками, которые будут отображать элементы, содержащие выбранную метку?

Я также сделал пример того, что я имею право сейчас же. Там вы можете видеть, что сетка данных отображает его с регулярным знаком "," между элементами. Он фильтрует его по тому, что я печатаю, но при вводе «2010,2017» или с пробелами все данные исчезают, поэтому я хотел бы вместо этого сделать это с флажками. Кроме того, поскольку пользователь может создавать, обновлять и удалять группы, а также применять их к зданиям, я хотел бы сделать так, чтобы я мог извлекать все группы пользователей и добавлять их в фильтр. Таким образом, фильтр является динамическим, и можно выбрать несколько тегов.

РЕДАКТИРОВАТЬ 2:

Также было бы неплохо, если бы можно было щелкнуть ярлык и активировать для него фильтр.

1 Ответ

0 голосов
/ 16 марта 2020

Ответ на ваш первый вопрос о создании списка меток заключается в использовании *ngFor для создания списка меток. Это стандартно для всего, что вы хотите l oop, и должно просто go внутри ячейки.

<span class="label" *ngFor="let group of groups">{{group}}</span>

Второй вопрос о пользовательском фильтре является более сложным, но задокументирован в https://clarity.design/documentation/datagrid/custom-filtering. Здесь также есть фрагмент из демонстрационного источника https://github.com/vmware/clarity/blob/master/src/website/src/app/documentation/demos/datagrid/utils/color-filter.ts.

...