Web Components Tree Grid 行の追加
IgcTreeGridComponent
はインライン行追加や Web Components CRUD 操作のための強力な API を通して便利なデータ操作方法を提供します。グリッドのテンプレートで編集アクションが有効になっている IgcActionStrip
コンポーネントを追加し、ホバーして提供されたボタンを使用するか、ALT + + を押して、行追加 UI を生成するか、ALT + SHIFT + + を押して、選択した行に子を追加するための UI を生成します。
Web Components Tree Grid 行の追加の例
export class EmployeesNestedTreeDataItem {
public constructor (init: Partial<EmployeesNestedTreeDataItem> ) {
Object .assign(this , init);
}
public Age: number ;
public HireDate: string ;
public ID: number ;
public Name: string ;
public Phone: string ;
public OnPTO: boolean ;
public ParentID: number ;
public Title: string ;
}
export class EmployeesNestedTreeData extends Array <EmployeesNestedTreeDataItem > {
public constructor (items: Array <EmployeesNestedTreeDataItem> | number = -1 ) {
if (Array .isArray(items)) {
super (...items);
} else {
const newItems = [
new EmployeesNestedTreeDataItem(
{
Age : 55 ,
HireDate : `2008-03-20` ,
ID : 1 ,
Name : `Johnathan Winchester` ,
Phone : `0251-031259` ,
OnPTO : false ,
ParentID : -1 ,
Title : `Development Manager`
}),
new EmployeesNestedTreeDataItem(
{
Age : 42 ,
HireDate : `2014-01-22` ,
ID : 4 ,
Name : `Ana Sanders` ,
Phone : `(21) 555-0091` ,
OnPTO : true ,
ParentID : -1 ,
Title : `CEO`
}),
new EmployeesNestedTreeDataItem(
{
Age : 49 ,
HireDate : `2014-01-22` ,
ID : 18 ,
Name : `Victoria Lincoln` ,
Phone : `(071) 23 67 22 20` ,
OnPTO : true ,
ParentID : -1 ,
Title : `Accounting Manager`
}),
new EmployeesNestedTreeDataItem(
{
Age : 61 ,
HireDate : `2010-01-01` ,
ID : 10 ,
Name : `Yang Wang` ,
Phone : `(21) 555-0091` ,
OnPTO : false ,
ParentID : -1 ,
Title : `Localization Manager`
}),
new EmployeesNestedTreeDataItem(
{
Age : 43 ,
HireDate : `2011-06-03` ,
ID : 3 ,
Name : `Michael Burke` ,
Phone : `0452-076545` ,
OnPTO : true ,
ParentID : 1 ,
Title : `Senior Software Developer`
}),
new EmployeesNestedTreeDataItem(
{
Age : 29 ,
HireDate : `2009-06-19` ,
ID : 2 ,
Name : `Thomas Anderson` ,
Phone : `(14) 555-8122` ,
OnPTO : false ,
ParentID : 1 ,
Title : `Senior Software Developer`
}),
new EmployeesNestedTreeDataItem(
{
Age : 31 ,
HireDate : `2014-08-18` ,
ID : 11 ,
Name : `Monica Reyes` ,
Phone : `7675-3425` ,
OnPTO : false ,
ParentID : 1 ,
Title : `Software Development Team Lead`
}),
new EmployeesNestedTreeDataItem(
{
Age : 35 ,
HireDate : `2015-09-17` ,
ID : 6 ,
Name : `Roland Mendel` ,
Phone : `(505) 555-5939` ,
OnPTO : false ,
ParentID : 11 ,
Title : `Senior Software Developer`
}),
new EmployeesNestedTreeDataItem(
{
Age : 44 ,
HireDate : `2009-10-11` ,
ID : 12 ,
Name : `Sven Cooper` ,
Phone : `0695-34 67 21` ,
OnPTO : true ,
ParentID : 11 ,
Title : `Senior Software Developer`
}),
new EmployeesNestedTreeDataItem(
{
Age : 44 ,
HireDate : `2014-04-04` ,
ID : 14 ,
Name : `Laurence Johnson` ,
Phone : `981-443655` ,
OnPTO : false ,
ParentID : 4 ,
Title : `Director`
}),
new EmployeesNestedTreeDataItem(
{
Age : 25 ,
HireDate : `2017-11-09` ,
ID : 5 ,
Name : `Elizabeth Richards` ,
Phone : `(2) 283-2951` ,
OnPTO : true ,
ParentID : 4 ,
Title : `Vice President`
}),
new EmployeesNestedTreeDataItem(
{
Age : 39 ,
HireDate : `2010-03-22` ,
ID : 13 ,
Name : `Trevor Ashworth` ,
Phone : `981-443655` ,
OnPTO : true ,
ParentID : 5 ,
Title : `Director`
}),
new EmployeesNestedTreeDataItem(
{
Age : 44 ,
HireDate : `2014-04-04` ,
ID : 17 ,
Name : `Antonio Moreno` ,
Phone : `(505) 555-5939` ,
OnPTO : false ,
ParentID : 18 ,
Title : `Senior Accountant`
}),
new EmployeesNestedTreeDataItem(
{
Age : 50 ,
HireDate : `2007-11-18` ,
ID : 7 ,
Name : `Pedro Rodriguez` ,
Phone : `035-640230` ,
OnPTO : false ,
ParentID : 10 ,
Title : `Senior Localization Developer`
}),
new EmployeesNestedTreeDataItem(
{
Age : 27 ,
HireDate : `2016-02-19` ,
ID : 8 ,
Name : `Casey Harper` ,
Phone : `0342-023176` ,
OnPTO : true ,
ParentID : 10 ,
Title : `Senior Localization`
}),
new EmployeesNestedTreeDataItem(
{
Age : 25 ,
HireDate : `2017-11-09` ,
ID : 15 ,
Name : `Patricia Simpson` ,
Phone : `069-0245984` ,
OnPTO : false ,
ParentID : 7 ,
Title : `Localization Intern`
}),
new EmployeesNestedTreeDataItem(
{
Age : 39 ,
HireDate : `2010-03-22` ,
ID : 9 ,
Name : `Francisco Chang` ,
Phone : `(91) 745 6200` ,
OnPTO : false ,
ParentID : 7 ,
Title : `Localization Intern`
}),
new EmployeesNestedTreeDataItem(
{
Age : 25 ,
HireDate : `2018-03-18` ,
ID : 16 ,
Name : `Peter Lewis` ,
Phone : `069-0245984` ,
OnPTO : true ,
ParentID : 7 ,
Title : `Localization Intern`
}),
];
super (...newItems.slice(0 ));
}
}
}
ts コピー import 'igniteui-webcomponents-grids/grids/combined' ;
import { ComponentRenderer, WebTreeGridDescriptionModule, WebActionStripDescriptionModule } from 'igniteui-webcomponents-core' ;
import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids' ;
import { EmployeesNestedTreeDataItem, EmployeesNestedTreeData } from './EmployeesNestedTreeData' ;
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 .employeesNestedTreeData;
}
this ._bind();
}
private _employeesNestedTreeData: EmployeesNestedTreeData = null ;
public get employeesNestedTreeData (): EmployeesNestedTreeData {
if (this ._employeesNestedTreeData == null )
{
this ._employeesNestedTreeData = new EmployeesNestedTreeData();
}
return this ._employeesNestedTreeData;
}
private _componentRenderer: ComponentRenderer = null ;
public get renderer (): ComponentRenderer {
if (this ._componentRenderer == null ) {
this ._componentRenderer = new ComponentRenderer();
var context = this ._componentRenderer.context;
WebTreeGridDescriptionModule.register(context);
WebActionStripDescriptionModule.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-tree-grid
auto-generate ="false"
name ="treeGrid"
id ="treeGrid"
id ="treeGrid"
primary-key ="ID"
foreign-key ="ParentID"
row-editable ="true" >
<igc-action-strip
>
<igc-grid-editing-actions
add-row ="true"
add-child ="true" >
</igc-grid-editing-actions >
</igc-action-strip >
<igc-column
field ="Name"
header ="Full Name"
data-type ="string"
resizable ="true"
sortable ="true"
filterable ="true"
editable ="true" >
</igc-column >
<igc-column
field ="Age"
data-type ="number"
resizable ="false"
sortable ="false"
filterable ="false"
editable ="true" >
</igc-column >
<igc-column
field ="Title"
data-type ="string"
resizable ="true"
sortable ="true"
filterable ="true"
editable ="true" >
</igc-column >
<igc-column
field ="HireDate"
header ="Hire Date"
data-type ="date"
resizable ="true"
sortable ="true"
filterable ="true"
editable ="true" >
</igc-column >
</igc-tree-grid >
</div >
</div >
</div >
<% if (false) { %><script src ="src/index.ts" > </script > <% } %>
</body >
</html >
html コピー
このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
行追加の使用
次に、バインドしたデータ ソースに IgcTreeGridComponent
を定義をして rowEditable
を true に設定し、編集アクションを有効にした IgcActionStrip
コンポーネントを定義します。addRow
入力は、行追加 UI を生成するボタンの表示状態を制御します。
<igc-tree-grid id ="treeGrid" primary-key ="ID" foreign-key ="ParentID" row-editable ="true" >
<igc-column field ="Name" data-type ="String" > </igc-column >
<igc-column field ="Title" data-type ="String" > </igc-column >
<igc-column field ="HireDate" data-type ="Date" > </igc-column >
<igc-column field ="OnPTO" data-type ="Boolean" width ="130px" >
</igc-column >
<igc-column field ="Age" data-type ="Number" > </igc-column >
<igc-action-strip id ="actionstrip" >
<igc-grid-editing-actions add-row ="true" >
</igc-grid-editing-actions >
</igc-action-strip >
</igc-tree-grid >
html
注 :
プライマリ キーは行追加操作で必須です。
注 :
プライマリ キーを除くすべての列は、デフォルトで行追加 UI で編集可能です。特定の列の編集を無効にする場合、editable
列の入力を false に設定します。
注 :
[行の追加] のボタンの表示状態を制御する IgcGridEditingActions
入力は、アクション ストリップ コンテキスト (タイプ IgcRowType
) を使用して、ボタンが表示するレコードを調整できます。
内部の BaseTransactionService
は IgcTreeGridComponent
に自動的に提供されます。行の状態が送信またはキャンセルされるまで、保留中のセルの変更を保持します。
プログラムで行の追加を開始
IgcTreeGridComponent
を使用すると、2 つの異なるパブリック メソッドを使用して、プログラムで行追加 UI を生成できます。1 つは UI が生成される行を指定するための行 ID を受け入れ、もう 1 つはインデックスによって機能します。これらのメソッドを使用して、現在のデータ ビュー内の任意の場所に UI を生成できます。ページの変更や、たとえばフィルターで除外された行の指定はサポートされていません。
beginAddRowById
を使用するには、RowID
(PK) によって操作のコンテキストとして使用する行を指定する必要があります。このメソッドは、エンドユーザーが指定された行の [行の追加] アクション ストリップ ボタンをクリックしたかのように機能し、その下に UI を生成します。2 番目のパラメーターは、行を子としてコンテキスト行に追加するか、兄弟として追加するかを制御します。最初のパラメーターに null
を渡すことで、UI をグリッドの最初の行としてス生成させることもできます。
this .treeGrid.beginAddRowById('ALFKI' , true );
this .treeGrid.beginAddRowById(null );
typescript
beginAddRowByIndex
メソッドも同様に機能しますが、コンテキストとして使用する行はインデックスによって指定されます。
this .treeGrid.beginAddRowByIndex(10 , true );
this .treeGrid.beginAddRowByIndex(null );
typescript
位置
行追加 UI のデフォルト位置は、エンド ユーザーが [行の追加] ボタンをクリックした行の下にあります。
IgcTreeGridComponent
がスクロールして、行追加 UI が自動的に完全に表示されます。
行追加 UI のオーバーレイは、スクロール中もその位置を維持します。
動作
行追加 UI は、エンド ユーザーに整合性のある編集エクスペリエンスを提供するように設計されているため、行編集 UI と同じ動作をします。詳細については、Tree Grid 行の編集 のトピックを参照してください。
行追加 UI を介して新しい行が追加された後、その位置や表示状態は、IgcTreeGridComponent
のソート、フィルタリングおよびグループ化の状態によって決定されます。これらの状態のいずれも適用されていない IgcTreeGridComponent
では、最後のレコードとして表示されます。スナックバーが短時間表示され、IgcTreeGridComponent
が表示されていない場合にはエンド ユーザーがコントロールの位置までスクロールするためのボタンが含まれています。
キーボード ナビゲーション
ALT + + - 行を追加するために編集モードに入ります。
ALT + SHIFT + + - 子を追加するために編集モードに入ります。
機能の統合
IgcTreeGridComponent
のデータ ビューが変更されると、行追加の操作は停止します。エンド ユーザーが行った変更はすべて送信されます。データ ビューを変更する操作には、ソート、グループ化、フィルタリング、ページングなどが含まれますが、これらに限定されません。
行追加の操作が終了すると、集計が更新されます。同じことが、ソート、フィルタリングなど、他のデータ ビューに依存する機能にも当てはまります。
行追加オーバーレイのカスタマイズ
テキストのカスタマイズ
行追加オーバーレイのテキストのカスタマイズは、RowAddTextDirective
を使用して可能です。
this .grid.rowAddTextTemplate = (ctx: IgcGridEmptyTemplateContext ) => {
return html`Adding Row` ;
}
ts
スタイル設定
行追加 UI は IgcActionStrip
編集操作のボタン、編集エディター、オーバーレイ、エンドユーザーが新しく追加された行にスクロールできるスナックバーが構成されます。これらのコンポーネントのスタイル設定には、それぞれのトピックのガイドを参照してください。
API リファレンス
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。