この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

lightning:treeGrid

データの階層ビューをテーブルに表示します。このコンポーネントでは、API バージョン 42.0 以降が必要です。

属性

lightning:treeGrid コンポーネントは、階層データをテーブルに表示します。外観は lightning:datatable に似ていますが、各行を展開して、ネストされた項目のグループを表示できるところが異なります。ネストされたデータを含む行には、展開したり折りたたんだりできることを示す V 字形アイコンが表示されます。各列は、データ型に基づいて表示できます。たとえば、phone 型を指定すると、tel: URL スキームが付いているハイパーリンクとして電話番号が表示されます。デフォルトの型は text です。

このコンポーネントは、Lightning Design System のツリーからスタイル設定を継承します。

インライン編集と列の並び替えはサポートされていません。次の機能がサポートされています。

適用するデータ型による列の表示と書式設定
ヘッダーレベルのアクション
行の無限スクロール
行レベルのアクション
列のサイズ変更
行の選択
テキストの折り返しとクリッピング

データの初期化は、data、columns、keyField 属性を使用して、init ハンドラで行います。この例では、5 つの列を含むテーブルが作成され、1 列目に行選択のチェックボックスが表示されます。チェックボックスをオンにすると、データの行全体が選択されて、onrowselection イベントハンドラをトリガできます。expandedRows 属性は省略可能で、指定すると、行のネストされた項目を展開します。

1<aura:component>
2    <aura:handler name="init" value="{!this}" action="{!c.init}" />
3    <aura:attribute name="gridColumns" type="List" />
4    <aura:attribute name="gridData" type="Object" />
5    <aura:attribute name="gridExpandedRows" type="Object" />
6    <lightning:treeGrid
7        columns="{! v.gridColumns }"
8        data="{! v.gridData }"
9        expandedRows="{! v.gridExpandedRows }"
10        keyField="name"
11        aura:id="mytree"
12    />
13</aura:component>

クライアント側コントローラは、選択可能な行を作成します。ネストされたデータが含まれる場合も含まれない場合もあります。[取引先所有者] 列には、関連する URL を含む表示ラベルが表示されます。

1({
2    init: function (cmp) {
3        var columns = [
4            {
5                type: 'text',
6                fieldName: 'accountName',
7                label: 'Account Name'
8            },
9            {
10                type: 'number',
11                fieldName: 'employees',
12                label: 'Employees'
13            },
14            {
15                type: 'phone',
16                fieldName: 'phone',
17                label: 'Phone Number'
18            },
19            {
20                type: 'url',
21                fieldName: 'accountOwner',
22                label: 'Account Owner',
23                typeAttributes: {
24                    label: { fieldName: 'accountOwnerName' }
25                }
26            }
27        ];
28        cmp.set('v.gridColumns', columns);
29        var nestedData = [
30            {
31                "name": "123555",
32                "accountName": "Rewis Inc",
33                "employees": 3100,
34                "phone": "837-555-1212",
35                "accountOwner": "http://sfdc.co/jane-doe",
36                "accountOwnerName": "Jane Doe"
37            },
38            {
39                "name": "123556",
40                "accountName": "Acme Corporation",
41                "employees": 10000,
42                "phone": "837-555-1212",
43                "accountOwner": "http://sfdc.co/john-doe",
44                "accountOwnerName": "John Doe",
45                "_children": [
46                    {
47                        "name": "123556-A",
48                        "accountName": "Acme Corporation (Bay Area)",
49                        "employees": 3000,
50                        "phone": "837-555-1212",
51                        "accountOwner": "http://sfdc.co/john-doe",
52                        "accountOwnerName": "John Doe",
53                        "_children": [
54                            {
55                                "name": "123556-A-A",
56                                "accountName": "Acme Corporation (Oakland)",
57                                "employees": 745,
58                                "phone": "837-555-1212",
59                                "accountOwner": "http://sfdc.co/john-doe",
60                                "accountOwnerName": "John Doe"
61                            },
62                            {
63                                "name": "123556-A-B",
64                                "accountName": "Acme Corporation (San Francisco)",
65                                "employees": 578,
66                                "phone": "837-555-1212",
67                                "accountOwner": "http://sfdc.co/jane-doe",
68                                "accountOwnerName": "Jane Doe"
69                            }
70                        ]
71                    }
72                ]
73            },
74        ];
75        cmp.set('v.gridData', nestedData);
76        var expandedRows = ["123556"];
77        cmp.set('v.gridExpandedRows', expandedRows);
78    }
79})

現在どの行が展開されているかを取得するには、getCurrentExpandedRows() メソッドを使用します。

1({
2    getExpandedRows: function(cmp, event, helper) {
3        cmp.set('v.currentExpandedRows', "");
4        var treeGridCmp = cmp.find('mytree');
5        cmp.set('v.currentExpandedRows', treeGridCmp.getCurrentExpandedRows().toString());
6    }
7})

さらに、expandAll() と collapseAll() を使用して、ネストされた項目を切り替えることができます。たとえば、すべてのネストされた項目を展開します。

1({
2    expandAllRows: function(cmp, event) {
3        var tree = cmp.find('mytree');
4        tree.expandAll();
5    }
6})

Apex コントローラを使用したデータの取得

ツリーグリッドを使用すると、取引先を表示し、取引先責任者をネストされた項目として含めることができます。表示する項目を照会する Apex コントローラを作成します。この場合、コントローラは各取引先の取引先責任者を返します。

1public with sharing class AccountController {
2    @AuraEnabled
3    public static List<Account> getAccountContacts(){
4        List<Account> accountcontacts =
5            [SELECT Id, Name, Phone, (SELECT Contact.Name, Phone FROM contacts) FROM Account]; 
6
7        return accountcontacts;
8    }
9}

これを controller 属性によってコンポーネントに結び付けます。keyField は取引先の一意の識別子であるため、必ず Id に設定します。

1<aura:componentcontroller="AccountController">
2    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
3    <aura:attribute name="gridColumns" type="List" />
4    <aura:attribute name="gridData" type="Object" />
5    <lightning:treeGrid columns="{! v.gridColumns }"
6        data="{! v.gridData }"
7        keyField="Id"
8        aura:id="mytree"
9    />
10</aura:component>

クライアント側コントローラは、列を定義し、ヘルパー関数をコールして取引先および取引先責任者のデータを読み込みます。

1({
2    doInit: function (cmp, event, helper) {
3        cmp.set('v.gridColumns', [
4            {label: 'Account Name', fieldName: 'Name', type: 'text'},
5            {label: 'Phone', fieldName: 'Phone', type: 'phone'},
6            ]);
7        helper.getAcctContacts(cmp);
8    }
9})

ヘルパー関数は、Apex コントローラをコールしてレコードデータを照会し、応答データをgridData 属性に設定します。

1({
2    getAcctContacts : function (cmp) {
3        var action = cmp.get("c.getAccountContacts");
4        action.setCallback(this, function(response) {
5            var state = response.getState();
6            if (state === "SUCCESS") {
7                var data = response.getReturnValue();
8                //Change "Contacts" key to "_children"
9                for(var i=0; i<data.length;i++) {
10                    data[i]._children = data[i]['Contacts'];
11                    delete data[i].Contacts; 
12
13                }
14                cmp.set('v.gridData', data);
15            }
16            // error handling when state is "INCOMPLETE" or "ERROR"
17         });
18         $A.enqueueAction(action);
19    }
20})

テーブルには、[取引先名] と [電話] の 2 列が表示されます。取引先責任者が含まれた取引先には、展開してそれらの取引先責任者を表示できることを示す V 字形が表示されます。

列データの操作

次の列プロパティを使用してデータをカスタマイズします。

プロパティ	型	説明
label	string	必須。列ヘッダーに表示されるテキスト表示ラベル。
fieldName	string	必須。列プロパティを関連データに結びつけるための名前。`columns` プロパティはそれぞれ、データ配列の項目に対応している必要があります。
type	string	必須。データ書式設定に使用するデータ型。詳細は、「データ型による書式設定」を参照してください。
initialWidth	integer	初期化されたときの列幅。`minColumnWidth` 値から `maxColumnWidth` 値までの範囲内、またはそれらが指定されていない場合は、50px ～ 1000px の範囲内である必要があります。
typeAttributes	object	データ型のコンポーネント属性にカスタム書式設定を提供します。たとえば、`currency` 型の場合、`currencyCode` です。詳細は、「データ型による書式設定」を参照してください。
cellAttributes	object	出力へのアイコンの追加など、追加のカスタマイズを提供します。詳細は、「列データへのアイコンの追加」を参照してください。
actions	object	アクションのドロップダウンメニューを列に追加します。表示ラベル-名前のペアのリストを渡す必要があります。
iconName	string	アイコンの Lightning Design System 名。名前は `standard:opportunity` の形式で記述します。アイコンはヘッダー表示ラベルの左に追加されます。

データ型による書式設定

テーブルでは、選択された型に基づいて形式が決まります。各データ型は、Lightning 基本コンポーネントに関連付けられています。たとえば、text 型を指定すると、関連データは lightning:formattedText コンポーネントを使用して表示されます。これらのデータ型の一部では、typeAttributes プロパティを介して属性を渡して出力をカスタマイズできます。

テーブルの最初の列では、次のデータ型がサポートされます。

型	説明	サポートされるデータ型の属性
currency	`lightning:formattedNumber` を使用して通貨を表示します。	currencyCode、currencyDisplayAs
date	`lightning:formattedDateTime` を使用してロケールに基づく日付と時刻を表示します。	なし
number	`lightning:formattedNumber` を使用して数値を表示します。	minimumIntegerDigits、minimumFractionDigits、maximumFractionDigits、minimumSignificantDigits、maximumSignificantDigits
percent	`lightning:formattedNumber` を使用してパーセントを表示します。	number 型と同じ
text	`lightning:formattedText` を使用してテキストを表示します。	なし
url	`lightning:formattedUrl` を使用して URL を表示します。	label、target

その他のすべての列では、次のデータ型がサポートされます。

型	説明	サポートされるデータ型の属性
action	`lightning:buttonMenu` を使用してドロップダウンメニューを表示し、アクションをメニュー項目として表示します。	rowActions (必須)、menuAlignment (デフォルトは `right`)
button	`lightning:button` を使用してボタンを表示します。	disabled、iconName、iconPosition、label、name、title、variant
currency	`lightning:formattedNumber` を使用して通貨を表示します。	currencyCode、currencyDisplayAs
date	`lightning:formattedDateTime` を使用してロケールに基づく日付と時刻を表示します。	なし
email	`lightning:formattedEmail` を使用してメールアドレスを表示します。	なし
location	`lightning:formattedLocation` を使用して場所の緯度と経度を表示します。	latitude、longitude
number	`lightning:formattedNumber` を使用して数値を表示します。	minimumIntegerDigits、minimumFractionDigits、maximumFractionDigits、minimumSignificantDigits、maximumSignificantDigits
percent	`lightning:formattedNumber` を使用してパーセントを表示します。	number 型と同じ
phone	`lightning:formattedPhone` を使用して電話番号を表示します。	なし
text	`lightning:formattedText` を使用してテキストを表示します。	なし
url	`lightning:formattedUrl` を使用して URL を表示します。	label、target

データ型に基づいた書式設定をカスタマイズするには、対応する Lightning 基本コンポーネントの属性を渡します。たとえば、カスタム currencyCode 値を渡すと、デフォルトの通貨コードが上書きされます。

1var columns = [
2    {label: 'Amount', fieldName: 'amount', type: 'currency', typeAttributes: { currencyCode: 'EUR' }}
3    // other column data
4]

通貨または日時データ型を使用する場合、ロケールの書式設定が指定されていなければ、デフォルトのユーザロケールが使用されます。これらの属性の詳細は、対応するコンポーネントのドキュメントを参照してください。

ヘッダーレベルのアクションと行レベルのアクションの作成

ヘッダーレベルのアクションとは、データの列に対して実行できるタスクを指し、行レベルのアクションとは、行の更新や削除など、データの行に対して実行できるタスクを指します。lightning:treeGrid でのアクションの作成は、lightning:datatable でのアクションの作成と似ています。詳細は、lightning:datatable のドキュメントを参照してください。

ネストされた項目の非同期読み込み

多数のネストされた項目があるためにデータの読み込みに時間がかかる場合は、ネストされた項目を非同期で読み込むことを検討します。ネストされた項目は、特定の行を展開した場合のみ表示されます。そのためには、ネストされた項目なしでデータを初期化します。

1var mydata = [
2    {
3        "name": "123556-A",
4        "accountName": "Acme Corporation (Bay Area)",
5        :
6        :
7        "_children": []
8    }, //more data
9];

ネストされた項目を別個に定義します。

1childrenData: {
2        "123556-A": [
3            {
4                "name": "123556-A-A",
5                "accountName": "Acme Corporation (Oakland)",
6                :
7                :
8            },
9            {
10                "name": "123556-A-B",
11                "accountName": "Acme Corporation (San Francisco)",
12                :
13                :
14            }
15        ],

行が展開されているときにネストされた項目の非同期読み込みを処理するには ontoggle アクションを使用します。展開されている行の名前を見つけ、ネストされた項目を取得して表示する前に、ネストされた項目のデータがすでにあるかどうかを確認します。

1({
2    handleRowToggle: function(cmp, event, helper) {
3        var rowName = event.getParam('name');
4        var hasChildrenContent = event.getParam('hasChildrenContent');
5        if (!hasChildrenContent) {
6            // Retrieve and display the nested items
7            // by passing in the original data, row name, and data for the nested items
8        }
9    }       
10})

ontoggle アクションは次のパラメータを返します。

パラメータ	型	説明
name	String	切り替える行の一意の ID。
isExpanded	Boolean	行が展開されているかどうかを指定します。
hasChildrenContent	Boolean	この行にネストされている項目のデータがあるかどうかを指定します。
row	Object	切り替える行データ。

テキストの折り返しとクリッピング

列内のテキストを折り返しまたはクリップすることができます。これにより、行を拡張してより多くのコンテンツを表示するか、コンテンツを切り捨てて列内の 1 行に収めることができます。

この 2 つのビューを切り替えるには、列ヘッダーのドロップダウンメニューから [テキストを折り返し] または [テキストをクリップ] を選択します。

デフォルトでは、コンテンツの文字数が列幅で表示できる文字数を超える場合、コンテンツはクリップされます。テキストの折り返しは、次のデータ型でのみサポートされます。

currency
date
email
location
number
percent
phone
text
url

アクセシビリティ

このコンポーネントでは、キーボードを使用するナビゲーションモードとアクションモードがサポートされます。ナビゲーションモードを開始するには、Tab キーを押してテーブルに切り替えます。テーブルボディの最初のデータセルがフォーカスされます。矢印キーを使用して、テーブルを移動します。

アクションモードを開始するには、Enter キーまたはスペースバーを押します。アクションモードでは、列をサイズ変更できます。列のサイズを変更するには、上矢印キーを押してヘッダーに移動します。次に、Tab キーを押して列の仕切りを有効化して、左右矢印を使用して列をサイズ変更します。列のサイズ変更を終了してナビゲーションモードに戻るには、Tab キーを押します。

リンクを含むセルにフォーカスがあるときに Enter キーを押してリンクに移動することは、現在サポートされていません。この制限は、url、phone、email 型のデータを含むセルに適用されます。

メソッド

このコンポーネントは、次のメソッドをサポートします。

collapseAll(): ネストされた項目があるすべての行を折りたたみます。

expandAll(): ネストされた項目があるすべての行を展開します。

getCurrentExpandedRows(): 展開済みとマークされたすべての行の ID を含む配列を返します。

getSelectedRows(): 各選択行のデータを含む配列を返します。

属性名	属性型	説明	必須かどうか
`body`	Component[]	コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。
`class`	String	コンポーネントの基本クラスに加え、外部要素の CSS クラス。
`columns`	List	データ型を定義するために使用される列オブジェクトの配列。必須プロパティには、「label」、「dataKey」、「type」があります。デフォルトの型は「text」です。
`data`	Object	表示するデータの配列。
`expandedRows`	List	展開された行の一意の ID の配列。
`hideCheckboxColumn`	Boolean	行選択のチェックボックス列の非表示または表示。チェックボックス列を非表示にするには、hideCheckboxColumn を true に設定します。デフォルトは false です。
`isLoading`	Boolean	さらに多くのデータを読み込みむかどうかを指定し、読み込む場合はスピナーを表示します。デフォルトは false です。
`keyField`	String	パフォーマンス向上のために必須。各行を一意の ID に関連付けます。	はい
`maxColumnWidth`	Integer	すべての列の最大幅。デフォルト値は 1000px です。
`minColumnWidth`	Integer	すべての列の最小幅。デフォルト値は 50px です。
`onresize`	Action	テーブルに列が最初に表示されるときと特定の列がサイズ変更されるたびにトリガされるアクション。
`onrowaction`	Action	操作がクリックされたときにトリガされるアクション。デフォルトではアクションメニューを閉じます。
`onrowselection`	Action	行が選択されたときにトリガされるアクション。
`ontoggle`	Action	行が切り替えられた (展開された、または折りたたまれた) ときにトリガされるアクション。
`ontoggleall`	Action	すべての行が切り替えられた (展開された、または折りたたまれた) ときにトリガされるアクション。
`resizeColumnDisabled`	Boolean	列のサイズ変更を無効にするかどうかを指定します。デフォルトは false です。
`rowNumberOffset`	Integer	行数のカウントをどの場所から開始するかを決定します。デフォルト値は 0 です。
`selectedRows`	List	選択された行の一意の ID の配列。
`showRowNumberColumn`	Boolean	行番号を表示または非表示にします。行番号列を表示するには、showRowNumberColumn を true に設定します。デフォルトは false です。
`title`	String	マウスポインタが要素に重ねられたときにツールチップテキストを表示します。

Lightning コンポーネント開発者ガイド

lightning:treeGrid

属性