Web Components Grid フィルタリング
Web Components Grid の Ignite UI for Web Components フィルタリングは、特定の基準または条件に基づいてデータを選択的に表示または非表示にする機能です。IgcGridComponent
コンポーネントが豊富なフィルタリング API とすべてのフィルタリング機能を提供するバインドされたデータ コンテナがあります。ここで利用可能なフィルタリング タイプは次の 3 つです。
Web Components Grid フィルタリングの例
以下のサンプルは、IgcGridComponent
の Excel スタイル フィルタリング ユーザー エクスペリエンスを示しています。
import { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts' ;
import 'igniteui-webcomponents-grids/grids/combined' ;
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebGridDescriptionModule } from 'igniteui-webcomponents-core' ;
import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids' ;
import NwindData from './NwindData.json' ;
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css" ;
import { ModuleManager } from 'igniteui-webcomponents-core' ;
import "./index.css" ;
ModuleManager.register(
IgcPropertyEditorPanelModule
);
export class Sample {
private grid: IgcGridComponent
private _bind: () => void ;
constructor ( ) {
var grid = this .grid = document .getElementById('grid' ) as IgcGridComponent;
this ._bind = () => {
grid.data = this .nwindData;
}
this ._bind();
}
private _nwindData: any [] = NwindData;
public get nwindData (): any [] {
return this ._nwindData;
}
private _componentRenderer: ComponentRenderer = null ;
public get renderer (): ComponentRenderer {
if (this ._componentRenderer == null ) {
this ._componentRenderer = new ComponentRenderer();
var context = this ._componentRenderer.context;
PropertyEditorPanelDescriptionModule.register(context);
WebGridDescriptionModule.register(context);
}
return this ._componentRenderer;
}
}
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-grid
auto-generate ="false"
name ="grid"
id ="grid"
moving ="true"
allow-filtering ="true"
filter-mode ="quickFilter" >
<igc-column
field ="ProductName"
header ="Product Name" >
</igc-column >
<igc-column
field ="QuantityPerUnit"
header ="Quantity Per Unit" >
</igc-column >
<igc-column
field ="UnitPrice"
header ="Unit Price"
data-type ="currency" >
</igc-column >
<igc-column
field ="OrderDate"
header ="Order Date"
data-type ="date" >
</igc-column >
<igc-column
field ="Discontinued"
header ="Discontinued"
data-type ="boolean" >
</igc-column >
</igc-grid >
</div >
</div >
</div >
<% if (false) { %><script src ="src/index.ts" > </script > <% } %>
</body >
</html >
html コピー
このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
設定
フィルタリングが有効かどうか、およびどのフィルタリング モードを使用するかを指定するために、IgcGrid は次のブール プロパティを公開します - allowFiltering
、allowAdvancedFiltering
、filterMode
と filterable
。
以下のオプションは、プロパティ allowFiltering
で指定できます。
false - 対応するグリッドのフィルタリングが無効になります。これがデフォルト値です。
true - 対応するグリッドのフィルタリングが有効になります。
以下のオプションは、プロパティ allowAdvancedFiltering
で指定できます。
false - 対応するグリッドの高度なフィルタリングが無効になります。これがデフォルト値です。
true - 対応するグリッドの高度なフィルタリングが有効になります。
以下のオプションは、プロパティ filterMode
で指定できます。
QuickFilter - 簡易なフィルタリング UI。これがデフォルト値です。
ExcelStyleFilter - Excel のようなフィルタリング UI。
以下のオプションは、プロパティ filterable
で指定できます。
true - 対応する列のフィルタリングが有効になります。これがデフォルト値です。
false - 対応する列のフィルタリングが無効になります。
<igc-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-grid >
html
高度なフィルタリング を有効にするには、allowAdvancedFiltering
入力プロパティを true に設定します。
<igc-grid data ="data" auto-generate ="true" allow-advanced-filtering ="true" >
</igc-grid >
html
IgcGridComponent で QuickFilter または ExcelStyleFilter と高度なフィルタリング ユーザー インターフェイスの両方を有効にできます。両フィルタリング ユーザー インターフェイスは、互いに依存せずに機能します。IgcGridComponent の最終的なフィルター結果は、2 つのフィルター結果の共通部分です。
インタラクション
特定の列のフィルター行を開くには、ヘッダー下のフィルター チップをクリックします。状態を追加するために入力の左側のドロップダウンを使用してフィルター オペランドを選択し、値を入力します。number と date 列には、Equals がデフォルトで選択されます。string には 'Contains'、boolean には 'All' が選択されます。'Enter' を押して条件を確定して他の条件を追加できます。条件チップの間にドロップダウンがあり、それらの間の論理演算子を決定します。'AND' がデフォルトで選択されます。条件の削除はチップの X ボタンをクリックします。編集はチップを選択、入力はチップのデータで生成されます。フィルター行が開いているときにフィルター可能な列のヘッダーをクリックして選択し、フィルター条件を追加できます。
列に適用したフィルターがある場合、フィルター行が閉じられるとチップの閉じるボタンをクリックした条件の削除やいずれかのチップを選択してフィルター行を開くことができます。すべての条件を表示するための十分なスペースがない場合、条件数を示すバッジ付きのフィルター アイコンが表示されます。フィルター行を開くためにクリックできます。
使用方法
デフォルトの定義済みフィルタリングおよび標準のフィルタリング条件があり、カスタム実装で置き換えることも可能です。また、カスタム フィルタリング条件を追加することもできます。IgcGridComponent
には、簡易なフィルター UI と詳細なフィルター オプションがあります。列で設定された dataType
に基づいて、適切なフィルタリング処理 のセットがフィルター UI ドロップダウンに読み込まれます。また、IgnoreCase
と最初の Condition
プロパティを設定できます。
フィルタリング機能は、allowFiltering
入力を true に設定すると IgcGridComponent
コンポーネントで有効になります。デフォルトの filterMode
は QuickFilter
でランタイムでは変更できません 。特定の列でこの機能を無効にするには、filterable
入力を false に設定します。
<igc-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-grid >
html
string 型の値が date データ型の列で使用される場合、IgcGridComponent は値を date オブジェクトに解析しないためフィルター条件は使用できません。string オブジェクトを使用する場合、値を date オブジェクトに解析するためのロジックをアプリケーション レベルで実装する必要があります。
列または複数の列は IgcGridComponent
API でフィルターできます。IgcGridComponent
は、このタスクに複数のメソッドを公開します (filter
、filterGlobal
、clearFilter
.)。
filter
- 単一の列または複数の列をフィルターします。
以下の 5 つのフィルタリング オペランド クラスが公開されます。
this .grid.filter('ProductName' , 'myproduct' , IgcStringFilteringOperand.instance().condition('contains' ), true );
typescript
必要なパラメーターは列フィールド キーとフィルター用語のみです。条件および大文字と小文字の区別を設定しない場合、列プロパティで推測されます。フィルターが複数ある場合、このメソッドはフィルター式の配列を受け取ります。
フィルタリング操作で IgcGridComponent にバインドされているデータ ソースは変更されません。
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
this .grid.filteringLogic = FilteringLogic.Or;
this .grid.filterGlobal('myproduct' , IgcStringFilteringOperand.instance().condition('contains' ), false );
typescript
clearFilter
- 対象列から適用されたフィルターを削除します。引数がない場合、すべての列のフィルターをクリアします。
this .grid.clearFilter('ProductName' );
this .grid.clearFilter();
typescript
初期のフィルター状態
IgcGridComponent
の初期フィルタリング状態の設定は、IgcGridComponent
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
フィルター ロジック
IgcGridComponent
コントロールの filteringLogic
プロパティは IgcGridComponent
で複数の列のフィルターが解決する方法を制御します。IgcGridComponent
API または IgcGridComponent
の入力プロパティによって変更できます。
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-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-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 NwindDataItem {
public constructor (init: Partial<NwindDataItem> ) {
Object .assign(this , init);
}
public ProductID: number ;
public ProductName: string ;
public SupplierID: number ;
public CategoryID: number ;
public QuantityPerUnit: string ;
public UnitPrice: number ;
public UnitsInStock: number ;
public UnitsOnOrder: number ;
public ReorderLevel: number ;
public Discontinued: boolean ;
public OrderDate: string ;
public Rating: number ;
public Locations: NwindDataItem_LocationsItem[];
}
export class NwindDataItem_LocationsItem {
public constructor (init: Partial<NwindDataItem_LocationsItem> ) {
Object .assign(this , init);
}
public Shop: string ;
public LastInventory: string ;
}
export class NwindData extends Array <NwindDataItem > {
public constructor ( ) {
super ();
this .push(new NwindDataItem(
{
ProductID : 1 ,
ProductName : `Chai` ,
SupplierID : 1 ,
CategoryID : 1 ,
QuantityPerUnit : `10 boxes x 20 bags` ,
UnitPrice : 18 ,
UnitsInStock : 39 ,
UnitsOnOrder : 30 ,
ReorderLevel : 10 ,
Discontinued : false ,
OrderDate : `2012-02-12` ,
Rating : 5 ,
Locations : [
new NwindDataItem_LocationsItem(
{
Shop : `Fun-Tasty Co.` ,
LastInventory : `06/12/2018`
}),
new NwindDataItem_LocationsItem(
{
Shop : `Farmer Market` ,
LastInventory : `04/04/2018`
})]
}));
this .push(new NwindDataItem(
{
ProductID : 2 ,
ProductName : `Chang` ,
SupplierID : 1 ,
CategoryID : 1 ,
QuantityPerUnit : `24 - 12 oz bottles` ,
UnitPrice : 19 ,
UnitsInStock : 17 ,
UnitsOnOrder : 40 ,
ReorderLevel : 25 ,
Discontinued : true ,
OrderDate : `2003-03-17` ,
Rating : 5 ,
Locations : [
new NwindDataItem_LocationsItem(
{
Shop : `Super Market` ,
LastInventory : `09/09/2018`
})]
}));
this .push(new NwindDataItem(
{
ProductID : 3 ,
ProductName : `Aniseed Syrup` ,
SupplierID : 1 ,
CategoryID : 2 ,
QuantityPerUnit : `12 - 550 ml bottles` ,
UnitPrice : 10 ,
UnitsInStock : 13 ,
UnitsOnOrder : 70 ,
ReorderLevel : 25 ,
Discontinued : false ,
OrderDate : `2006-03-17` ,
Rating : 3 ,
Locations : [
new NwindDataItem_LocationsItem(
{
Shop : `Farmer Market` ,
LastInventory : `04/04/2018`
}),
new NwindDataItem_LocationsItem(
{
Shop : `Street Market` ,
LastInventory : `12/12/2018`
}),
new NwindDataItem_LocationsItem(
{
Shop : `24/7 Market` ,
LastInventory : `11/11/2018`
})]
}));
this .push(new NwindDataItem(
{
ProductID : 4 ,
ProductName : `Chef Antons Cajun Seasoning` ,
SupplierID : 2 ,
CategoryID : 2 ,
QuantityPerUnit : `48 - 6 oz jars` ,
UnitPrice : 22 ,
UnitsInStock : 53 ,
UnitsOnOrder : 30 ,
ReorderLevel : 0 ,
Discontinued : false ,
OrderDate : `2016-03-17` ,
Rating : 3 ,
Locations : [
new NwindDataItem_LocationsItem(
{
Shop : `Fun-Tasty Co.` ,
LastInventory : `06/12/2018`
}),
new NwindDataItem_LocationsItem(
{
Shop : `Farmer Market` ,
LastInventory : `04/04/2018`
}),
new NwindDataItem_LocationsItem(
{
Shop : `Street Market` ,
LastInventory : `12/12/2018`
})]
}));
this .push(new NwindDataItem(
{
ProductID : 5 ,
ProductName : `Chef Antons Gumbo Mix` ,
SupplierID : 2 ,
CategoryID : 2 ,
QuantityPerUnit : `36 boxes` ,
UnitPrice : 21.35 ,
UnitsInStock : 0 ,
UnitsOnOrder : 30 ,
ReorderLevel : 0 ,
Discontinued : true ,
OrderDate : `2011-11-11` ,
Rating : 5 ,
Locations : [
new NwindDataItem_LocationsItem(
{
Shop : `Super Market` ,
LastInventory : `09/09/2018`
})]
}));
this .push(new NwindDataItem(
{
ProductID : 6 ,
ProductName : `Grandmas Boysenberry Spread` ,
SupplierID : 3 ,
CategoryID : 2 ,
QuantityPerUnit : `12 - 8 oz jars` ,
UnitPrice : 25 ,
UnitsInStock : 0 ,
UnitsOnOrder : 30 ,
ReorderLevel : 25 ,
Discontinued : false ,
OrderDate : `2017-12-17` ,
Rating : 4 ,
Locations : [
new NwindDataItem_LocationsItem(
{
Shop : `Super Market` ,
LastInventory : `09/09/2018`
})]
}));
this .push(new NwindDataItem(
{
ProductID : 7 ,
ProductName : `Uncle Bobs Organic Dried Pears` ,
SupplierID : 3 ,
CategoryID : 7 ,
QuantityPerUnit : `12 - 1 lb pkgs.` ,
UnitPrice : 30 ,
UnitsInStock : 150 ,
UnitsOnOrder : 30 ,
ReorderLevel : 10 ,
Discontinued : false ,
OrderDate : `2016-07-17` ,
Rating : 5 ,
Locations : [
new NwindDataItem_LocationsItem(
{
Shop : `Fun-Tasty Co.` ,
LastInventory : `06/12/2018`
}),
new NwindDataItem_LocationsItem(
{
Shop : `Farmer Market` ,
LastInventory : `04/04/2018`
}),
new NwindDataItem_LocationsItem(
{
Shop : `Street Market` ,
LastInventory : `12/12/2018`
})]
}));
this .push(new NwindDataItem(
{
ProductID : 8 ,
ProductName : `Northwoods Cranberry Sauce` ,
SupplierID : 3 ,
CategoryID : 2 ,
QuantityPerUnit : `12 - 12 oz jars` ,
UnitPrice : 40 ,
UnitsInStock : 6 ,
UnitsOnOrder : 30 ,
ReorderLevel : 0 ,
Discontinued : false ,
OrderDate : `2018-01-17` ,
Rating : 4 ,
Locations : [
new NwindDataItem_LocationsItem(
{
Shop : `Fun-Tasty Co.` ,
LastInventory : `06/12/2018`
}),
new NwindDataItem_LocationsItem(
{
Shop : `Farmer Market` ,
LastInventory : `04/04/2018`
})]
}));
this .push(new NwindDataItem(
{
ProductID : 9 ,
ProductName : `Mishi Kobe Niku` ,
SupplierID : 4 ,
CategoryID : 6 ,
QuantityPerUnit : `18 - 500 g pkgs.` ,
UnitPrice : 97 ,
UnitsInStock : 29 ,
UnitsOnOrder : 30 ,
ReorderLevel : 0 ,
Discontinued : true ,
OrderDate : `2010-02-17` ,
Rating : 4 ,
Locations : [
new NwindDataItem_LocationsItem(
{
Shop : `Farmer Market` ,
LastInventory : `04/04/2018`
})]
}));
this .push(new NwindDataItem(
{
ProductID : 10 ,
ProductName : `Ikura` ,
SupplierID : 4 ,
CategoryID : 8 ,
QuantityPerUnit : `12 - 200 ml jars` ,
UnitPrice : 31 ,
UnitsInStock : 31 ,
UnitsOnOrder : 30 ,
ReorderLevel : 0 ,
Discontinued : false ,
OrderDate : `2008-05-17` ,
Rating : 3 ,
Locations : [
new NwindDataItem_LocationsItem(
{
Shop : `Wall Market` ,
LastInventory : `12/06/2018`
})]
}));
this .push(new NwindDataItem(
{
ProductID : 11 ,
ProductName : `Queso Cabrales` ,
SupplierID : 5 ,
CategoryID : 4 ,
QuantityPerUnit : `1 kg pkg.` ,
UnitPrice : 21 ,
UnitsInStock : 22 ,
UnitsOnOrder : 30 ,
ReorderLevel : 30 ,
Discontinued : false ,
OrderDate : `2009-01-17` ,
Rating : 5 ,
Locations : [
new NwindDataItem_LocationsItem(
{
Shop : `Fun-Tasty Co.` ,
LastInventory : `06/12/2018`
}),
new NwindDataItem_LocationsItem(
{
Shop : `Farmer Market` ,
LastInventory : `04/04/2018`
})]
}));
this .push(new NwindDataItem(
{
ProductID : 12 ,
ProductName : `Queso Manchego La Pastora` ,
SupplierID : 5 ,
CategoryID : 4 ,
QuantityPerUnit : `10 - 500 g pkgs.` ,
UnitPrice : 38 ,
UnitsInStock : 86 ,
UnitsOnOrder : 30 ,
ReorderLevel : 0 ,
Discontinued : false ,
OrderDate : `2015-11-17` ,
Rating : 3 ,
Locations : [
new NwindDataItem_LocationsItem(
{
Shop : `Farmer Market` ,
LastInventory : `04/04/2018`
})]
}));
this .push(new NwindDataItem(
{
ProductID : 13 ,
ProductName : `Konbu` ,
SupplierID : 6 ,
CategoryID : 8 ,
QuantityPerUnit : `2 kg box` ,
UnitPrice : 6 ,
UnitsInStock : 24 ,
UnitsOnOrder : 30 ,
ReorderLevel : 5 ,
Discontinued : false ,
OrderDate : `2015-03-17` ,
Rating : 2 ,
Locations : [
new NwindDataItem_LocationsItem(
{
Shop : `Super Market` ,
LastInventory : `09/09/2018`
})]
}));
this .push(new NwindDataItem(
{
ProductID : 14 ,
ProductName : `Tofu` ,
SupplierID : 6 ,
CategoryID : 7 ,
QuantityPerUnit : `40 - 100 g pkgs.` ,
UnitPrice : 23.25 ,
UnitsInStock : 35 ,
UnitsOnOrder : 30 ,
ReorderLevel : 0 ,
Discontinued : false ,
OrderDate : `2017-06-17` ,
Rating : 4 ,
Locations : [
new NwindDataItem_LocationsItem(
{
Shop : `Farmer Market` ,
LastInventory : `04/04/2018`
}),
new NwindDataItem_LocationsItem(
{
Shop : `Street Market` ,
LastInventory : `12/12/2018`
})]
}));
this .push(new NwindDataItem(
{
ProductID : 15 ,
ProductName : `Genen Shouyu` ,
SupplierID : 6 ,
CategoryID : 2 ,
QuantityPerUnit : `24 - 250 ml bottles` ,
UnitPrice : 15.5 ,
UnitsInStock : 39 ,
UnitsOnOrder : 30 ,
ReorderLevel : 5 ,
Discontinued : false ,
OrderDate : `2014-03-17` ,
Rating : 4 ,
Locations : [
new NwindDataItem_LocationsItem(
{
Shop : `Local Market` ,
LastInventory : `07/03/2018`
}),
new NwindDataItem_LocationsItem(
{
Shop : `Wall Market` ,
LastInventory : `12/06/2018`
})]
}));
this .push(new NwindDataItem(
{
ProductID : 16 ,
ProductName : `Pavlova` ,
SupplierID : 7 ,
CategoryID : 3 ,
QuantityPerUnit : `32 - 500 g boxes` ,
UnitPrice : 17.45 ,
UnitsInStock : 29 ,
UnitsOnOrder : 30 ,
ReorderLevel : 10 ,
Discontinued : false ,
OrderDate : `2018-03-28` ,
Rating : 2 ,
Locations : [
new NwindDataItem_LocationsItem(
{
Shop : `Farmer Market` ,
LastInventory : `04/04/2018`
}),
new NwindDataItem_LocationsItem(
{
Shop : `Street Market` ,
LastInventory : `12/12/2018`
}),
new NwindDataItem_LocationsItem(
{
Shop : `24/7 Market` ,
LastInventory : `11/11/2018`
})]
}));
this .push(new NwindDataItem(
{
ProductID : 17 ,
ProductName : `Alice Mutton` ,
SupplierID : 7 ,
CategoryID : 6 ,
QuantityPerUnit : `20 - 1 kg tins` ,
UnitPrice : 39 ,
UnitsInStock : 0 ,
UnitsOnOrder : 30 ,
ReorderLevel : 0 ,
Discontinued : true ,
OrderDate : `2015-08-17` ,
Rating : 2 ,
Locations : [
new NwindDataItem_LocationsItem(
{
Shop : `Farmer Market` ,
LastInventory : `04/04/2018`
})]
}));
this .push(new NwindDataItem(
{
ProductID : 18 ,
ProductName : `Carnarvon Tigers` ,
SupplierID : 7 ,
CategoryID : 8 ,
QuantityPerUnit : `16 kg pkg.` ,
UnitPrice : 62.5 ,
UnitsInStock : 42 ,
UnitsOnOrder : 30 ,
ReorderLevel : 0 ,
Discontinued : false ,
OrderDate : `2005-09-27` ,
Rating : 2 ,
Locations : [
new NwindDataItem_LocationsItem(
{
Shop : `24/7 Market` ,
LastInventory : `11/11/2018`
}),
new NwindDataItem_LocationsItem(
{
Shop : `Super Market` ,
LastInventory : `09/09/2018`
})]
}));
this .push(new NwindDataItem(
{
ProductID : 19 ,
ProductName : `Teatime Chocolate Biscuits` ,
SupplierID : 8 ,
CategoryID : 3 ,
QuantityPerUnit : `` ,
UnitPrice : 9.2 ,
UnitsInStock : 25 ,
UnitsOnOrder : 30 ,
ReorderLevel : 5 ,
Discontinued : false ,
OrderDate : `2001-03-17` ,
Rating : 2 ,
Locations : [
new NwindDataItem_LocationsItem(
{
Shop : `Local Market` ,
LastInventory : `07/03/2018`
})]
}));
this .push(new NwindDataItem(
{
ProductID : 20 ,
ProductName : `Sir Rodneys Marmalade` ,
SupplierID : 8 ,
CategoryID : 3 ,
QuantityPerUnit : `4 - 100 ml jars` ,
UnitPrice : 4.5 ,
UnitsInStock : 40 ,
UnitsOnOrder : 30 ,
ReorderLevel : 0 ,
Discontinued : false ,
OrderDate : `2005-03-17` ,
Rating : 5 ,
Locations : [
new NwindDataItem_LocationsItem(
{
Shop : `Super Market` ,
LastInventory : `09/09/2018`
})]
}));
}
}
ts コピー import { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts' ;
import 'igniteui-webcomponents-grids/grids/combined' ;
import { IgcGridComponent, IgcColumnComponent, IgcStringFilteringOperand, IgcFilteringOperand, IgcFilteringOperation, IgcBooleanFilteringOperand } from 'igniteui-webcomponents-grids/grids' ;
import { NwindDataItem, NwindDataItem_LocationsItem, NwindData } from './NwindData' ;
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css" ;
export class Sample {
private grid: IgcGridComponent
private productName: IgcColumnComponent
private quantityPerUnit: IgcColumnComponent
private unitPrice: IgcColumnComponent
private orderDate: IgcColumnComponent
private discontinued: IgcColumnComponent
private _bind: () => void ;
public caseSensitiveFilteringOperand = CaseSensitiveFilteringOperand.instance();
public booleanFilteringOperand = BooleanFilteringOperand.instance();
constructor ( ) {
var grid = this .grid = document .getElementById('grid' ) as IgcGridComponent;
var productName = this .productName = document .getElementById('ProductName' ) as IgcColumnComponent;
var quantityPerUnit = this .quantityPerUnit = document .getElementById('QuantityPerUnit' ) as IgcColumnComponent;
var unitPrice = this .unitPrice = document .getElementById('UnitPrice' ) as IgcColumnComponent;
var orderDate = this .orderDate = document .getElementById('OrderDate' ) as IgcColumnComponent;
var discontinued = this .discontinued = document .getElementById('Discontinued' ) as IgcColumnComponent;
this ._bind = () => {
grid.data = this .nwindData;
productName.filters = this .caseSensitiveFilteringOperand;
discontinued.filters = this .booleanFilteringOperand;
}
this ._bind();
}
private _nwindData: NwindData = null ;
public get nwindData (): NwindData {
if (this ._nwindData == null )
{
this ._nwindData = new NwindData();
}
return this ._nwindData;
}
}
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: IgcFilteringOperation[] = [
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-grid
auto-generate ="false"
name ="grid"
id ="grid"
moving ="true"
allow-filtering ="true" >
<igc-column
name ="ProductName"
id ="ProductName"
field ="ProductName"
header ="Product Name" >
</igc-column >
<igc-column
name ="QuantityPerUnit"
id ="QuantityPerUnit"
field ="QuantityPerUnit"
header ="Quantity Per Unit" >
</igc-column >
<igc-column
name ="UnitPrice"
id ="UnitPrice"
field ="UnitPrice"
header ="Unit Price"
data-type ="currency" >
</igc-column >
<igc-column
name ="OrderDate"
id ="OrderDate"
field ="OrderDate"
header ="Order Date"
data-type ="date" >
</igc-column >
<igc-column
name ="Discontinued"
id ="Discontinued"
field ="Discontinued"
header ="Discontinued"
data-type ="boolean" >
</igc-column >
</igc-grid >
</div >
</div >
</div >
<% if (false) { %><script src ="src/index.ts" > </script > <% } %>
</body >
</html >
html コピー
スタイル設定
定義済みのテーマに加えて、利用可能な CSS プロパティ のいくつかを設定することで、グリッドをさらにカスタマイズできます。
一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。
<igc-grid class ="grid" > </igc-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
デモ
import { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts' ;
import 'igniteui-webcomponents-grids/grids/combined' ;
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebGridDescriptionModule } from 'igniteui-webcomponents-core' ;
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts' ;
import { IgcGridComponent, IgcColumnComponent, IgcColumnPipeArgs } from 'igniteui-webcomponents-grids/grids' ;
import NwindData from './NwindData.json' ;
import { IgcPropertyEditorPropertyDescriptionChangedEventArgs } from 'igniteui-webcomponents-layouts' ;
import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids' ;
import { html, nothing } from 'lit-html' ;
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css" ;
import 'igniteui-webcomponents/themes/light/bootstrap.css' ;
import { defineAllComponents } from 'igniteui-webcomponents' ;
import { ModuleManager } from 'igniteui-webcomponents-core' ;
defineAllComponents();
import "./index.css" ;
ModuleManager.register(
IgcPropertyEditorPanelModule
);
export class Sample {
private propertyEditor: IgcPropertyEditorPanelComponent
private sizeEditor: IgcPropertyEditorPropertyDescriptionComponent
private grid: IgcGridComponent
private column1: IgcColumnComponent
private _columnPipeArgs1: IgcColumnPipeArgs | null = null ;
public get columnPipeArgs1 (): IgcColumnPipeArgs {
if (this ._columnPipeArgs1 == null )
{
var columnPipeArgs1: IgcColumnPipeArgs = {} as IgcColumnPipeArgs;
columnPipeArgs1.digitsInfo = "1.2-2" ;
this ._columnPipeArgs1 = columnPipeArgs1;
}
return this ._columnPipeArgs1;
}
private column2: IgcColumnComponent
private _columnPipeArgs2: IgcColumnPipeArgs | null = null ;
public get columnPipeArgs2 (): IgcColumnPipeArgs {
if (this ._columnPipeArgs2 == null )
{
var columnPipeArgs2: IgcColumnPipeArgs = {} as IgcColumnPipeArgs;
columnPipeArgs2.format = "MM/dd/YYYY" ;
this ._columnPipeArgs2 = columnPipeArgs2;
}
return this ._columnPipeArgs2;
}
private column3: IgcColumnComponent
private _bind: () => void ;
constructor ( ) {
var propertyEditor = this .propertyEditor = document .getElementById('PropertyEditor' ) as IgcPropertyEditorPanelComponent;
var sizeEditor = this .sizeEditor = document .getElementById('SizeEditor' ) as IgcPropertyEditorPropertyDescriptionComponent;
this .webGridSetGridSize = this .webGridSetGridSize.bind(this );
var grid = this .grid = document .getElementById('grid' ) as IgcGridComponent;
var column1 = this .column1 = document .getElementById('column1' ) as IgcColumnComponent;
var column2 = this .column2 = document .getElementById('column2' ) as IgcColumnComponent;
var column3 = this .column3 = document .getElementById('column3' ) as IgcColumnComponent;
this ._bind = () => {
propertyEditor.componentRenderer = this .renderer;
propertyEditor.target = this .grid;
sizeEditor.changed = this .webGridSetGridSize;
grid.data = this .nwindData;
column1.pipeArgs = this .columnPipeArgs1;
column2.pipeArgs = this .columnPipeArgs2;
column3.bodyTemplate = this .webGridBooleanCellTemplate;
}
this ._bind();
}
private _nwindData: any [] = NwindData;
public get nwindData (): any [] {
return this ._nwindData;
}
private _componentRenderer: ComponentRenderer = null ;
public get renderer (): ComponentRenderer {
if (this ._componentRenderer == null ) {
this ._componentRenderer = new ComponentRenderer();
var context = this ._componentRenderer.context;
PropertyEditorPanelDescriptionModule.register(context);
WebGridDescriptionModule.register(context);
}
return this ._componentRenderer;
}
public webGridSetGridSize(sender: any , args : IgcPropertyEditorPropertyDescriptionChangedEventArgs): void {
var newVal = (args.newValue as string ).toLowerCase();
var grid = document .getElementById("grid" );
grid.style.setProperty('--ig-size' , `var(--ig-size-${newVal} )` );
}
public webGridBooleanCellTemplate = (ctx: IgcCellTemplateContext ) => {
if (ctx.cell.value) {
return html`<img src ="https://static.infragistics.com/xplatform/images/grid/active.png" title ="Continued" alt ="Continued" /> `
} else {
return html`<img src ="https://static.infragistics.com/xplatform/images/grid/expired.png" title ="Discontinued" alt ="Discontinued" /> ` ;
}
}
}
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 ="options vertical" >
<igc-property-editor-panel
name ="PropertyEditor"
id ="PropertyEditor"
description-type ="WebGrid"
is-horizontal ="true"
is-wrapping-enabled ="true" >
<igc-property-editor-property-description
name ="SizeEditor"
id ="SizeEditor"
label ="Grid Size:"
value-type ="EnumValue"
drop-down-names ="Small, Medium, Large"
drop-down-values ="Small, Medium, Large" >
</igc-property-editor-property-description >
</igc-property-editor-panel >
</div >
<div class ="container fill" >
<igc-grid
auto-generate ="false"
name ="grid"
id ="grid"
id ="grid"
moving ="true"
allow-filtering ="true"
filter-mode ="excelStyleFilter" >
<igc-grid-toolbar
>
<igc-grid-toolbar-actions
>
<igc-grid-toolbar-hiding
>
</igc-grid-toolbar-hiding >
</igc-grid-toolbar-actions >
</igc-grid-toolbar >
<igc-column
field ="ProductName"
header ="Product Name"
sortable ="true" >
</igc-column >
<igc-column
field ="QuantityPerUnit"
header ="Quantity Per Unit"
sortable ="true" >
</igc-column >
<igc-column
field ="UnitPrice"
header ="Unit Price"
data-type ="currency"
sortable ="true"
name ="column1"
id ="column1" >
</igc-column >
<igc-column
field ="OrderDate"
header ="Order Date"
data-type ="date"
sortable ="true"
name ="column2"
id ="column2" >
</igc-column >
<igc-column
field ="Discontinued"
header ="Discontinued"
sortable ="true"
name ="column3"
id ="column3" >
</igc-column >
</igc-grid >
</div >
</div >
</div >
<% if (false) { %><script src ="src/index.ts" > </script > <% } %>
</body >
</html >
html コピー
#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 コピー
既知の問題と制限
Firefox などの一部のブラウザーは、地域固有の小数点区切り文字をグループ化区切りと見なすため解析できず、無効になります。数値列フィルター値にそのような値を入力すると、数値の有効な部分のみがフィルター式に適用されます。詳細については、Firefox 問題を参照してください。
API リファレンス
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。