製品版のみの機能
階層グリッド - TypeScript
このサンプルでは、TypeScript および使用されるデータのために特定の言語カスタム クラスを使用して基本の igHierarchicalGrid を作成する方法を紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
</head>
<body>
<table id="hierarchial-grid"></table>
<script src="/TypeScriptSamples/hierarchical-grid/typescript.js"></script>
</body>
</html>
/// <reference path="/js/typings/jquery.d.ts" />
/// <reference path="/js/typings/jqueryui.d.ts" />
/// <reference path="/js/typings/igniteui.d.ts" />
//Sample data construction
//-----------------------------------------
class Product {
name: string;
quantity: number;
constructor(productName: string, inQuantity: number) {
this.name = productName;
this.quantity = inQuantity;
}
}
class ProductContainer {
type: string;
products: Product[];
constructor(productType: string, inProducts : Product[]) {
this.type = productType;
this.products = inProducts;
}
}
var foods: Product[] = [];
foods.push(new Product("パン", 3));
foods.push(new Product("ピザ", 4));
var beverages: Product[] = [];
beverages.push(new Product("果汁 100% オレンジ", 1));
beverages.push(new Product("コーヒーマイルド", 4));
var sampleData: ProductContainer[] = [];
sampleData.push(new ProductContainer("食品", foods));
sampleData.push(new ProductContainer("飲料", beverages));
//-----------------------------------------
$(function () {
$("#hierarchial-grid").igHierarchicalGrid({
width: "100%",
dataSource: sampleData,
features: [
{
name: "Responsive",
enableVerticalRendering: false,
columnSettings: [
{
columnKey: "type",
classes: "ui-hidden-tablet"
},
]
},
{
name: "RowSelectors",
enableCheckBoxes: true,
inherit: true
},
{
name: "Selection",
multipleSelection: true
}
],
autoGenerateColumns: false,
primaryKey: "type",
columns: [
{ key: "type", headerText: "カテゴリ", dataType: "string" }
],
autoGenerateLayouts: false,
columnLayouts: [
{
width: "100%",
childrenDataProperty: "products",
autoGenerateColumns: false,
primaryKey: "name",
columns: [
{ key: "name", headerText: "名前", dataType: "string", width: "70%", },
{ key: "quantity", headerText: "数量", dataType: "number", width: "30%" }
],
features: [
{
name: "Responsive",
enableVerticalRendering: false,
columnSettings: [
{
columnKey: "name",
classes: "ui-hidden-tablet"
},
{
columnKey: "quantity",
classes: "ui-hidden-tablet"
}
]
}
]
}
],
});
})