ui.igTreeGridMultiColumnHeaders
igTreeGrid で複数列ヘッダー機能があります。非表示、サイズ変更、および列移動機能と結合するヘッダー グループ化を提供します。この API のクラス、オプション、イベント、メソッドおよびテーマに関する詳細は、上記の関連するタブを参照してください。
この API を使用して作業を開始するための情報はここをクリックしてください。igGrid コントロールの必要なスクリプトおよびテーマを参照する方法については、 「Ignite UI で JavaScript リソースを使用する」および「Ignite UI のスタイル設定とテーマ」を参照してください。
コード サンプル
<!DOCTYPE html>
<html>
<head>
<!-- Infragistics Combined CSS -->
<link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
<link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />
<!-- jQuery Core -->
<script src="js/jquery.js" type="text/javascript"></script>
<!-- jQuery UI -->
<script src="js/jquery-ui.js" type="text/javascript"></script>
<!-- Infragistics Combined Scripts -->
<script src="js/infragistics.core.js" type="text/javascript"></script>
<script src="js/infragistics.lob.js" type="text/javascript"></script>
<script type="text/javascript">
var employees = [
{ "employeeId": 0, "supervisorId": -1, "firstName": "Andrew", "lastName": "Fuller" },
{ "employeeId": 1, "supervisorId": -1, "firstName": "Jonathan", "lastName": "Smith" },
{ "employeeId": 2, "supervisorId": -1, "firstName": "Nancy", "lastName": "Davolio" },
{ "employeeId": 3, "supervisorId": -1, "firstName": "Steven", "lastName": "Buchanan" },
// Andrew Fuller's direct reports
{ "employeeId": 4, "supervisorId": 0, "firstName": "Janet", "lastName": "Leverling" },
{ "employeeId": 5, "supervisorId": 0, "firstName": "Laura", "lastName": "Callahan" },
{ "employeeId": 6, "supervisorId": 0, "firstName": "Margaret", "lastName": "Peacock" },
{ "employeeId": 7, "supervisorId": 0, "firstName": "Michael", "lastName": "Suyama" },
// Janet Leverling's direct reports
{ "employeeId": 8, "supervisorId": 4, "firstName": "Anne", "lastName": "Dodsworth" },
{ "employeeId": 9, "supervisorId": 4, "firstName": "Danielle", "lastName": "Davis" },
{ "employeeId": 10, "supervisorId": 4, "firstName": "Robert", "lastName": "King" },
// Nancy Davolio's direct reports
{ "employeeId": 11, "supervisorId": 2, "firstName": "Peter", "lastName": "Lewis" },
{ "employeeId": 12, "supervisorId": 2, "firstName": "Ryder", "lastName": "Zenaida" },
{ "employeeId": 13, "supervisorId": 2, "firstName": "Wang", "lastName": "Mercedes" },
// Steve Buchanan's direct reports
{ "employeeId": 14, "supervisorId": 3, "firstName": "Theodore", "lastName": "Zia" },
{ "employeeId": 15, "supervisorId": 3, "firstName": "Lacota", "lastName": "Mufutau" },
// Lacota Mufutau's direct reports
{ "employeeId": 16, "supervisorId": 15, "firstName": "Jin", "lastName": "Elliott" },
{ "employeeId": 17, "supervisorId": 15, "firstName": "Armand", "lastName": "Ross" },
{ "employeeId": 18, "supervisorId": 15, "firstName": "Dane", "lastName": "Rodriquez" },
// Dane Rodriquez's direct reports
{ "employeeId": 19, "supervisorId": 18, "firstName": "Declan", "lastName": "Lester" },
{ "employeeId": 20, "supervisorId": 18, "firstName": "Bernard", "lastName": "Jarvis" },
// Bernard Jarvis' direct report
{ "employeeId": 21, "supervisorId": 20, "firstName": "Jeremy", "lastName": "Donaldson" }
];
$(function () {
$("#treegrid").igTreeGrid({
dataSource: employees,
primaryKey: "employeeId",
foreignKey: "supervisorId",
autoGenerateColumns: false,
columns: [
{ headerText: "ID", key: "employeeId", width: "150px", dataType: "number" },
{
headerText: "Name", key: "fullName", datatype: "string", group: [
{ headerText: "First", key: "firstName", width: "150px", dataType: "string" },
{ headerText: "Last", key: "lastName", width: "150px", dataType: "string" }
]
}],
featues: [{
name: "MultiColumnHeaders"
}]
});
});
</script>
</head>
<body>
<table id="treegrid"></table>
</body>
</html>
関連トピック
依存関係
jquery-1.9.1.js
jquery.ui.core.js
jquery.ui.widget.js
infragistics.datasource.js
infragistics.ui.shared.js
infragistics.ui.treegrid.js
infragistics.util.js
infragistics.ui.grid.framework.js
infragistics.ui.grid.multicolumnheaders.js
このコントロールにオプションはありません。
Ignite UI コントロール イベントの詳細については、
Ignite UI でイベントを使用するを参照してください。
注:
API メソッドの呼び出しは、API ヘルプに特に記述がない限り、操作に関連するイベントはプログラムによって発生されません。これらのイベントは各ユーザー操作によってのみ呼び出されます。
詳細の表示
-
groupCollapsed
継承- キャンセル可能:
- false
グループの縮小が実行され結果が描画された後に発生するイベント。
コード サンプル
//Bind after initialization $(document).on("igtreegridmulticolumnheadersgroupcollapsed", ".selector", function (evt, ui) { // return the triggered event evt; // a reference to the igTreeGridMultiColumnHeaders widget ui.owner; // the column object for the current group that is collapsed ui.column; // a reference to the jQuery object for the column being collapsed (th) ui.element }); //Initialize $(".selector").igTreeGrid({ features : [ { name : "MultiColumnHeaders", groupCollapsed: function (evt, ui) { ... } } ] }); -
groupCollapsing
継承- キャンセル可能:
- true
グループの縮小操作が実行される前に発生するイベント。
コード サンプル
//Bind after initialization $(document).on("igtreegridmulticolumnheadersgroupcollapsing", ".selector", function (evt, ui) { // return the triggered event evt; // a reference to the igTreeGridMultiColumnHeaders widget ui.owner; // the column object for the current group that is collapsing ui.column; // a reference to the jQuery object for the column being collapsing (th) ui.element }); //Initialize $(".selector").igTreeGrid({ features : [ { name : "MultiColumnHeaders", groupCollapsing: function (evt, ui) { ... } } ] }); -
groupExpanded
継承- キャンセル可能:
- false
グループの展開が実行され結果が描画された後に発生するイベント。
コード サンプル
//Bind after initialization $(document).on("igtreegridmulticolumnheadersgroupexpanded", ".selector", function (evt, ui) { // return the triggered event evt; // a reference to the igTreeGridMultiColumnHeaders widget ui.owner; // the column object for the current group that is expanded ui.column; // a reference to the jQuery object for the column being expanded (th) ui.element }); //Initialize $(".selector").igTreeGrid({ features : [ { name : "MultiColumnHeaders", groupExpanded: function (evt, ui) { ... } } ] }); -
groupExpanding
継承- キャンセル可能:
- true
グループの展開操作が実行される前に発生するイベント。
コード サンプル
//Bind after initialization $(document).on("igtreegridmulticolumnheadersgroupexpanded", ".selector", function (evt, ui) { // return the triggered event evt; // a reference to the igTreeGridMultiColumnHeaders widget ui.owner; // the column object for the current group that is expanding ui.column; // a reference to the jQuery object for the column being expanded (th) ui.element }); //Initialize $(".selector").igTreeGrid({ features : [ { name : "MultiColumnHeaders", groupExpanded: function (evt, ui) { ... } } ] });
-
changeLocale
継承- .igTreeGridMultiColumnHeaders( "changeLocale" );
ウィジェット要素のすべてのロケールを options.language に指定される言語に変更します。
注: このメソッドは珍しいシナリオのみで使用されます。language または locale オプションのセッターを参照してください。コード サンプル
$(".selector").igTreeGridMultiColumnHeaders("changeLocale"); -
collapseGroup
継承- .igTreeGridMultiColumnHeaders( "collapseGroup", groupKey:string, [callback:function] );
展開されたグループを縮小します。 グループが縮小される場合、このメソッドは何もしません。
注: このメソッドは非同期です。ただちに返し、以後のコードは並行して実行されます。 ランタイム エラーを発生する場合があります。 エラーを回避するには、メソッドによって提供されるコールバック パラメーターに以後のコードを挿入します。- groupKey
- タイプ:string
- グループのキー。
- callback
- タイプ:function
- オプション
- グループを縮小したときに呼び出すカスタム関数を指定します。
コード サンプル
$(".selector").igTreeGridMultiColumnHeaders("collapseGroup", "groupKey"); -
destroy
- .igTreeGridMultiColumnHeaders( "destroy" );
複数列ウィジェットを破棄します。
コード サンプル
$(".selector").igTreeGridMultiColumnHeaders("destroy"); -
expandGroup
継承- .igTreeGridMultiColumnHeaders( "expandGroup", groupKey:string, [callback:function] );
縮小されたグループを展開します。 グループが展開される場合、このメソッドは何もしません。
注: このメソッドは非同期です。ただちに返し、以後のコードは並行して実行されます。 ランタイム エラーを発生する場合があります。 エラーを回避するには、メソッドによって提供されるコールバック パラメーターに以後のコードを挿入します。- groupKey
- タイプ:string
- グループのキー。
- callback
- タイプ:function
- オプション
- グループを展開したときに呼び出すカスタム関数を指定します。
コード サンプル
$(".selector").igTreeGridMultiColumnHeaders("expandGroup", "groupKey"); -
getMultiColumnHeaders
継承- .igTreeGridMultiColumnHeaders( "getMultiColumnHeaders" );
- 返却型:
- array
- 返却型の説明:
- 列の配列。
複数ヘッダーの配列を返します。複数ヘッダーがない場合、undefined を返します。
コード サンプル
var columns = $(".selector").igTreeGridMultiColumnHeaders("getMultiColumnHeaders"); -
toggleGroup
継承- .igTreeGridMultiColumnHeaders( "toggleGroup", groupKey:string, [callback:function] );
グループを切り替えます。
注: このメソッドは非同期です。ただちに返し、以後のコードは並行して実行されます。 ランタイム エラーを発生する場合があります。 エラーを回避するには、メソッドによって提供されるコールバック パラメーターに以後のコードを挿入します。- groupKey
- タイプ:string
- グループのキー。
- callback
- タイプ:function
- オプション
- グループを切り替えたときに呼び出すカスタム関数を指定します。
コード サンプル
$(".selector").igTreeGridMultiColumnHeaders("toggleGroup", "groupKey");
-
ui-iggrid-multiheader-collapsed
- 縮小された [ヘッダー] ボタンに適用されるクラス。
-
ui-iggrid-indicatorcontainer ui-iggrid-collapsibleindicatorcontainer
- 縮小可能な [ヘッダー] ボタンのコンテナーに適用されるクラス。
-
ui-iggrid-multiheader-expanded
- 展開済み [ヘッダー] ボタンに適用されるクラス。
-
ui-iggrid-multiheader-cell
- 複数列ヘッダー セル (複数列ヘッダーに子があるグループ ヘッダー セル) に適用されるクラス。