Web Components Hierarchical Grid 列選択の概要
Web Components Hierarchical Grid の Ignite UI for Web Components 列選択機能は、シングルクリックで列全体を選択してハイライト表示する、簡略化された Excel のような方法を提供します。これは columnSelection
入力を通じて有効にできます。豊富な API のおかげで、この機能により、選択状態の操作、選択された部分からのデータ抽出、データ分析操作、視覚化が簡単に行えます。
Web Components Hierarchical Grid 列選択の例
以下のサンプルは、IgcHierarchicalGridComponent
の 3 種類の列選択動作を示しています。以下の列選択ドロップダウンを使用して、利用可能な各選択モードを有効にします。
*Photo および Debut の列選択が無効になっています。
import { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebHierarchicalGridDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
import SingersData from './SingersData.json';
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 columnSelectionEditor: IgcPropertyEditorPropertyDescriptionComponent
private hierarchicalGrid: IgcHierarchicalGridComponent
private _bind: () => void;
constructor() {
var propertyEditor = this.propertyEditor = document.getElementById('PropertyEditor') as IgcPropertyEditorPanelComponent;
var columnSelectionEditor = this.columnSelectionEditor = document.getElementById('columnSelectionEditor') as IgcPropertyEditorPropertyDescriptionComponent;
var hierarchicalGrid = this.hierarchicalGrid = document.getElementById('hierarchicalGrid') as IgcHierarchicalGridComponent;
this._bind = () => {
propertyEditor.componentRenderer = this.renderer;
propertyEditor.target = this.hierarchicalGrid;
hierarchicalGrid.data = this.singersData;
}
this._bind();
}
private _singersData: any[] = SingersData;
public get singersData(): any[] {
return this._singersData;
}
private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.context;
PropertyEditorPanelDescriptionModule.register(context);
WebHierarchicalGridDescriptionModule.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="options vertical">
<igc-property-editor-panel
name="PropertyEditor"
id="PropertyEditor"
description-type="WebHierarchicalGrid"
is-horizontal="true"
is-wrapping-enabled="true">
<igc-property-editor-property-description
property-path="ColumnSelection"
name="columnSelectionEditor"
id="columnSelectionEditor"
label="Column Selection">
</igc-property-editor-property-description>
</igc-property-editor-panel>
</div>
<div class="container fill">
<igc-hierarchical-grid
auto-generate="false"
name="hierarchicalGrid"
id="hierarchicalGrid"
id="hierarchicalGrid"
primary-key="ID"
allow-filtering="true"
column-selection="single">
<igc-column
field="Artist"
header="Artist">
</igc-column>
<igc-column
field="Photo"
header="Photo"
data-type="image"
selectable="false">
</igc-column>
<igc-column
field="Debut"
header="Debut"
data-type="number"
selectable="false">
</igc-column>
<igc-column
field="GrammyNominations"
header="Grammy Nominations">
</igc-column>
<igc-column
field="GrammyAwards"
header="Grammy Awards">
</igc-column>
<igc-row-island
child-data-key="Albums"
auto-generate="false"
column-selection="single">
<igc-column
field="Album"
header="Album">
</igc-column>
<igc-column
field="LaunchDate"
header="Launch Date"
data-type="date"
selectable="false">
</igc-column>
<igc-column
field="BillboardReview"
header="Billboard Review">
</igc-column>
<igc-column
field="USBillboard200"
header="US Billboard 200">
</igc-column>
<igc-row-island
child-data-key="Songs"
auto-generate="false"
column-selection="single">
<igc-column
field="Number"
header="No.">
</igc-column>
<igc-column
field="Title"
header="Title">
</igc-column>
<igc-column
field="Released"
header="Released"
data-type="date"
selectable="false">
</igc-column>
<igc-column
field="Genre"
header="Genre">
</igc-column>
</igc-row-island>
</igc-row-island>
<igc-row-island
child-data-key="Tours"
auto-generate="false"
column-selection="single">
<igc-column
field="Tour"
header="Tour"
selectable="false">
</igc-column>
<igc-column
field="StartedOn"
header="Started on"
selectable="false">
</igc-column>
<igc-column
field="Location"
header="Location"
selectable="false">
</igc-column>
<igc-column
field="Headliner"
header="Headliner">
</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) { %><script src="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ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
基本的な使用方法
列選択機能は、GridSelectionMode
値を受け取る columnSelection
入力によって有効にすることができます。
インタラクション
デフォルトの選択モードは None
です。Single
または Multiple
に設定されると、すべての列は selectable
になります。列を選択するには、列をクリックして selected
としてマークします。列が選択不可な場合、ホバー時に選択スタイルはヘッダーに適用されません。
複数列ヘッダー機能は selectable 入力に反映されません。その子の 1 つ以上で選択動作が有効な場合、ColumnGroupComponent は selectable です。さらに、すべての selectable 子孫が selected である場合、コンポーネントは selected としてマークされます。
*Location 列グループでは、City 列のみを選択できます。
import 'igniteui-webcomponents-grids/grids/combined';
import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
import HierarchicalCustomers from './HierarchicalCustomers.json';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";
export class Sample {
private hierarchicalGrid1: IgcHierarchicalGridComponent
private _bind: () => void;
constructor() {
var hierarchicalGrid1 = this.hierarchicalGrid1 = document.getElementById('hierarchicalGrid1') as IgcHierarchicalGridComponent;
this._bind = () => {
hierarchicalGrid1.data = this.hierarchicalCustomers;
}
this._bind();
}
private _hierarchicalCustomers: any[] = HierarchicalCustomers;
public get hierarchicalCustomers(): any[] {
return this._hierarchicalCustomers;
}
}
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-hierarchical-grid
column-selection="multiple"
name="hierarchicalGrid1"
id="hierarchicalGrid1">
<igc-column-group
header="General Information">
<igc-column
field="Company"
header="Company">
</igc-column>
<igc-column-group
header="Personal Details">
<igc-column
field="ContactName"
header="Name">
</igc-column>
<igc-column
field="ContactTitle"
header="Title">
</igc-column>
</igc-column-group>
</igc-column-group>
<igc-column-group
header="Address Information">
<igc-column-group
header="Location">
<igc-column
field="Address"
header="Address"
selectable="false">
</igc-column>
<igc-column
field="City"
header="City">
</igc-column>
<igc-column
field="PostalCode"
header="Postal Code"
selectable="false">
</igc-column>
<igc-column
field="Country"
header="Country"
selectable="false">
</igc-column>
</igc-column-group>
<igc-column-group
header="Contact Information">
<igc-column
field="Phone">
</igc-column>
<igc-column
field="Fax">
</igc-column>
</igc-column-group>
</igc-column-group>
<igc-row-island
child-data-key="Orders"
auto-generate="false"
column-selection="multiple">
<igc-column-group
header="Order Information">
<igc-column-group
header="Order Details">
<igc-column
field="OrderID">
</igc-column>
<igc-column
field="EmployeeID">
</igc-column>
<igc-column
field="OrderDate"
data-type="date">
</igc-column>
<igc-column
field="RequiredDate"
data-type="date">
</igc-column>
</igc-column-group>
<igc-column-group
header="General Shipping Information">
<igc-column
field="ShippedDate"
data-type="date">
</igc-column>
<igc-column
field="ShipVia"
selectable="false">
</igc-column>
<igc-column
field="Freight"
selectable="false">
</igc-column>
<igc-column
field="ShipName">
</igc-column>
</igc-column-group>
<igc-column-group
header="Shipping Location">
<igc-column
field="ShipAddress">
</igc-column>
<igc-column
field="ShipCity">
</igc-column>
<igc-column
field="ShipPostalCode">
</igc-column>
<igc-column
field="ShipCountry">
</igc-column>
</igc-column-group>
</igc-column-group>
<igc-row-island
child-data-key="OrderDetails"
auto-generate="false"
column-selection="single">
<igc-column
field="ProductID">
</igc-column>
<igc-column
field="UnitPrice">
</igc-column>
<igc-column
field="Quantity"
selectable="false">
</igc-column>
<igc-column
field="Discount">
</igc-column>
</igc-row-island>
</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) { %><script src="src/index.ts"></script><% } %>
</body>
</html>
html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
キーボードの組み合わせ
キーボードの組み合わせは、グリッドの columnSelection 入力が multiple に設定されている場合にのみ使用できます。
列の選択機能のキーボード ナビゲーションには 2 つのオプションがあります。
- 複数列選択 - Ctrl キーを押しながら、すべての選択可能なヘッダー セルを クリック。
- 範囲列の選択 - Shift キーを押しながら + クリック、間にあるすべての選択可能な列を選択します。
API 操作
API は、非表示列に関していくつかの追加機能を提供し、対応する setter を設定することにより、すべての非表示列を selected
としてマークできます。
上記は ColumnGroupComponent にも適用されますが、selected プロパティを変更する場合、その子孫の状態を変更します。
API 操作の詳細については、API リファレンス セクションを参照してください。
スタイル設定
定義済みのテーマに加えて、利用可能な CSS プロパティのいくつかを設定することで、グリッドをさらにカスタマイズできます。一部の色を変更したい場合は、最初にグリッドの class
を設定する必要があります。
<igc-hierarchical-grid class="grid"></igc-hierarchical-grid>
html
次に、そのクラスに関連する CSS プロパティを設定します。
.grid {
--ig-grid-row-selected-background: #0062A3;
--ig-grid-row-selected-text-color: #ecaa53;
--ig-grid-row-selected-hover-background: #0062A3;
--ig-grid-header-selected-text-color: #ecaa53;
--ig-grid-header-selected-background: #0062A3;
--ig-grid-row-selected-hover-text-color: #ecaa53;
--ig-grid-row-selected-hover-background: #0062A3;
}
css
デモ
import 'igniteui-webcomponents-grids/grids/combined';
import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
import SingersData from './SingersData.json';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";
export class Sample {
private grid: IgcHierarchicalGridComponent
private _bind: () => void;
constructor() {
var grid = this.grid = document.getElementById('grid') as IgcHierarchicalGridComponent;
this._bind = () => {
grid.data = this.singersData;
}
this._bind();
}
private _singersData: any[] = SingersData;
public get singersData(): any[] {
return this._singersData;
}
}
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-hierarchical-grid
auto-generate="false"
name="grid"
id="grid"
id="grid"
primary-key="ID"
allow-filtering="true"
column-selection="single">
<igc-column
field="Artist"
header="Artist">
</igc-column>
<igc-column
field="Photo"
header="Photo"
data-type="image"
selectable="false">
</igc-column>
<igc-column
field="Debut"
header="Debut"
data-type="number"
selectable="false">
</igc-column>
<igc-column
field="GrammyNominations"
header="Grammy Nominations">
</igc-column>
<igc-column
field="GrammyAwards"
header="Grammy Awards">
</igc-column>
<igc-row-island
child-data-key="Albums"
auto-generate="false"
column-selection="multiple">
<igc-column
field="Album"
header="Album">
</igc-column>
<igc-column
field="LaunchDate"
header="Launch Date"
data-type="date"
selectable="false">
</igc-column>
<igc-column
field="BillboardReview"
header="Billboard Review">
</igc-column>
<igc-column
field="USBillboard200"
header="US Billboard 200">
</igc-column>
<igc-row-island
child-data-key="Songs"
auto-generate="false"
column-selection="multiple">
<igc-column
field="Number"
header="No.">
</igc-column>
<igc-column
field="Title"
header="Title">
</igc-column>
<igc-column
field="Released"
header="Released"
data-type="date"
selectable="false">
</igc-column>
<igc-column
field="Genre"
header="Genre">
</igc-column>
</igc-row-island>
</igc-row-island>
<igc-row-island
child-data-key="Tours"
auto-generate="false"
column-selection="single">
<igc-column
field="Tour"
header="Tour"
selectable="false">
</igc-column>
<igc-column
field="StartedOn"
header="Started on"
selectable="false">
</igc-column>
<igc-column
field="Location"
header="Location"
selectable="false">
</igc-column>
<igc-column
field="Headliner"
header="Headliner">
</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) { %><script src="src/index.ts"></script><% } %>
</body>
</html>
html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
#grid {
--ig-grid-row-selected-background: #0062A3;
--ig-grid-row-selected-text-color: #ecaa53;
--ig-grid-row-selected-hover-background: #0062A3;
--ig-grid-header-selected-text-color: #ecaa53;
--ig-grid-header-selected-background: #0062A3;
--ig-grid-row-selected-hover-text-color: #ecaa53;
--ig-grid-row-selected-hover-background: #0062A3;
}
css
API リファレンス
以下は、列選択 UI のその他の API です。
IgcHierarchicalGridComponent
プロパティ:
IgcColumnComponent
プロパティ:
columnGroup
プロパティ:
IgcHierarchicalGridComponent
イベント:
OnColumnsSelectionChange
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。