このトピックでは、igGrid™ 複数列ヘッダー機能の構成方法について説明します。
本トピックの理解を深めるために、以下のトピックを参照することをお勧めします。
igGrid の複数列ヘッダー機能について説明します。このトピックは、以下のセクションで構成されます。
複数列ヘッダー機能では、ヘッダーをグループ化できるようになっています。igGrid.options.columns 配列でこの機能に対応するため、group という各列オブジェクトからの新しいオプションがあります。このオプションには、他の列定義の配列を含めることができます。group オプションはカスケードしています。つまり、複数列ヘッダーをまとめてグループ化できるということです。グループ化された列を定義する際には、headerText、key、および rowspan の各プロパティを設定できます。headerText オプションはグループ キャプションを設定するために使用し、key は他の機能での使用時に列グループを参照するために使用し、rowspan はグループ ヘッダー セルのスパンを調整するために使用します。複数列ヘッダー API は、グリッドの列オブジェクトを介してエクスポーズされます。他の機能と同じように、この機能は、igGrid.options.features 配列に追加して、JavaScript ファイル内で参照する必要もあります。次のスクリーンショットは、CompanyName、ContactName、および ContactTitle 列用に構成された複数列ヘッダーです。
ここでは、igGrid で複数列ヘッダーを構成する過程を順を追って説明します。
以下のスクリーンショットは最終結果のプレビューです。
以下はプロセスの概要です。
igGrid で複数列フッターを構成する手順を以下に示します。
必要な JavaScript および CSS ファイルを参照します。
次のコード スニペットは、Infragistics Loader を使用して複数列ヘッダー機能を参照しています。
HTML の場合:
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery-ui.min.js" type="text/javascript"></script>
<script src="infragistics.loader.js"></script>
JavaScript の場合:
<script type="text/javascript">
$.ig.loader({
scriptPath: "http://localhost/ig_ui/js/",
cssPath: "http://localhost/ig_ui/css/",
resources: "igGrid.MultiColumnHeaders"
});
</script>
次のコードは、オブジェクトの JavaScript 配列を定義します。このデータは igGrid のデータ ソースとして使用されます。
JavaScript の場合:
var northwindCustomers = [
{
"CustomerID": "ALFKI",
"CompanyName": "Alfreds Futterkiste",
"ContactName": "Maria Anders",
"ContactTitle": "Sales Representative",
"Address": "Obere Str. 57",
"City": "Berlin",
"Region": null,
"PostalCode": "12209",
"Country": "Germany",
"Phone": "030-0074321",
"Fax": "030-0076545"
}, {
"CustomerID": "ANATR",
"CompanyName": "Ana Trujillo Emparedados y helados",
"ContactName": "Ana Trujillo",
"ContactTitle": "Owner",
"Address": "Avda. de la Constituciu00f3n 2222",
"City": "Mu00e9xico D.F.",
"Region": null,
"PostalCode": "05021",
"Country": "Mexico",
"Phone": "(5) 555-4729",
"Fax": "(5) 555-3745"
}];
HTML の場合:
<table id="grid1"></table>
次のコードでは、2 つのグループが定義されています。1 つめは「Company Information」というグループで、CompanyName、ContactName、および ContactTitle という列が含まれています。
2 つめは「Address Information」というグループで、Country という列と別のグループ列が含まれています。インナー グループは「Local address」というグループで、Address、City、および PostalCode という列が含まれています。
JavaScript の場合:
$.ig.loader(function () {
$("#grid1").igGrid({
autoGenerateColumns: false,
dataSource: northwindCustomers,
columns: [
{ headerText: "Customer ID", key: "CustomerID", width: "100px" },
{ headerText: "Company Information",
group: [
{ headerText: "Company Name", key: "CompanyName", width: "150px" },
{ headerText: "Contact Name", key: "ContactName", width: "150px" },
{ headerText: "Contact Title", key: "ContactTitle", width: "150px" }
]
},
{ headerText: "Address Information", columnKey: "AddressInformation",
group: [
{ headerText: "Local address",
group: [
{ headerText: "Address", key: "Address", width: "150px" },
{ headerText: "City", key: "City", width: "100px" },
{ headerText: "PostalCode", key: "PostalCode", width: "100px" }
]
},
{ headerText: "Country", key: "Country", width: "100px" }
]}
],
features: [
{
name: 'MultiColumnHeaders'
}
]
});
});
ここでは、縮小可能な列グループを持つ igGrid で複数列ヘッダーを構成する過程を順を追って説明します。
以下のスクリーンショットは最終結果のプレビューです。
以下はプロセスの概要です。
縮小可能な列グループを持つ igGrid で複数列フッターを構成する手順を以下に示します。
必要な JavaScript および CSS ファイルを参照します。
次のコード スニペットは、Infragistics Loader を使用して複数列ヘッダー機能を参照しています。
HTML の場合:
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery-ui.min.js" type="text/javascript"></script>
<script src="infragistics.loader.js"></script>
JavaScript の場合:
<script type="text/javascript">
$.ig.loader({
scriptPath: "http://localhost/ig_ui/js/",
cssPath: "http://localhost/ig_ui/css/",
resources: "igGrid.MultiColumnHeaders"
});
</script>
次のコードは、オブジェクトの JavaScript 配列を定義します。このデータは igGrid のデータ ソースとして使用されます。
JavaScript の場合:
var northwindCustomers = [
{
"CustomerID": "ALFKI",
"CompanyName": "Alfreds Futterkiste",
"ContactName": "Maria Anders",
"ContactTitle": "Sales Representative",
"Address": "Obere Str. 57",
"City": "Berlin",
"Region": null,
"PostalCode": "12209",
"Country": "Germany",
"Phone": "030-0074321",
"Fax": "030-0076545"
}, {
"CustomerID": "ANATR",
"CompanyName": "Ana Trujillo Emparedados y helados",
"ContactName": "Ana Trujillo",
"ContactTitle": "Owner",
"Address": "Avda. de la Constituciu00f3n 2222",
"City": "Mu00e9xico D.F.",
"Region": null,
"PostalCode": "05021",
"Country": "Mexico",
"Phone": "(5) 555-4729",
"Fax": "(5) 555-3745"
}];
HTML の場合:
<table id="grid1"></table>
次のコードでは、2 つのグループが定義されています。1 つめは「Company Information」というグループで、CompanyName、ContactName、および ContactTitle という列が含まれています。
2 つ目は「Address Information」というグループで、Country および Full Address という列と別のグループ列が含まれています。インナー グループは「Local address」というグループで、Address、City、および PostalCode という列が含まれています。
「Company Information」グループが縮小可能で、最初に展開されています。縮小された場合、CompanyName 列のみが表示されます。
「Address Information」グループも最初に展開されています。縮小された場合、非バインドの FullAddress 列が表示されます。
「Local address」グループが最初に縮小されています。Address 列のみが表示されています。展開された場合、City および PostalCode 列が表示されます。
JavaScript の場合:
$.ig.loader(function () {
$("#grid1").igGrid({
autoGenerateColumns: false,
dataSource: northwindCustomers,
columns: [
{ headerText: "Customer ID", key: "CustomerID", dataType: "string", width: "100px" },
{
headerText: "Company Information",
group: [
{
headerText: "Company Name",
key: "CompanyName",
dataType: "string",
width: "150px"
},
{
headerText: "Contact Name",
key: "ContactName",
dataType: "string",
width: "150px",
groupOptions: {
hidden: "parentcollapsed"
}
},
{
headerText: "Contact Title",
key: "ContactTitle",
dataType: "string",
width: "150px",
groupOptions: {
hidden: "parentcollapsed"
}
}
],
groupOptions: {
expanded: true,
allowGroupCollapsing: true
}
},
{
headerText: "Address Information",
group: [
{
headerText: "Local Address",
group: [
{
headerText: "Address",
key: "Address",
dataType: "string",
width: "150px"
},
{
headerText: "City",
key: "City",
dataType: "string",
width: "100px",
groupOptions: {
hidden: "parentcollapsed"
}
},
{
headerText: "Postal Code",
key: "PostalCode",
dataType: "string",
width: "100px",
groupOptions: {
hidden: "parentcollapsed"
}
}
],
groupOptions: {
expanded: false,
allowGroupCollapsing: true,
hidden: "parentcollapsed"
}
},
{
headerText: "Country",
key: "Country",
width: "100px",
groupOptions: {
hidden: "parentcollapsed"
}
},
{
headerText: "Full Address",
width: "200px",
key: "FullAddress",
dataType: "string",
unbound: true,
formula: function (data, grid) {
return data["Address"] + ", " + data["City"];
},
groupOptions: {
hidden: "parentexpanded"
}
}
],
groupOptions: {
expanded: true,
allowGroupCollapsing: true
}
}
],
features: [
{
name: 'MultiColumnHeaders'
}
]
});
});
ここでは、igGrid で複数列ヘッダーを構成する過程を順を追って説明します。
以下のスクリーンショットは最終結果のプレビューです。
この手順を実行するには、以下が必要です。
以下はプロセスの概要です。
igGrid で複数列フッターを構成する手順を以下に示します。
必要な JavaScript および CSS ファイルを参照します。
Index.cshtml ビューで、必要な JavaScript 参照を追加して、Infragistics ローダーのインスタンスを作成します。
次のコード スニペットは、Infragistics Loader を使用して複数列ヘッダー機能を参照しています。
HTML の場合:
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery-ui.min.js" type="text/javascript"></script>
<script src="infragistics.loader.js"></script>
C# の場合:
@Html.Infragistics()
.Loader()
.ScriptPath("http://localhost/ig_ui/js/")
.CssPath("http://localhost/ig_ui/css/")
.Resources("igGrid.MultiColumnHeaders")
.Render()
Northwind データベースの Customers テーブルに関する ADO.NET エンティティー データ モデルを追加し、このモデルに NorthwindModel という名前を付けます。
Index.cshtml ビューを開き、以下のコードを追加します。
このコードでは、2 つのグループが定義されています。1 つめは「Company Information」というグループで、CompanyName、ContactName、および ContactTitle という列が含まれています。
2 つめは「Address Information」というグループで、Country という列と別のグループ列が含まれています。インナー グループは「Local address」というグループで、Address、City、および PostalCode という列が含まれています。
C# の場合:
@Html.Infragistics().Grid(Model)
.AutoGenerateColumns(false)
.ID("grid1")
.PrimaryKey("CustomerID")
.Height("400px")
.Width("100%")
.Columns(column =>
{
column.For(x => x.CustomerID).HeaderText("Customer ID").Width("100px");
column.MultiColumnHeader().HeaderText("Company Information").Group(c => {
c.For(x => x.CompanyName).HeaderText("Company Name").Width("150px");
c.For(x => x.ContactName).HeaderText("Contact Name").Width("150px");
c.For(x => x.ContactTitle).HeaderText("Contact Title").Width("150px");
});
column.MultiColumnHeader().HeaderText("Address Information").Group(c => {
c.MultiColumnHeader().HeaderText("Local address").Group(c2 => {
c2.For(x => x.Address).HeaderText("Address").Width("150px");
c2.For(x => x.City).HeaderText("City").Width("100px");
c2.For(x => x.PostalCode).HeaderText("PostalCode").Width("100px");
});
});
column.For(x => x.Country).HeaderText("Country").Width("100px");
})
.Features(features => {
features.MultiColumnHeaders();
})
.DataBind().Render()
注: 複数列ヘッダーの列キーは、そのキーを引数として MultiColumnHeader チェーン メソッドに渡すことによって設定できます。 例: MultiColumnHeader(“companyInformation”)
Home コントローラーのインデックス アクション メソッドで、Customers データを Northwind データベースから抽出し、そのデータをビューと共に返します。
C# の場合:
public ActionResult Index()
{
var dataContext = new NorthwindDataContext();
var customers = dataContext.Customers.AsQueryable();
return View(customers);
}
ここでは、縮小可能な列グループを持つ igGrid で複数列ヘッダーを構成する過程を順を追って説明します。
以下のスクリーンショットは最終結果のプレビューです。
この手順を実行するには、以下が必要です。
以下はプロセスの概要です。
igGrid で複数列フッターを構成する手順を以下に示します。
必要な JavaScript および CSS ファイルを参照します。
Index.cshtml ビューで、必要な JavaScript 参照を追加して、Infragistics ローダーのインスタンスを作成します。
次のコード スニペットは、Infragistics Loader を使用して複数列ヘッダー機能を参照しています。
HTML の場合:
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery-ui.min.js" type="text/javascript"></script>
<script src="infragistics.loader.js"></script>
C# の場合:
@Html.Infragistics()
.Loader()
.ScriptPath("http://localhost/ig_ui/js/")
.CssPath("http://localhost/ig_ui/css/")
.Resources("igGrid.MultiColumnHeaders")
.Render()
Northwind データベースの Customers テーブルに関する ADO.NET エンティティー データ モデルを追加し、このモデルに NorthwindModel という名前を付けます。
Index.cshtml ビューを開き、以下のコードを追加します。
次のコードでは、2 つのグループが定義されています。1 つめは「Company Information」というグループで、CompanyName、ContactName、および ContactTitle という列が含まれています。
2 つ目は「Address Information」というグループで、Country および Full Address という列と別のグループ列が含まれています。インナー グループは「Local address」というグループで、Address、City、および PostalCode という列が含まれています。
「Company Information」グループが縮小可能で、最初に展開されています。縮小された場合、CompanyName 列のみが表示されます。
「Address Information」グループも最初に展開されています。縮小された場合、非バインドの FullAddress 列が表示されます。
「Local address」グループが最初に縮小されています。Address 列のみが表示されています。展開された場合、City および PostalCode 列が表示されます。
C# の場合:
@Html.Infragistics().Grid(Model)
.AutoGenerateColumns(false)
.ID("grid1")
.PrimaryKey("CustomerID")
.Height("400px")
.Width("100%")
.Columns(column =>
{
column.For(x => x.CustomerID).HeaderText("Customer ID").Width("100px");
column.MultiColumnHeader().HeaderText("Company Information")
.Group(c =>
{
c.For(x => x.CompanyName).HeaderText("Company Name").Width("150px");
c.For(x => x.ContactName).HeaderText("Contact Name").Width("150px")
.GroupOptions(go => go.Hidden(CollapsibleGroupHidden.ParentCollapsed));
c.For(x => x.ContactTitle).HeaderText("Contact Title").Width("150px")
.GroupOptions(go => go.Hidden(CollapsibleGroupHidden.ParentCollapsed)); ;
})
.GroupOptions(go => go.AllowGroupCollapsing(true).Expanded(true));
column.MultiColumnHeader().HeaderText("Address Information")
.Group(c =>
{
c.MultiColumnHeader().HeaderText("Local address")
.Group(c2 =>
{
c2.For(x => x.Address).HeaderText("Address").Width("150px");
c2.For(x => x.City).HeaderText("City").Width("100px")
.GroupOptions(go => go.Hidden(CollapsibleGroupHidden.ParentCollapsed));
c2.For(x => x.PostalCode).HeaderText("PostalCode").Width("100px")
.GroupOptions(go => go.Hidden(CollapsibleGroupHidden.ParentCollapsed));
})
.GroupOptions(go => go.AllowGroupCollapsing(true).Expanded(false)
.Hidden(CollapsibleGroupHidden.ParentCollapsed));
c.For(x => x.Country).HeaderText("Country").Width("100px")
.GroupOptions(go => go.Hidden(CollapsibleGroupHidden.ParentCollapsed));
c.Unbound("FullAddress").HeaderText("Full Address").Width("200px").Formula("fullAddressFormula")
.GroupOptions(go => go.Hidden(CollapsibleGroupHidden.ParentExpanded));
})
.GroupOptions(go => go.AllowGroupCollapsing(true).Expanded(true));
})
.Features(features => {
features.MultiColumnHeaders();
})
.DataBind().Render()
注: 複数列ヘッダーの列キーは、そのキーを引数として MultiColumnHeader チェーン メソッドに渡すことによって設定できます。 例: MultiColumnHeader(“companyInformation”)
Home コントローラーのインデックス アクション メソッドで、Customers データを Northwind データベースから抽出し、そのデータをビューと共に返します。
C# の場合:
public ActionResult Index()
{
var dataContext = new NorthwindDataContext();
var customers = dataContext.Customers.AsQueryable();
return View(customers);
}
このトピックに関連する追加情報については、以下のトピックを参照してください。
igGrid の機能に関連するトピックについてのランディング ページ。このトピックについては、以下のサンプルも参照してください。
オンラインで表示: GitHub