Web Components Hierarchical Grid の Ignite UI for Web Components 高度なフィルタリングを使用すると、IgcHierarchicalGridComponent のすべての列にわたるフィルタリング条件を使用してさまざまなグループを作成できるダイアログが表示されるため、データを操作できます。
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample ig-typography"><divclass="container fill"><igc-hierarchical-gridauto-generate="false"primary-key="ID"allow-advanced-filtering="true"name="hierarchicalGrid1"id="hierarchicalGrid1"><igc-grid-toolbar
><igc-grid-toolbar-actions
><igc-grid-toolbar-advanced-filtering
></igc-grid-toolbar-advanced-filtering></igc-grid-toolbar-actions></igc-grid-toolbar><igc-columnfield="Artist"header="Artist"data-type="string"resizable="true"></igc-column><igc-columnfield="Photo"header="Photo"data-type="image"min-width="115px"resizable="true"></igc-column><igc-columnfield="Debut"header="Debut"data-type="number"min-width="88px"max-width="230px"resizable="true"filterable="false"></igc-column><igc-columnfield="GrammyNominations"header="Grammy Nominations"data-type="string"resizable="true"></igc-column><igc-columnfield="GrammyAwards"header="Grammy Awards"data-type="string"resizable="true"></igc-column><igc-row-islandchild-data-key="Albums"auto-generate="false"allow-advanced-filtering="true"><igc-columnfield="Album"header="Album"data-type="string"resizable="true"></igc-column><igc-columnfield="LaunchDate"header="Launch Date"data-type="date"resizable="true"></igc-column><igc-columnfield="BillboardReview"header="Billboard Review"data-type="string"resizable="true"></igc-column><igc-columnfield="USBillboard200"header="US Billboard 200"data-type="string"resizable="true"></igc-column><igc-row-islandchild-data-key="Songs"auto-generate="false"allow-advanced-filtering="true"><igc-columnfield="Number"header="No."data-type="string"resizable="true"></igc-column><igc-columnfield="Title"header="Title"data-type="string"resizable="true"></igc-column><igc-columnfield="Released"header="Released"data-type="string"resizable="true"></igc-column><igc-columnfield="Genre"header="Genre"data-type="string"resizable="true"></igc-column></igc-row-island></igc-row-island><igc-row-islandchild-data-key="Tours"auto-generate="false"allow-advanced-filtering="true"><igc-columnfield="Tour"header="Tour"data-type="string"resizable="true"></igc-column><igc-columnfield="StartedOn"header="Started on"data-type="string"resizable="true"></igc-column><igc-columnfield="Location"header="Location"data-type="string"resizable="true"></igc-column><igc-columnfield="Headliner"header="Headliner"data-type="string"resizable="true"></igc-column></igc-row-island></igc-hierarchical-grid></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
インタラクション
高度なフィルタリングダイアログを開くには、グリッドツールバーの [高度なフィルタリング] ボタンをクリックする必要があります。高度なフィルターが適用されていない場合、AND または OR でリンクされたフィルター条件のグループの作成から開始する必要があります。その後、フィルタリング条件またはサブグループを追加できます。
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample ig-typography"><divclass="container fill"><igc-hierarchical-gridauto-generate="false"id="hierarchicalGrid1"name="hierarchicalGrid1"id="hierarchicalGrid1"primary-key="ID"allow-advanced-filtering="true"><igc-grid-toolbar
><igc-grid-toolbar-actions
><igc-grid-toolbar-advanced-filtering
></igc-grid-toolbar-advanced-filtering></igc-grid-toolbar-actions></igc-grid-toolbar><igc-columnfield="Artist"header="Artist"data-type="string"resizable="true"></igc-column><igc-columnfield="Photo"header="Photo"data-type="image"min-width="115px"resizable="true"></igc-column><igc-columnfield="Debut"header="Debut"data-type="number"min-width="88px"max-width="230px"resizable="true"filterable="false"></igc-column><igc-columnfield="GrammyNominations"header="Grammy Nominations"data-type="string"resizable="true"></igc-column><igc-columnfield="GrammyAwards"header="Grammy Awards"data-type="string"resizable="true"></igc-column><igc-row-islandchild-data-key="Albums"auto-generate="false"allow-advanced-filtering="true"><igc-columnfield="Album"header="Album"data-type="string"resizable="true"></igc-column><igc-columnfield="LaunchDate"header="Launch Date"data-type="date"resizable="true"></igc-column><igc-columnfield="BillboardReview"header="Billboard Review"data-type="string"resizable="true"></igc-column><igc-columnfield="USBillboard200"header="US Billboard 200"data-type="string"resizable="true"></igc-column><igc-row-islandchild-data-key="Songs"auto-generate="false"allow-advanced-filtering="true"><igc-columnfield="Number"header="No."data-type="string"resizable="true"></igc-column><igc-columnfield="Title"header="Title"data-type="string"resizable="true"></igc-column><igc-columnfield="Released"header="Released"data-type="string"resizable="true"></igc-column><igc-columnfield="Genre"header="Genre"data-type="string"resizable="true"></igc-column></igc-row-island></igc-row-island><igc-row-islandchild-data-key="Tours"auto-generate="false"allow-advanced-filtering="true"><igc-columnfield="Tour"header="Tour"data-type="string"resizable="true"></igc-column><igc-columnfield="StartedOn"header="Started on"data-type="string"resizable="true"></igc-column><igc-columnfield="Location"header="Location"data-type="string"resizable="true"></igc-column><igc-columnfield="Headliner"header="Headliner"data-type="string"resizable="true"></igc-column></igc-row-island></igc-hierarchical-grid></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html