Web Components Tree Grid フィルタリング
Web Components Tree Grid の Ignite UI for Web Components フィルタリングは、特定の基準または条件に基づいてデータを選択的に表示または非表示にする機能です。IgcTreeGridComponent
コンポーネントが豊富なフィルタリング API とすべてのフィルタリング機能を提供するバインドされたデータ コンテナがあります。ここで利用可能なフィルタリング タイプは次の 3 つです。
Web Components Tree Grid フィルタリングの例
以下のサンプルは、IgcTreeGridComponent
の Excel スタイル フィルタリング ユーザー エクスペリエンスを示しています。
export class OrdersDataItem {
public constructor (init: Partial<OrdersDataItem> ) {
Object .assign(this , init);
}
public ID: number ;
public ParentID: number ;
public Name: string ;
public Category: string ;
public OrderDate: string ;
public Units: number ;
public UnitPrice: number ;
public Price: number ;
public Delivered: boolean ;
}
export class OrdersData extends Array <OrdersDataItem > {
public constructor (items: Array <OrdersDataItem> | number = -1 ) {
if (Array .isArray(items)) {
super (...items);
} else {
const newItems = [
new OrdersDataItem(
{
ID : 1 ,
ParentID : -1 ,
Name : `Order 1` ,
Category : `` ,
OrderDate : `2010-02-17` ,
Units : 1844 ,
UnitPrice : 3.73 ,
Price : 6884.38 ,
Delivered : true
}),
new OrdersDataItem(
{
ID : 101 ,
ParentID : 1 ,
Name : `Chocolate Chip Cookies` ,
Category : `Cookies` ,
OrderDate : `2010-02-17` ,
Units : 834 ,
UnitPrice : 3.59 ,
Price : 2994.06 ,
Delivered : true
}),
new OrdersDataItem(
{
ID : 102 ,
ParentID : 1 ,
Name : `Red Apples` ,
Category : `Fruit` ,
OrderDate : `2010-02-17` ,
Units : 371 ,
UnitPrice : 3.66 ,
Price : 1357.86 ,
Delivered : true
}),
new OrdersDataItem(
{
ID : 103 ,
ParentID : 1 ,
Name : `Butter` ,
Category : `Diary` ,
OrderDate : `2010-02-17` ,
Units : 260 ,
UnitPrice : 3.45 ,
Price : 897 ,
Delivered : true
}),
new OrdersDataItem(
{
ID : 104 ,
ParentID : 1 ,
Name : `Potato Chips` ,
Category : `Snack` ,
OrderDate : `2010-02-17` ,
Units : 118 ,
UnitPrice : 1.96 ,
Price : 231.28 ,
Delivered : true
}),
new OrdersDataItem(
{
ID : 105 ,
ParentID : 1 ,
Name : `Orange Juice` ,
Category : `Beverages` ,
OrderDate : `2010-02-17` ,
Units : 261 ,
UnitPrice : 5.38 ,
Price : 1404.18 ,
Delivered : true
}),
new OrdersDataItem(
{
ID : 2 ,
ParentID : -1 ,
Name : `Order 2` ,
Category : `` ,
OrderDate : `2022-05-27` ,
Units : 1831 ,
UnitPrice : 8.23 ,
Price : 15062.77 ,
Delivered : false
}),
new OrdersDataItem(
{
ID : 201 ,
ParentID : 2 ,
Name : `Frozen Shrimps` ,
Category : `Seafood` ,
OrderDate : `2022-05-27` ,
Units : 120 ,
UnitPrice : 20.45 ,
Price : 2454 ,
Delivered : false
}),
new OrdersDataItem(
{
ID : 202 ,
ParentID : 2 ,
Name : `Ice Tea` ,
Category : `Beverages` ,
OrderDate : `2022-05-27` ,
Units : 840 ,
UnitPrice : 7 ,
Price : 5880 ,
Delivered : false
}),
new OrdersDataItem(
{
ID : 203 ,
ParentID : 2 ,
Name : `Fresh Cheese` ,
Category : `Diary` ,
OrderDate : `2022-05-27` ,
Units : 267 ,
UnitPrice : 16.55 ,
Price : 4418.85 ,
Delivered : false
}),
new OrdersDataItem(
{
ID : 204 ,
ParentID : 2 ,
Name : `Carrots` ,
Category : `Vegetables` ,
OrderDate : `2022-05-27` ,
Units : 360 ,
UnitPrice : 2.77 ,
Price : 997.2 ,
Delivered : false
}),
new OrdersDataItem(
{
ID : 205 ,
ParentID : 2 ,
Name : `Apple Juice` ,
Category : `Beverages` ,
OrderDate : `2022-05-27` ,
Units : 244 ,
UnitPrice : 5.38 ,
Price : 1312.72 ,
Delivered : false
}),
new OrdersDataItem(
{
ID : 3 ,
ParentID : -1 ,
Name : `Order 3` ,
Category : `` ,
OrderDate : `2022-08-04` ,
Units : 1972 ,
UnitPrice : 3.47 ,
Price : 6849.18 ,
Delivered : true
}),
new OrdersDataItem(
{
ID : 301 ,
ParentID : 3 ,
Name : `Skimmed Milk 1L` ,
Category : `Diary` ,
OrderDate : `2022-08-04` ,
Units : 1028 ,
UnitPrice : 3.56 ,
Price : 3659.68 ,
Delivered : true
}),
new OrdersDataItem(
{
ID : 302 ,
ParentID : 3 ,
Name : `Bananas 5 Pack` ,
Category : `Fruit` ,
OrderDate : `2022-08-04` ,
Units : 370 ,
UnitPrice : 6.36 ,
Price : 2353.2 ,
Delivered : true
}),
new OrdersDataItem(
{
ID : 303 ,
ParentID : 3 ,
Name : `Cauliflower` ,
Category : `Vegetables` ,
OrderDate : `2022-08-04` ,
Units : 283 ,
UnitPrice : 0.95 ,
Price : 268.85 ,
Delivered : true
}),
new OrdersDataItem(
{
ID : 304 ,
ParentID : 3 ,
Name : `White Chocolate Cookies` ,
Category : `Cookies` ,
OrderDate : `2022-08-04` ,
Units : 291 ,
UnitPrice : 1.95 ,
Price : 567.45 ,
Delivered : true
}),
new OrdersDataItem(
{
ID : 4 ,
ParentID : -1 ,
Name : `Order 4` ,
Category : `` ,
OrderDate : `2023-01-04` ,
Units : 1065 ,
UnitPrice : 5.56 ,
Price : 5923.5 ,
Delivered : true
}),
new OrdersDataItem(
{
ID : 401 ,
ParentID : 4 ,
Name : `Mini Milk Chocolate Cookie Bites` ,
Category : `Cookies` ,
OrderDate : `2023-01-04` ,
Units : 68 ,
UnitPrice : 2.25 ,
Price : 153 ,
Delivered : true
}),
new OrdersDataItem(
{
ID : 402 ,
ParentID : 4 ,
Name : `Wild Salmon Fillets` ,
Category : `Seafood` ,
OrderDate : `2023-01-04` ,
Units : 320 ,
UnitPrice : 16.15 ,
Price : 5168 ,
Delivered : true
}),
new OrdersDataItem(
{
ID : 403 ,
ParentID : 4 ,
Name : `Diet Lemonade` ,
Category : `Beverages` ,
OrderDate : `2023-01-04` ,
Units : 437 ,
UnitPrice : 0.5 ,
Price : 218.5 ,
Delivered : true
}),
new OrdersDataItem(
{
ID : 404 ,
ParentID : 4 ,
Name : `Potatoes` ,
Category : `Vegetables` ,
OrderDate : `2023-01-04` ,
Units : 240 ,
UnitPrice : 1.6 ,
Price : 384 ,
Delivered : true
}),
];
super (...newItems.slice(0 ));
}
}
}
ts コピー import 'igniteui-webcomponents-grids/grids/combined' ;
import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids' ;
import { OrdersDataItem, OrdersData } from './OrdersData' ;
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css" ;
import "./index.css" ;
export class Sample {
private treeGrid: IgcTreeGridComponent
private _bind: () => void ;
constructor ( ) {
var treeGrid = this .treeGrid = document .getElementById('treeGrid' ) as IgcTreeGridComponent;
this ._bind = () => {
treeGrid.data = this .ordersData;
}
this ._bind();
}
private _ordersData: OrdersData = null ;
public get ordersData (): OrdersData {
if (this ._ordersData == null )
{
this ._ordersData = new OrdersData();
}
return this ._ordersData;
}
}
new Sample();
ts コピー <!DOCTYPE html >
<html >
<head >
<title > Sample | Ignite UI | Web Components | infragistics</title >
<meta charset ="UTF-8" />
<link rel ="shortcut icon" href ="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel ="stylesheet" href ="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel ="stylesheet" href ="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel ="stylesheet" href ="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel ="stylesheet" href ="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel ="stylesheet" href ="/src/index.css" type ="text/css" />
</head >
<body >
<div id ="root" >
<div class ="container sample ig-typography" >
<div class ="container fill" >
<igc-tree-grid
auto-generate ="false"
name ="treeGrid"
id ="treeGrid"
id ="treeGrid"
filter-mode ="quickFilter"
primary-key ="ID"
foreign-key ="ParentID"
allow-filtering ="true" >
<igc-column
field ="ID"
header ="Order ID"
data-type ="number" >
</igc-column >
<igc-column
field ="Name"
header ="Order Product"
data-type ="string" >
</igc-column >
<igc-column
field ="Category"
data-type ="string" >
</igc-column >
<igc-column
field ="Units"
data-type ="number" >
</igc-column >
<igc-column
field ="Age"
data-type ="number"
sortable ="true"
hidden ="true" >
</igc-column >
<igc-column
field ="UnitPrice"
header ="Unit Price"
data-type ="currency" >
</igc-column >
<igc-column
field ="Price"
data-type ="currency" >
</igc-column >
<igc-column
field ="Country"
data-type ="string"
sortable ="true" >
</igc-column >
<igc-column
field ="OrderDate"
header ="Order Date"
data-type ="date" >
</igc-column >
<igc-column
field ="Delivered"
data-type ="boolean" >
</igc-column >
</igc-tree-grid >
</div >
</div >
</div >
<% if (false) { %><script src ="src/index.ts" > </script > <% } %>
</body >
</html >
html コピー
このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
設定
フィルタリングが有効かどうか、およびどのフィルタリング モードを使用するかを指定するために、IgcTreeGrid は次のブール プロパティを公開します - AllowFiltering
、AllowAdvancedFiltering
、FilterMode
と filterable
。
以下のオプションは、プロパティ AllowFiltering
で指定できます。
false - 対応するグリッドのフィルタリングが無効になります。これがデフォルト値です。
true - 対応するグリッドのフィルタリングが有効になります。
以下のオプションは、プロパティ AllowAdvancedFiltering
で指定できます。
false - 対応するグリッドの高度なフィルタリングが無効になります。これがデフォルト値です。
true - 対応するグリッドの高度なフィルタリングが有効になります。
以下のオプションは、プロパティ FilterMode
で指定できます。
QuickFilter - 簡易なフィルタリング UI。これがデフォルト値です。
ExcelStyleFilter - Excel のようなフィルタリング UI。
以下のオプションは、プロパティ filterable
で指定できます。
true - 対応する列のフィルタリングが有効になります。これがデフォルト値です。
false - 対応する列のフィルタリングが無効になります。
<igc-tree-grid id ="grid1" auto-generate ="false" allow-filtering ="true" >
<igc-column field ="ProductName" data-type ="string" > </igc-column >
<igc-column field ="Price" data-type ="number" filterable ="false" > </igc-column >
</igc-tree-grid >
html
高度なフィルタリング を有効にするには、AllowAdvancedFiltering
入力プロパティを true に設定します。
<igc-tree-grid data ="data" auto-generate ="true" allow-advanced-filtering ="true" >
</igc-tree-grid >
html
IgcTreeGridComponent で QuickFilter または ExcelStyleFilter と高度なフィルタリング ユーザー インターフェイスの両方を有効にできます。両フィルタリング ユーザー インターフェイスは、互いに依存せずに機能します。IgcTreeGridComponent の最終的なフィルター結果は、2 つのフィルター結果の共通部分です。
インタラクション
特定の列のフィルター行を開くには、ヘッダー下のフィルター チップをクリックします。状態を追加するために入力の左側のドロップダウンを使用してフィルター オペランドを選択し、値を入力します。number と date 列には、Equals がデフォルトで選択されます。string には 'Contains'、boolean には 'All' が選択されます。'Enter' を押して条件を確定して他の条件を追加できます。条件チップの間にドロップダウンがあり、それらの間の論理演算子を決定します。'AND' がデフォルトで選択されます。条件の削除はチップの X ボタンをクリックします。編集はチップを選択、入力はチップのデータで生成されます。フィルター行が開いているときにフィルター可能な列のヘッダーをクリックして選択し、フィルター条件を追加できます。
列に適用したフィルターがある場合、フィルター行が閉じられるとチップの閉じるボタンをクリックした条件の削除やいずれかのチップを選択してフィルター行を開くことができます。すべての条件を表示するための十分なスペースがない場合、条件数を示すバッジ付きのフィルター アイコンが表示されます。フィルター行を開くためにクリックできます。
使用方法
デフォルトの定義済みフィルタリングおよび標準のフィルタリング条件があり、カスタム実装で置き換えることも可能です。また、カスタム フィルタリング条件を追加することもできます。IgcTreeGridComponent
には、簡易なフィルター UI と詳細なフィルター オプションがあります。列で設定された dataType
に基づいて、適切なフィルタリング処理 のセットがフィルター UI ドロップダウンに読み込まれます。また、IgnoreCase
と最初の Condition
プロパティを設定できます。
フィルタリング機能は、AllowFiltering
入力を true に設定すると IgcTreeGridComponent
コンポーネントで有効になります。デフォルトの FilterMode
は QuickFilter
でランタイムでは変更できません 。特定の列でこの機能を無効にするには、filterable
入力を false に設定します。
<igc-tree-grid auto-generate ="false" allow-filtering ="true" >
<igc-column field ="ProductName" data-type ="string" > </igc-column >
<igc-column field ="Price" datdata-typeaType ="number" > </igc-column >
<igc-column field ="Discontinued" data-type ="boolean" filterable ="false" > </igc-column >
</igc-tree-grid >
html
string 型の値が date データ型の列で使用される場合、IgcTreeGridComponent は値を date オブジェクトに解析しないためフィルター条件は使用できません。string オブジェクトを使用する場合、値を date オブジェクトに解析するためのロジックをアプリケーション レベルで実装する必要があります。
列または複数の列は IgcTreeGridComponent
API でフィルターできます。IgcTreeGridComponent
は、このタスクに複数のメソッドを公開します (Filter
、FilterGlobal
、ClearFilter
.)。
Filter
- 単一の列または複数の列をフィルターします。
以下の 5 つのフィルタリング オペランド クラスが公開されます。
this .grid.filter('ProductName' , 'myproduct' , IgcStringFilteringOperand.instance().condition('contains' ), true );
typescript
必要なパラメーターは列フィールド キーとフィルター用語のみです。条件および大文字と小文字の区別を設定しない場合、列プロパティで推測されます。フィルターが複数ある場合、このメソッドはフィルター式の配列を受け取ります。
フィルタリング操作で IgcTreeGridComponent にバインドされているデータ ソースは変更されません。
const gridFilteringExpressionsTree = new IgcFilteringExpressionsTree(FilteringLogic.And);
const productFilteringExpressionsTree = new IgcFilteringExpressionsTree(FilteringLogic.And, 'ProductName' );
const productExpression = {
condition : IgcStringFilteringOperand.instance().condition('contains' ),
fieldName : 'ProductName' ,
ignoreCase : true ,
searchVal : 'ch'
};
productFilteringExpressionsTree.filteringOperands.push(productExpression);
gridFilteringExpressionsTree.filteringOperands.push(productFilteringExpressionsTree);
const priceFilteringExpressionsTree = new IgcFilteringExpressionsTree(FilteringLogic.And, 'Price' );
const priceExpression = {
condition : IgcNumberFilteringOperand.instance().condition('greaterThan' ),
fieldName : 'UnitPrice' ,
ignoreCase : true ,
searchVal : 20
};
priceFilteringExpressionsTree.filteringOperands.push(priceExpression);
gridFilteringExpressionsTree.filteringOperands.push(priceFilteringExpressionsTree);
this .grid.filteringExpressionsTree = gridFilteringExpressionsTree;
typescript
FilterGlobal
- 既存フィルターをクリアして新しいフィルター条件をすべての Tree Grid 列に適用します。
this .grid.filteringLogic = FilteringLogic.Or;
this .grid.filterGlobal('myproduct' , IgcStringFilteringOperand.instance().condition('contains' ), false );
typescript
ClearFilter
- 対象列から適用されたフィルターを削除します。引数がない場合、すべての列のフィルターをクリアします。
this .grid.clearFilter('ProductName' );
this .grid.clearFilter();
typescript
初期のフィルター状態
IgcTreeGridComponent
の初期フィルタリング状態の設定は、IgcTreeGridComponent
filteringExpressionsTree
プロパティを filteringExpressionsTree
の配列に設定して各列をフィルターします。
constructor ( ) {
const gridFilteringExpressionsTree: IgcFilteringExpressionsTree = { operator : FilteringLogic.And };
const productFilteringExpressionsTree: IgcFilteringExpression = {
fieldName : "ProductName" ,
conditionName : "contains" ,
ignoreCase : true ,
searchVal : "Chai"
};
const quantityFilteringExpressionsTree: IgcFilteringExpression = {
fieldName : "QuantityPerUnit" ,
conditionName : "contains" ,
ignoreCase : true ,
searchVal : "1"
};
gridFilteringExpressionsTree.filteringOperands = [ productFilteringExpressionsTree, quantityFilteringExpressionsTree ];
this .grid.filteringExpressionsTree = gridFilteringExpressionsTree;
}
typescript
フィルター ロジック
IgcTreeGridComponent
コントロールの FilteringLogic
プロパティは IgcTreeGridComponent
で複数の列のフィルターが解決する方法を制御します。IgcTreeGridComponent
API または IgcTreeGridComponent
の入力プロパティによって変更できます。
import { FilteringLogic } from "igniteui-webcomponents-grids/grids" ;
this .grid.filteringLogic = FilteringLogic.OR;
typescript
AND
のデフォルト値は現在適用されているすべてのフィルター式と一致する行のみを返します。上記の例は、「ProductName」 セル値が 「myproduct」 を含み、「Price」 セル値が 55 より大きい場合に行が返されます。
OR
に設定される場合、「ProductName」 セル値が 「myproduct」 を含むか、「Price」 セル値が 55 より大きい場合に行が返されます。
カスタム フィルタリング オペランド
フィルタリング メニューは、フィルタリング オペランド削除または変更してカスタマイズします。デフォルトでフィルタリング メニューは列のデータ型 (IgcBooleanFilteringOperand
、IgcDateFilteringOperand
、IgcNumberFilteringOperand
、IgcStringFilteringOperand
) に基づいて特定のオペランドを含みます。これらのクラスまたは基本クラス IgcFilteringOperand
を拡張してフィルタリング メニュー項目の動作を変更できます。
以下のサンプルの 「Product Name」 と 「Discontinued」 列フィルタリング メニューを確認してください。「Discontinued」 列フィルターでは、オペランドの数が All に制限されています。「Product Name」 列フィルター - Contains および Does Not Contain オペランド ロジックを変更して大文字と小文字を区別した検索を実行し、Empty と Not Empty を追加します。
これにより、IgcStringFilteringOperand
と IgcBooleanFilteringOperand
を拡張し、オペランドとロジックを変更して列 filters
入力を新しいオペランドに設定します。
export class GridCustomFilteringComponent {
public caseSensitiveFilteringOperand = CaseSensitiveFilteringOperand.instance();
public booleanFilteringOperand = BooleanFilteringOperand.instance();
}
export class CaseSensitiveFilteringOperand extends IgcStringFilteringOperand {
private constructor ( ) {
super ();
const customOperations = [
{
iconName : 'contains' ,
isUnary : false ,
logic : (target: string , searchVal: string , ignoreCase?: boolean ) => {
ignoreCase = false ;
const search = IgcStringFilteringOperand.applyIgnoreCase(searchVal, ignoreCase);
target = IgcStringFilteringOperand.applyIgnoreCase(target, ignoreCase);
return target.indexOf(search) !== -1 ;
},
name : 'Contains (case sensitive)'
},
{
iconName : 'does_not_contain' ,
isUnary : false ,
logic : (target: string , searchVal: string , ignoreCase?: boolean ) => {
ignoreCase = false ;
const search = IgcStringFilteringOperand.applyIgnoreCase(searchVal, ignoreCase);
target = IgcStringFilteringOperand.applyIgnoreCase(target, ignoreCase);
return target.indexOf(search) === -1 ;
},
name : 'Does Not Contain (case sensitive)'
}
];
const emptyOperators = [
this .operations[6 ],
this .operations[7 ]
];
this .operations = customOperations.concat(emptyOperators);
}
}
export class BooleanFilteringOperand extends IgcBooleanFilteringOperand {
private constructor ( ) {
super ();
this .operations = [
this .operations[0 ],
this .operations[1 ],
this .operations[2 ]
];
}
}
typescript
<igc-tree-grid auto-generate ="false" allow-filtering ="true" >
<igc-column id ="ProductName" field ="ProductName" header ="Product Name" data-type ="string" > </igc-column >
<igc-column id ="Discontinued" field ="Discontinued" header ="Discontinued" data-type ="boolean" > </igc-column >
</igc-tree-grid >
html
constructor ( ) {
var productName = document .getElementById('ProductName' ) as IgcColumnComponent;
var discontinued = document .getElementById('Discontinued' ) as IgcColumnComponent;
productName.filters = this .caseSensitiveFilteringOperand;
discontinued.filters = this .booleanFilteringOperand;
}
ts
export class OrdersDataItem {
public constructor (init: Partial<OrdersDataItem> ) {
Object .assign(this , init);
}
public ID: number ;
public ParentID: number ;
public Name: string ;
public Category: string ;
public OrderDate: string ;
public Units: number ;
public UnitPrice: number ;
public Price: number ;
public Delivered: boolean ;
}
export class OrdersData extends Array <OrdersDataItem > {
public constructor ( ) {
super ();
this .push(new OrdersDataItem(
{
ID : 1 ,
ParentID : -1 ,
Name : `Order 1` ,
Category : `` ,
OrderDate : `2010-02-17` ,
Units : 1844 ,
UnitPrice : 3.73 ,
Price : 6884.38 ,
Delivered : true
}));
this .push(new OrdersDataItem(
{
ID : 101 ,
ParentID : 1 ,
Name : `Chocolate Chip Cookies` ,
Category : `Cookies` ,
OrderDate : `2010-02-17` ,
Units : 834 ,
UnitPrice : 3.59 ,
Price : 2994.06 ,
Delivered : true
}));
this .push(new OrdersDataItem(
{
ID : 102 ,
ParentID : 1 ,
Name : `Red Apples` ,
Category : `Fruit` ,
OrderDate : `2010-02-17` ,
Units : 371 ,
UnitPrice : 3.66 ,
Price : 1357.86 ,
Delivered : true
}));
this .push(new OrdersDataItem(
{
ID : 103 ,
ParentID : 1 ,
Name : `Butter` ,
Category : `Diary` ,
OrderDate : `2010-02-17` ,
Units : 260 ,
UnitPrice : 3.45 ,
Price : 897 ,
Delivered : true
}));
this .push(new OrdersDataItem(
{
ID : 104 ,
ParentID : 1 ,
Name : `Potato Chips` ,
Category : `Snack` ,
OrderDate : `2010-02-17` ,
Units : 118 ,
UnitPrice : 1.96 ,
Price : 231.28 ,
Delivered : true
}));
this .push(new OrdersDataItem(
{
ID : 105 ,
ParentID : 1 ,
Name : `Orange Juice` ,
Category : `Beverages` ,
OrderDate : `2010-02-17` ,
Units : 261 ,
UnitPrice : 5.38 ,
Price : 1404.18 ,
Delivered : true
}));
this .push(new OrdersDataItem(
{
ID : 2 ,
ParentID : -1 ,
Name : `Order 2` ,
Category : `` ,
OrderDate : `2022-05-27` ,
Units : 1831 ,
UnitPrice : 8.23 ,
Price : 15062.77 ,
Delivered : false
}));
this .push(new OrdersDataItem(
{
ID : 201 ,
ParentID : 2 ,
Name : `Frozen Shrimps` ,
Category : `Seafood` ,
OrderDate : `2022-05-27` ,
Units : 120 ,
UnitPrice : 20.45 ,
Price : 2454 ,
Delivered : false
}));
this .push(new OrdersDataItem(
{
ID : 202 ,
ParentID : 2 ,
Name : `Ice Tea` ,
Category : `Beverages` ,
OrderDate : `2022-05-27` ,
Units : 840 ,
UnitPrice : 7 ,
Price : 5880 ,
Delivered : false
}));
this .push(new OrdersDataItem(
{
ID : 203 ,
ParentID : 2 ,
Name : `Fresh Cheese` ,
Category : `Diary` ,
OrderDate : `2022-05-27` ,
Units : 267 ,
UnitPrice : 16.55 ,
Price : 4418.85 ,
Delivered : false
}));
this .push(new OrdersDataItem(
{
ID : 204 ,
ParentID : 2 ,
Name : `Carrots` ,
Category : `Vegetables` ,
OrderDate : `2022-05-27` ,
Units : 360 ,
UnitPrice : 2.77 ,
Price : 997.2 ,
Delivered : false
}));
this .push(new OrdersDataItem(
{
ID : 205 ,
ParentID : 2 ,
Name : `Apple Juice` ,
Category : `Beverages` ,
OrderDate : `2022-05-27` ,
Units : 244 ,
UnitPrice : 5.38 ,
Price : 1312.72 ,
Delivered : false
}));
this .push(new OrdersDataItem(
{
ID : 3 ,
ParentID : -1 ,
Name : `Order 3` ,
Category : `` ,
OrderDate : `2022-08-04` ,
Units : 1972 ,
UnitPrice : 3.47 ,
Price : 6849.18 ,
Delivered : true
}));
this .push(new OrdersDataItem(
{
ID : 301 ,
ParentID : 3 ,
Name : `Skimmed Milk 1L` ,
Category : `Diary` ,
OrderDate : `2022-08-04` ,
Units : 1028 ,
UnitPrice : 3.56 ,
Price : 3659.68 ,
Delivered : true
}));
this .push(new OrdersDataItem(
{
ID : 302 ,
ParentID : 3 ,
Name : `Bananas 5 Pack` ,
Category : `Fruit` ,
OrderDate : `2022-08-04` ,
Units : 370 ,
UnitPrice : 6.36 ,
Price : 2353.2 ,
Delivered : true
}));
this .push(new OrdersDataItem(
{
ID : 303 ,
ParentID : 3 ,
Name : `Cauliflower` ,
Category : `Vegetables` ,
OrderDate : `2022-08-04` ,
Units : 283 ,
UnitPrice : 0.95 ,
Price : 268.85 ,
Delivered : true
}));
this .push(new OrdersDataItem(
{
ID : 304 ,
ParentID : 3 ,
Name : `White Chocolate Cookies` ,
Category : `Cookies` ,
OrderDate : `2022-08-04` ,
Units : 291 ,
UnitPrice : 1.95 ,
Price : 567.45 ,
Delivered : true
}));
this .push(new OrdersDataItem(
{
ID : 4 ,
ParentID : -1 ,
Name : `Order 4` ,
Category : `` ,
OrderDate : `2023-01-04` ,
Units : 1065 ,
UnitPrice : 5.56 ,
Price : 5923.5 ,
Delivered : true
}));
this .push(new OrdersDataItem(
{
ID : 401 ,
ParentID : 4 ,
Name : `Mini Milk Chocolate Cookie Bites` ,
Category : `Cookies` ,
OrderDate : `2023-01-04` ,
Units : 68 ,
UnitPrice : 2.25 ,
Price : 153 ,
Delivered : true
}));
this .push(new OrdersDataItem(
{
ID : 402 ,
ParentID : 4 ,
Name : `Wild Salmon Fillets` ,
Category : `Seafood` ,
OrderDate : `2023-01-04` ,
Units : 320 ,
UnitPrice : 16.15 ,
Price : 5168 ,
Delivered : true
}));
this .push(new OrdersDataItem(
{
ID : 403 ,
ParentID : 4 ,
Name : `Diet Lemonade` ,
Category : `Beverages` ,
OrderDate : `2023-01-04` ,
Units : 437 ,
UnitPrice : 0.5 ,
Price : 218.5 ,
Delivered : true
}));
this .push(new OrdersDataItem(
{
ID : 404 ,
ParentID : 4 ,
Name : `Potatos` ,
Category : `Vegetables` ,
OrderDate : `2023-01-04` ,
Units : 240 ,
UnitPrice : 1.6 ,
Price : 384 ,
Delivered : true
}));
}
}
ts コピー import 'igniteui-webcomponents-grids/grids/combined' ;
import { IgcBooleanFilteringOperand, IgcColumnComponent, IgcFilteringOperation, IgcStringFilteringOperand, IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids' ;
import { OrdersDataItem, OrdersData } from './OrdersData' ;
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css" ;
import "./index.css" ;
export class Sample {
private treeGrid: IgcTreeGridComponent;
public caseSensitiveFilteringOperand = CaseSensitiveFilteringOperand.instance();
public booleanFilteringOperand = BooleanFilteringOperand.instance();
constructor ( ) {
var treeGrid = this .treeGrid = document .getElementById('treeGrid' ) as IgcTreeGridComponent;
var name = document .getElementById('name' ) as IgcColumnComponent;
var delivered = document .getElementById('delivered' ) as IgcColumnComponent;
treeGrid.data = this .ordersData;
name.filters = this .caseSensitiveFilteringOperand;
delivered.filters = this .booleanFilteringOperand;
}
private _ordersData: OrdersData = null ;
public get ordersData (): OrdersData {
if (this ._ordersData == null )
{
this ._ordersData = new OrdersData();
}
return this ._ordersData;
}
}
export class CaseSensitiveFilteringOperand extends IgcStringFilteringOperand {
private constructor ( ) {
super ();
const customOperations: IgcFilteringOperation[] = [
{
iconName : 'contains' ,
isUnary : false ,
logic : (target: string , searchVal: string , ignoreCase?: boolean ) => {
ignoreCase = false ;
const search = IgcStringFilteringOperand.applyIgnoreCase(searchVal, ignoreCase);
target = IgcStringFilteringOperand.applyIgnoreCase(target, ignoreCase);
return target.indexOf(search) !== -1 ;
},
name : 'Contains (case sensitive)'
},
{
iconName : 'does_not_contain' ,
isUnary : false ,
logic : (target: string , searchVal: string , ignoreCase?: boolean ) => {
ignoreCase = false ;
const search = IgcStringFilteringOperand.applyIgnoreCase(searchVal, ignoreCase);
target = IgcStringFilteringOperand.applyIgnoreCase(target, ignoreCase);
return target.indexOf(search) === -1 ;
},
name : 'Does Not Contain (case sensitive)'
}
];
const emptyOperators = [
this .operations[6 ],
this .operations[7 ]
];
this .operations = customOperations.concat(emptyOperators);
}
}
export class BooleanFilteringOperand extends IgcBooleanFilteringOperand {
private constructor ( ) {
super ();
this .operations = [
this .operations[0 ],
this .operations[1 ],
this .operations[2 ]
];
}
}
new Sample();
ts コピー <!DOCTYPE html >
<html >
<head >
<title > Sample | Ignite UI | Web Components | infragistics</title >
<meta charset ="UTF-8" />
<link rel ="shortcut icon" href ="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel ="stylesheet" href ="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel ="stylesheet" href ="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel ="stylesheet" href ="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel ="stylesheet" href ="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel ="stylesheet" href ="/src/index.css" type ="text/css" />
</head >
<body >
<div id ="root" >
<div class ="container sample" >
<div class ="container fill" >
<igc-tree-grid
auto-generate ="false"
name ="treeGrid"
id ="treeGrid"
id ="treeGrid"
filter-mode ="quickFilter"
primary-key ="ID"
foreign-key ="ParentID"
allow-filtering ="true" >
<igc-column
field ="ID"
header ="Order ID"
data-type ="number" >
</igc-column >
<igc-column
field ="Name"
id ="name"
header ="Order Product"
data-type ="string" >
</igc-column >
<igc-column
field ="Category"
data-type ="string" >
</igc-column >
<igc-column
field ="Units"
data-type ="number" >
</igc-column >
<igc-column
field ="Age"
data-type ="number"
sortable ="true"
hidden ="true" >
</igc-column >
<igc-column
field ="UnitPrice"
header ="Unit Price"
data-type ="currency" >
</igc-column >
<igc-column
field ="Price"
data-type ="currency" >
</igc-column >
<igc-column
field ="Country"
data-type ="string"
sortable ="true" >
</igc-column >
<igc-column
field ="OrderDate"
header ="Order Date"
data-type ="date" >
</igc-column >
<igc-column
field ="Delivered"
id ="delivered"
data-type ="boolean" >
</igc-column >
</igc-tree-grid >
</div >
</div >
</div >
<% if (false) { %><script src ="src/index.ts" > </script > <% } %>
</body >
</html >
html コピー
スタイル設定
定義済みのテーマに加えて、利用可能な CSS プロパティ のいくつかを設定することで、グリッドをさらにカスタマイズできます。
一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。
<igc-tree-grid class ="grid" > </igc-tree-grid >
html
次に、そのクラスに関連する CSS プロパティを設定します。
.grid {
--ig-grid-filtering-row-text-color : #292826 ;
--ig-grid-filtering-row-background : #ffcd0f ;
--ig-grid-filtering-header -text-color : #292826 ;
--ig-grid-filtering-header -background : #ffcd0f ;
}
css
デモ
export class OrdersDataItem {
public constructor (init: Partial<OrdersDataItem> ) {
Object .assign(this , init);
}
public ID: number ;
public ParentID: number ;
public Name: string ;
public Category: string ;
public OrderDate: string ;
public Units: number ;
public UnitPrice: number ;
public Price: number ;
public Delivered: boolean ;
}
export class OrdersData extends Array <OrdersDataItem > {
public constructor (items: Array <OrdersDataItem> | number = -1 ) {
if (Array .isArray(items)) {
super (...items);
} else {
const newItems = [
new OrdersDataItem(
{
ID : 1 ,
ParentID : -1 ,
Name : `Order 1` ,
Category : `` ,
OrderDate : `2010-02-17` ,
Units : 1844 ,
UnitPrice : 3.73 ,
Price : 6884.38 ,
Delivered : true
}),
new OrdersDataItem(
{
ID : 101 ,
ParentID : 1 ,
Name : `Chocolate Chip Cookies` ,
Category : `Cookies` ,
OrderDate : `2010-02-17` ,
Units : 834 ,
UnitPrice : 3.59 ,
Price : 2994.06 ,
Delivered : true
}),
new OrdersDataItem(
{
ID : 102 ,
ParentID : 1 ,
Name : `Red Apples` ,
Category : `Fruit` ,
OrderDate : `2010-02-17` ,
Units : 371 ,
UnitPrice : 3.66 ,
Price : 1357.86 ,
Delivered : true
}),
new OrdersDataItem(
{
ID : 103 ,
ParentID : 1 ,
Name : `Butter` ,
Category : `Diary` ,
OrderDate : `2010-02-17` ,
Units : 260 ,
UnitPrice : 3.45 ,
Price : 897 ,
Delivered : true
}),
new OrdersDataItem(
{
ID : 104 ,
ParentID : 1 ,
Name : `Potato Chips` ,
Category : `Snack` ,
OrderDate : `2010-02-17` ,
Units : 118 ,
UnitPrice : 1.96 ,
Price : 231.28 ,
Delivered : true
}),
new OrdersDataItem(
{
ID : 105 ,
ParentID : 1 ,
Name : `Orange Juice` ,
Category : `Beverages` ,
OrderDate : `2010-02-17` ,
Units : 261 ,
UnitPrice : 5.38 ,
Price : 1404.18 ,
Delivered : true
}),
new OrdersDataItem(
{
ID : 2 ,
ParentID : -1 ,
Name : `Order 2` ,
Category : `` ,
OrderDate : `2022-05-27` ,
Units : 1831 ,
UnitPrice : 8.23 ,
Price : 15062.77 ,
Delivered : false
}),
new OrdersDataItem(
{
ID : 201 ,
ParentID : 2 ,
Name : `Frozen Shrimps` ,
Category : `Seafood` ,
OrderDate : `2022-05-27` ,
Units : 120 ,
UnitPrice : 20.45 ,
Price : 2454 ,
Delivered : false
}),
new OrdersDataItem(
{
ID : 202 ,
ParentID : 2 ,
Name : `Ice Tea` ,
Category : `Beverages` ,
OrderDate : `2022-05-27` ,
Units : 840 ,
UnitPrice : 7 ,
Price : 5880 ,
Delivered : false
}),
new OrdersDataItem(
{
ID : 203 ,
ParentID : 2 ,
Name : `Fresh Cheese` ,
Category : `Diary` ,
OrderDate : `2022-05-27` ,
Units : 267 ,
UnitPrice : 16.55 ,
Price : 4418.85 ,
Delivered : false
}),
new OrdersDataItem(
{
ID : 204 ,
ParentID : 2 ,
Name : `Carrots` ,
Category : `Vegetables` ,
OrderDate : `2022-05-27` ,
Units : 360 ,
UnitPrice : 2.77 ,
Price : 997.2 ,
Delivered : false
}),
new OrdersDataItem(
{
ID : 205 ,
ParentID : 2 ,
Name : `Apple Juice` ,
Category : `Beverages` ,
OrderDate : `2022-05-27` ,
Units : 244 ,
UnitPrice : 5.38 ,
Price : 1312.72 ,
Delivered : false
}),
new OrdersDataItem(
{
ID : 3 ,
ParentID : -1 ,
Name : `Order 3` ,
Category : `` ,
OrderDate : `2022-08-04` ,
Units : 1972 ,
UnitPrice : 3.47 ,
Price : 6849.18 ,
Delivered : true
}),
new OrdersDataItem(
{
ID : 301 ,
ParentID : 3 ,
Name : `Skimmed Milk 1L` ,
Category : `Diary` ,
OrderDate : `2022-08-04` ,
Units : 1028 ,
UnitPrice : 3.56 ,
Price : 3659.68 ,
Delivered : true
}),
new OrdersDataItem(
{
ID : 302 ,
ParentID : 3 ,
Name : `Bananas 5 Pack` ,
Category : `Fruit` ,
OrderDate : `2022-08-04` ,
Units : 370 ,
UnitPrice : 6.36 ,
Price : 2353.2 ,
Delivered : true
}),
new OrdersDataItem(
{
ID : 303 ,
ParentID : 3 ,
Name : `Cauliflower` ,
Category : `Vegetables` ,
OrderDate : `2022-08-04` ,
Units : 283 ,
UnitPrice : 0.95 ,
Price : 268.85 ,
Delivered : true
}),
new OrdersDataItem(
{
ID : 304 ,
ParentID : 3 ,
Name : `White Chocolate Cookies` ,
Category : `Cookies` ,
OrderDate : `2022-08-04` ,
Units : 291 ,
UnitPrice : 1.95 ,
Price : 567.45 ,
Delivered : true
}),
new OrdersDataItem(
{
ID : 4 ,
ParentID : -1 ,
Name : `Order 4` ,
Category : `` ,
OrderDate : `2023-01-04` ,
Units : 1065 ,
UnitPrice : 5.56 ,
Price : 5923.5 ,
Delivered : true
}),
new OrdersDataItem(
{
ID : 401 ,
ParentID : 4 ,
Name : `Mini Milk Chocolate Cookie Bites` ,
Category : `Cookies` ,
OrderDate : `2023-01-04` ,
Units : 68 ,
UnitPrice : 2.25 ,
Price : 153 ,
Delivered : true
}),
new OrdersDataItem(
{
ID : 402 ,
ParentID : 4 ,
Name : `Wild Salmon Fillets` ,
Category : `Seafood` ,
OrderDate : `2023-01-04` ,
Units : 320 ,
UnitPrice : 16.15 ,
Price : 5168 ,
Delivered : true
}),
new OrdersDataItem(
{
ID : 403 ,
ParentID : 4 ,
Name : `Diet Lemonade` ,
Category : `Beverages` ,
OrderDate : `2023-01-04` ,
Units : 437 ,
UnitPrice : 0.5 ,
Price : 218.5 ,
Delivered : true
}),
new OrdersDataItem(
{
ID : 404 ,
ParentID : 4 ,
Name : `Potatoes` ,
Category : `Vegetables` ,
OrderDate : `2023-01-04` ,
Units : 240 ,
UnitPrice : 1.6 ,
Price : 384 ,
Delivered : true
}),
];
super (...newItems.slice(0 ));
}
}
}
ts コピー import 'igniteui-webcomponents-grids/grids/combined' ;
import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids' ;
import { OrdersDataItem, OrdersData } from './OrdersData' ;
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css" ;
import "./index.css" ;
export class Sample {
private treeGrid: IgcTreeGridComponent
private _bind: () => void ;
constructor ( ) {
var treeGrid = this .treeGrid = document .getElementById('treeGrid' ) as IgcTreeGridComponent;
this ._bind = () => {
treeGrid.data = this .ordersData;
}
this ._bind();
}
private _ordersData: OrdersData = null ;
public get ordersData (): OrdersData {
if (this ._ordersData == null )
{
this ._ordersData = new OrdersData();
}
return this ._ordersData;
}
}
new Sample();
ts コピー <!DOCTYPE html >
<html >
<head >
<title > Sample | Ignite UI | Web Components | infragistics</title >
<meta charset ="UTF-8" />
<link rel ="shortcut icon" href ="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel ="stylesheet" href ="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel ="stylesheet" href ="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel ="stylesheet" href ="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel ="stylesheet" href ="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel ="stylesheet" href ="/src/index.css" type ="text/css" />
</head >
<body >
<div id ="root" >
<div class ="container sample ig-typography" >
<div class ="container fill" >
<igc-tree-grid
auto-generate ="false"
name ="treeGrid"
id ="treeGrid"
id ="treeGrid"
filter-mode ="quickFilter"
primary-key ="ID"
foreign-key ="ParentID"
allow-filtering ="true" >
<igc-column
field ="ID"
header ="Order ID"
data-type ="number" >
</igc-column >
<igc-column
field ="Name"
header ="Order Product"
data-type ="string" >
</igc-column >
<igc-column
field ="Category"
data-type ="string" >
</igc-column >
<igc-column
field ="Units"
data-type ="number" >
</igc-column >
<igc-column
field ="Age"
data-type ="number"
sortable ="true"
hidden ="true" >
</igc-column >
<igc-column
field ="UnitPrice"
header ="Unit Price"
data-type ="currency" >
</igc-column >
<igc-column
field ="Price"
data-type ="currency" >
</igc-column >
<igc-column
field ="Country"
data-type ="string"
sortable ="true" >
</igc-column >
<igc-column
field ="OrderDate"
header ="Order Date"
data-type ="date" >
</igc-column >
<igc-column
field ="Delivered"
data-type ="boolean" >
</igc-column >
</igc-tree-grid >
</div >
</div >
</div >
<% if (false) { %><script src ="src/index.ts" > </script > <% } %>
</body >
</html >
html コピー
#treeGrid {
--ig-grid-filtering-row-text-color : #292826 ;
--ig-grid-filtering-row-background : #ffcd0f ;
--ig-grid-filtering-header -text-color : #292826 ;
--ig-grid-filtering-header -background : #ffcd0f ;
}
css コピー
既知の問題と制限
Firefox などの一部のブラウザーは、地域固有の小数点区切り文字をグループ化区切りと見なすため解析できず、無効になります。数値列フィルター値にそのような値を入力すると、数値の有効な部分のみがフィルター式に適用されます。詳細については、Firefox 問題を参照してください。
API リファレンス
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。