Web Components 트리 그리드 검색 필터

    트리 그리드의 Ignite UI for Web Components 검색 필터 기능을 사용하면 데이터 컬렉션에서 값을 찾는 프로세스를 수행할 Web Components 있습니다. 이 기능을 더 쉽게 설정할 수 있으며 검색 입력 상자, 버튼, 키보드 탐색 및 기타 유용한 기능으로 구현하여 더 나은 사용자 경험을 제공할 수 있습니다. 브라우저는 기본적으로 콘텐츠 검색 기능을 제공하지만 대부분의 경우 IgcTreeGridComponent 보이지 않는 열과 행을 가상화합니다. 이러한 경우 기본 브라우저 검색은 DOM의 일부가 아니기 때문에 가상화된 셀의 데이터를 검색할 수 없습니다. Web Components Material 테이블 기반 그리드를 확장했습니다. 검색 API 이를 통해 검색할 수 있습니다. 가상화된 콘텐츠의 IgcTreeGridComponent.

    Web Components Search Example

    다음 예제에서는 모든 열과 행에서 검색할 수 있는 검색 입력 상자와 각 열에 대한 특정 필터링 옵션을 나타냅니다 IgcTreeGridComponent.

    Web Components Search Usage

    Tree Grid Setup

    그리드를 생성하고 이를 데이터에 바인딩하는 것부터 시작해 보겠습니다. 또한 우리가 사용할 구성 요소에 대한 몇 가지 사용자 정의 스타일을 추가할 것입니다!

    <igc-tree-grid id="treeGrid" auto-generate="false" primary-key="ID" foreign-key="ParentID" allow-filtering="true" height="100%" width="100%">
    <igc-column field="Name" data-type="string" sortable="true"></igc-column>        
    <igc-column field="ID" data-type="number" sortable="true"></igc-column>        
    <igc-column field="Title" data-type="string" sortable="true"></igc-column>        
    <igc-column field="Age" data-type="number" sortable="true"></igc-column>        
    <igc-column field="HireDate" data-type="date" sortable="true"></igc-column>        
</igc-tree-grid>

    private treeGrid: IgcTreeGridComponent;

constructor() {
    this.treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
    this.treeGrid.data = new EmployeesFlatData();
}

    좋아, 이제 우리의 IgcTreeGridComponent 검색 API를 준비합시다! 현재 검색된 텍스트를 저장하고 검색이 대소문자를 구분하는지 및/또는 정확히 일치하는지 여부를 묻는 데 사용할 수 있는 몇 가지 속성을 만들 수 있습니다.

    private treeGrid: IgcTreeGridComponent;    

private searchBox: IgcInputComponent;

private icon: IgcIconComponent;
private nextIconButton: IgcIconButtonComponent;
private prevIconButton: IgcIconButtonComponent;

private caseSensitiveChip: IgcChipComponent;
private exactMatchChip: IgcChipComponent;

    Web Components Search Box Input

    이제 검색 입력을 만들어 보겠습니다! 입력 요소를 가져옴으로써 현재 값을 얻을 수 있습니다. 이렇게하면와 findNext​ ​findPrev 메소드를 사용하여 IgcTreeGridComponent 모든 항목을 SearchText 강조 표시하고 다음 / 이전 항목으로 스크롤 할 수 있습니다 (호출 한 방법에 따라 다름).

    ​findNext 및 findPrev 메소드에는 모두 세 가지 인수가 있습니다.

    • Text: string (검색하려는 텍스트)
    • (선택 사항) CaseSensitive: 부울 (검색 시 대소문자를 구분해야 하는지 여부, 기본값은 false입니다.)
    • (선택 사항) ExactMatch: 부울 (정확한 일치로 검색해야 하는지 여부, 기본값은 false입니다.)

    정확한 일치로 검색할 때 검색 API는 대소문자 구분도 고려하여 SearchText와 완전히 일치하는 셀 값만 결과로 강조 표시합니다. 예를 들어 'software' 및 'Software' 문자열은 대소문자 구분을 무시하고 정확히 일치합니다.

    위의 메소드는 숫자 값 (주어진 문자열을 포함하는 횟수 IgcTreeGridComponent)을 반환합니다.

    <igc-input id="searchBox" name="searchBox">
</igc-input>

    constructor() {
    this.searchBox = document.getElementById('searchBox') as IgcInputComponent;
    this.caseSensitiveChip = document.getElementById('caseSensitiveChip') as IgcChipComponent;
    this.exactMatchChip = document.getElementById('exactMatchChip') as IgcChipComponent;
}

public nextSearch() {
    this.treeGrid.findNext(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected);
}

    Add Search Buttons

    검색 결과를 자유롭게 검색하고 탐색하기 위해 버튼의 각 클릭 이벤트 핸들러 내에서 findNext 및 findPrev 메소드를 호출하여 두 개의 버튼을 만들어 보겠습니다.

    <igc-icon-button id="prevIconBtn" variant="flat" name="prev" collection="material" ></igc-icon-button>
<igc-icon-button id="nextIconBtn" variant="flat" name="next" collection="material"></igc-icon-button>

    constructor() {
    this.nextIconButton = document.getElementById('nextIconBtn') as IgcIconButtonComponent;
    this.prevIconButton = document.getElementById('prevIconBtn') as IgcIconButtonComponent;
    this.nextIconButton.addEventListener("click", this.nextSearch);
    this.prevIconButton.addEventListener("click", this.prevSearch);
}

public prevSearch() {
    this.treeGrid.findPrev(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected);
}

public nextSearch() {
    this.treeGrid.findNext(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected);
}

    또한 사용자가 키보드의 화살표 키와 입력하다 열쇠. 이를 달성하기 위해 우리는 다음을 처리할 수 있습니다. 키다운 입력의 기본 캐럿 이동을 방지하여 검색 입력 이벤트 PreventDefault 메서드를 호출하고 findNext / findPrev 사용자가 어떤 키를 눌렀는지에 따라 방법이 달라집니다.

    <igc-input id="searchBox" name="searchBox">
</igc-input>

    constructor() {
    this.searchBox = document.getElementById('searchBox') as IgcInputComponent;

    this.searchBox.addEventListener("keydown", (evt) => { this.onSearchKeydown(evt); });
    this.searchBox.addEventListener("igcInput", (evt) => {
        this.treeGrid.findNext(evt.detail, this.caseSensitiveChip.selected, this.exactMatchChip.selected);
    });
}

public onSearchKeydown(evt: KeyboardEvent) {  
    if (evt.key === 'Enter' || evt.key === 'ArrowDown') {
        evt.preventDefault();
        this.treeGrid.findNext(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected);
    } else if (evt.key === 'ArrowUp') {
        evt.preventDefault();
        this.treeGrid.findPrev(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected);
    }
}

    Case Sensitive and Exact Match

    이제 사용자가 검색이 대소문자를 구분해야 하는지 및/또는 정확히 일치해야 하는지 선택할 수 있도록 허용해 보겠습니다. 이를 위해 simple selectable Chips을 사용하고 이벤트에 바인딩 igcSelect 하여 사용자가 상호 작용할 때를 확인할 수 있습니다.

    <igc-chip selectable="true" id="caseSensitiveChip">Case Sensitive</igc-chip>
<igc-chip selectable="true" id="exactMatchChip">Exact Match</igc-chip>

    constructor() {
    this.caseSensitiveChip = document.getElementById('caseSensitiveChip') as IgcChipComponent;
    this.exactMatchChip = document.getElementById('exactMatchChip') as IgcChipComponent;

    this.caseSensitiveChip.addEventListener("igcSelect", (evt) => {
        this.treeGrid.findNext(this.searchBox.value, evt.detail, this.exactMatchChip.selected);
    });
    this.exactMatchChip.addEventListener("igcSelect", (evt) => {
        this.treeGrid.findNext(this.searchBox.value, this.caseSensitiveChip.selected, evt.detail);
    });
}

    Persistence

    OR를 필터링하고 정렬 IgcTreeGridComponent 하거나 레코드를 추가 및 제거하려면 어떻게 해야 합니까? 이러한 작업이 끝나면 현재 검색의 하이라이트가 자동으로 업데이트되고 일치하는 SearchText 모든 텍스트 위에 유지됩니다! 또한 검색은 페이징과 함께 작동하며 속성 변경을 통해 강조 표시를 IgcTreeGridComponent​ ​PerPage 유지합니다.

    Adding icons

    다른 구성 요소 중 일부를 사용하면 풍부한 사용자 인터페이스를 만들고 전체 검색 창의 전반적인 디자인을 개선할 수 있습니다! 검색 입력 왼쪽에는 멋진 검색 또는 삭제 아이콘이 있고, 검색 옵션을 위한 몇 가지 칩이 있으며, 오른쪽에는 탐색을 위한 멋진 잔물결 스타일 버튼과 결합된 일부 머티리얼 디자인 아이콘이 있습니다. 보다 세련된 디자인을 위해 이러한 구성 요소를 입력 그룹 내에 래핑할 수 있습니다.

    import { defineComponents, IgcInputComponent, IgcChipComponent, IgcIconComponent, IgcIconButtonComponent, registerIconFromText } from "igniteui-webcomponents";

defineComponents(IgcInputComponent, IgcChipComponent, IgcIconComponent, IgcIconButtonComponent);

    마지막으로 템플릿을 새로운 구성요소로 업데이트해 보겠습니다.

    우리는 모든 구성 요소를 내부에 IgcInputComponent 감쌀 것입니다. 왼쪽에서는 검색과 삭제/지우기 아이콘 사이를 전환합니다(검색 입력이 비어 있는지 여부에 따라 다름). 중앙에 입력 자체를 배치합니다. 또한 삭제 아이콘을 클릭 할 때마다 업데이트 SearchText 하고 메소드를 IgcTreeGridComponent​ ​clearSearch 호출하여 하이라이트를 지웁니다.

    <igc-input id="searchBox" name="searchBox">
    <igc-icon id="icon" slot="prefix" name="search" collection="material"></igc-icon>
    <div slot="suffix">
        <igc-chip selectable="true" id="caseSensitiveChip">Case Sensitive</igc-chip>
        <igc-chip selectable="true" id="exactMatchChip">Exact Match</igc-chip>
    </div>
    <div slot="suffix">
        <igc-icon-button id="prevIconBtn" variant="flat" name="prev" collection="material" ></igc-icon-button>
        <igc-icon-button id="nextIconBtn" variant="flat" name="next" collection="material"></igc-icon-button>
    </div>
</igc-input>

    constructor() {
    const prevIconText = "<svg width='24' height='24' viewBox='0 0 24 24'><path d='M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z'></path></svg>";
    const nextIconText = "<svg width='24' height='24' viewBox='0 0 24 24'><path d='M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'></path></svg>";
    const searchIconText = "<svg width='24' height='24' viewBox='0 0 24 24'><path d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z' /></svg>";
    const clearIconText = "<svg width='24' height='24' viewBox='0 0 24 24' title='Clear'><path d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'></path></svg>";

    registerIconFromText('prev', prevIconText, 'material');
    registerIconFromText('next', nextIconText, 'material');
    registerIconFromText('search', searchIconText, 'material');
    registerIconFromText('clear', clearIconText, 'material');

    this.icon = document.getElementById('icon') as IgcIconComponent;
    this.searchBox = document.getElementById('searchBox') as IgcInputComponent;

    this.searchBox.addEventListener('igcInput', (evt) => {
        this.icon.name = evt.detail ? 'clear' : 'search';
    });
    this.icon.addEventListener('click', this.clearSearch);
}

public clearSearch() {
    this.searchBox.value = '';
    this.icon.name = 'search';
    this.treeGrid.clearSearch();
}

    입력 그룹 오른쪽에 다음 목적을 가진 세 개의 별도 컨테이너를 만들어 보겠습니다.

    • ​CaseSensitive 및 ExactMatch 속성을 전환하는 몇 가지 칩을 표시합니다. 우리는 체크박스를 이러한 속성에 따라 색상을 변경하는 두 개의 세련된 칩으로 대체했습니다. 칩을 클릭할 때마다 해당 핸들러를 호출합니다.
    <div slot="suffix">
    <igc-chip selectable="true" id="caseSensitiveChip">Case Sensitive</igc-chip>
    <igc-chip selectable="true" id="exactMatchChip">Exact Match</igc-chip>
</div>

    constructor() {
    this.caseSensitiveChip = document.getElementById('caseSensitiveChip') as IgcChipComponent;
    this.exactMatchChip = document.getElementById('exactMatchChip') as IgcChipComponent;

    this.caseSensitiveChip.addEventListener('igcSelect', (evt) => {
        this.treeGrid.findNext(this.searchBox.value, evt.detail, this.exactMatchChip.selected);
    });
    this.exactMatchChip.addEventListener('igcSelect', (evt) => {
        this.treeGrid.findNext(this.searchBox.value, this.caseSensitiveChip.selected, evt.detail);
    });
}
    • 검색 탐색 버튼의 경우 입력을 머티리얼 아이콘이 있는 잔물결 스타일 버튼으로 변환했습니다. 클릭 이벤트에 대한 핸들러는 동일하게 유지되며 findNext / findPrev 메소드를 호출합니다.
    <div slot="suffix">
    <igc-icon-button id="prevIconBtn" variant="flat" name="prev" collection="material" ></igc-icon-button>
    <igc-icon-button id="nextIconBtn" variant="flat" name="next" collection="material"></igc-icon-button>
</div>

    constructor() {
    const nextIconButton = this.nextIconButton = document.getElementById('nextIconBtn') as IgcIconButtonComponent;
    const prevIconButton = this.prevIconButton = document.getElementById('prevIconBtn') as IgcIconButtonComponent;
    nextIconButton.addEventListener("click", this.nextSearch);
    prevIconButton.addEventListener("click", this.prevSearch);
}

    public prevSearch() {
    this.treeGrid.findPrev(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected);
}

public nextSearch() {
    this.treeGrid.findNext(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected);
}

    Known Limitations

    한정 설명
    템플릿을 사용하여 셀에서 검색 검색 기능 강조 표시는 기본 셀 템플릿에서만 작동합니다. 사용자 정의 셀 템플릿이 포함된 열이 있는 경우 강조 표시가 작동하지 않으므로 열 포맷터와 같은 대체 접근 방식을 사용하거나searchable 열의 속성을 false로 설정합니다.
    원격 가상화 원격 가상화를 사용하면 검색이 제대로 작동하지 않습니다.
    텍스트가 잘린 셀 셀의 텍스트가 너무 커서 맞지 않고 찾고 있는 텍스트가 줄임표로 잘려도 셀로 스크롤하여 일치 횟수에 포함시키지만 아무것도 강조 표시되지 않습니다.

    API References

    이 기사에서는 검색 결과 사이를 이동할 때 몇 가지 추가 기능과 함께 자체 검색 창을 IgcTreeGridComponent 구현했습니다. 또한 아이콘, 칩 및 입력과 같은 추가 Ignite UI for Web Components 구성 요소를 사용했습니다. 검색 API는 다음과 같습니다.

    IgcTreeGridComponent methods:

    IgcColumnComponent properties:

    사용된 관련 API가 포함된 추가 구성요소:

    Additional Resources

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.