製品版のみの機能
ツリー グリッド - 概要
このサンプルでは、igTreeGrid で行セレクターを構成する方法を紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
igTreeGrid コントロールはデータをツリーのような表構造に表示する jQuery ウィジェットです。コントロールは igHierarchicalGrid のように階層データを表示します。igTreeGrid の子レイアウトはルート レイアウトと同じ列定義があります。階層データを同じ列と描画すると、ツリー グリッドの描画速度が速くなり、メモリおよび DOM フットプリントは低くなります。また、igTreeGrid は以下の igGrid 機能をサポートします。
コード ビュー
クリップボードへコピー
var hierarchicalDS = [
{
"id": 0, "tasks": "Project Plan", "start": "6/2/2014", "finish": "8/22/2014", "duration": "60d", "progress": "32%", "products": [
{ "id": 1, "tasks": "Planning", "start": "6/2/2014", "finish": "6/4/2014", "duration": "3d", "progress": "100%" },
{ "id": 2, "tasks": "Write a specification", "start": "6/5/2014", "finish": "6/6/2014", "duration": "2d", "progress": "100%" },
{ "id": 3, "tasks": "Create a demo application", "start": "6/9/2014", "finish": "6/11/2014", "duration": "3d", "progress": "100%" },
{ "id": 4, "tasks": "Collect a feedback", "start": "6/12/2014", "finish": "6/12/2014", "duration": "1d", "progress": "100%" },
{
"id": 5, "tasks": "Design", "start": "6/13/2014", "finish": "6/19/2014", "duration": "5d", "progress": "60%", "products": [
{ "id": 8, "tasks": "Conceptual Design", "start": "6/13/2014", "finish": "6/16/2014", "duration": "2d", "progress": "100%" },
{ "id": 9, "tasks": "Preliminary Design", "start": "6/17/2014", "finish": "6/18/2014", "duration": "2d", "progress": "65%" },
{ "id": 10, "tasks": "Final Design", "start": "6/19/2014", "finish": "6/19/2014", "duration": "1d", "progress": "15%" }
]
},
{
"id": 6, "tasks": "Development", "start": "6/20/2014", "finish": "8/20/2014", "duration": "44d", "progress": "5%", "products": [
{ "id": 11, "tasks": "Implementation", "start": "6/20/2014", "finish": "7/17/2014", "duration": "20d", "progress": "5%" },
{ "id": 12, "tasks": "Testing", "start": "7/18/2014", "finish": "7/31/2014", "duration": "10d", "progress": "0%" },
{ "id": 13, "tasks": "Bug fixing", "start": "8/1/2014", "finish": "8/14/2014", "duration": "10d", "progress": "0%" },
{ "id": 14, "tasks": "Documenting", "start": "8/15/2014", "finish": "8/20/2014", "duration": "4d", "progress": "0%" }
]
},
{ "id": 7, "tasks": "Project Complete", "start": "8/21/2014", "finish": "8/22/2014", "duration": "2d", "progress": "0%" }
]
}
];
$("#checkboxModeTreeGrid").igTreeGrid({
width: "100%",
dataSource: hierarchicalDS,
autoGenerateColumns: false,
height: 500,
primaryKey: "id",
columns: [
{ headerText: "ID", key: "id", width: "10%", dataType: "number", hidden: true },
{ headerText: "タスク", key: "tasks", width: "30%", dataType: "string" },
{ headerText: "開始日付", key: "start", width: "20%", dataType: "string" },
{ headerText: "終了日付", key: "finish", width: "20%", dataType: "string" },
{ headerText: "期間", key: "duration", width: "20%", dataType: "string" },
{ headerText: "進行状況", key: "progress", width: "10%", dataType: "string" }
],
childDataKey: "products",
features: [
{
name: "Selection",
multipleSelection: true
},
{
name: "RowSelectors",
multipleSelection: true,
rowSelectorColumnWidth: 80,
enableRowNumbering: true,
rowSelectorNumberingMode: "hierarchical"
},
{
name: "Paging",
pageSize: 10,
mode: 'allLevels'
}
]
});
<table id="checkboxModeTreeGrid"></table>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS files -->
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/structure/infragistics.css" rel="stylesheet" />
<!-- Used to style the API Viewer and Explorer UI -->
<link href="/css/apiviewer.css" rel="stylesheet" type="text/css" />
<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/2024.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.lob.js"></script>
</head>
<body>
<table id="checkboxModeTreeGrid"></table>
<script>
var hierarchicalDS = [
{
"id": 0, "tasks": "Project Plan", "start": "6/2/2014", "finish": "8/22/2014", "duration": "60d", "progress": "32%", "products": [
{ "id": 1, "tasks": "Planning", "start": "6/2/2014", "finish": "6/4/2014", "duration": "3d", "progress": "100%" },
{ "id": 2, "tasks": "Write a specification", "start": "6/5/2014", "finish": "6/6/2014", "duration": "2d", "progress": "100%" },
{ "id": 3, "tasks": "Create a demo application", "start": "6/9/2014", "finish": "6/11/2014", "duration": "3d", "progress": "100%" },
{ "id": 4, "tasks": "Collect a feedback", "start": "6/12/2014", "finish": "6/12/2014", "duration": "1d", "progress": "100%" },
{
"id": 5, "tasks": "Design", "start": "6/13/2014", "finish": "6/19/2014", "duration": "5d", "progress": "60%", "products": [
{ "id": 8, "tasks": "Conceptual Design", "start": "6/13/2014", "finish": "6/16/2014", "duration": "2d", "progress": "100%" },
{ "id": 9, "tasks": "Preliminary Design", "start": "6/17/2014", "finish": "6/18/2014", "duration": "2d", "progress": "65%" },
{ "id": 10, "tasks": "Final Design", "start": "6/19/2014", "finish": "6/19/2014", "duration": "1d", "progress": "15%" }
]
},
{
"id": 6, "tasks": "Development", "start": "6/20/2014", "finish": "8/20/2014", "duration": "44d", "progress": "5%", "products": [
{ "id": 11, "tasks": "Implementation", "start": "6/20/2014", "finish": "7/17/2014", "duration": "20d", "progress": "5%" },
{ "id": 12, "tasks": "Testing", "start": "7/18/2014", "finish": "7/31/2014", "duration": "10d", "progress": "0%" },
{ "id": 13, "tasks": "Bug fixing", "start": "8/1/2014", "finish": "8/14/2014", "duration": "10d", "progress": "0%" },
{ "id": 14, "tasks": "Documenting", "start": "8/15/2014", "finish": "8/20/2014", "duration": "4d", "progress": "0%" }
]
},
{ "id": 7, "tasks": "Project Complete", "start": "8/21/2014", "finish": "8/22/2014", "duration": "2d", "progress": "0%" }
]
}
];
$(function () {
$("#checkboxModeTreeGrid").igTreeGrid({
width: "100%",
dataSource: hierarchicalDS,
autoGenerateColumns: false,
height: 500,
primaryKey: "id",
columns: [
{ headerText: "ID", key: "id", width: "10%", dataType: "number", hidden: true },
{ headerText: "タスク", key: "tasks", width: "30%", dataType: "string" },
{ headerText: "開始日付", key: "start", width: "20%", dataType: "string" },
{ headerText: "終了日付", key: "finish", width: "20%", dataType: "string" },
{ headerText: "期間", key: "duration", width: "20%", dataType: "string" },
{ headerText: "進行状況", key: "progress", width: "10%", dataType: "string" }
],
childDataKey: "products",
features: [
{
name: "Selection",
multipleSelection: true
},
{
name: "RowSelectors",
multipleSelection: true,
rowSelectorColumnWidth: 80,
enableRowNumbering: true,
rowSelectorNumberingMode: "hierarchical"
},
{
name: "Paging",
pageSize: 10,
mode: 'allLevels'
}
]
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="/igniteui/css/structure/infragistics.css" rel="stylesheet" />
</head>
<body>
<my-app>Loading...</my-app>
<!-- 1. Load libraries -->
<script src="/js/modernizr.min.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-ui.min.js"></script>
<!-- IE required polyfills, in this exact order -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
<script src="https://unpkg.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="https://unpkg.com/zone.js@0.6.23?main=browser"></script>
<script src="https://unpkg.com/typescript@2.0.2/lib/typescript.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
<script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="/igniteui/js/infragistics.core.js"></script>
<script src="/igniteui/js/infragistics.lob.js"></script>
<script>
System.config( {
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'igniteui-angular-wrappers': 'npm:igniteui-angular-wrappers',
'rxjs': 'npm:rxjs'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
rxjs: {
defaultExtension: 'js'
},
'igniteui-angular-wrappers': {
main: './index.js',
defaultExtension: 'js'
}
},
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true }
} );
System.import( 'row-selectors.ts' ).then(null, console.error.bind(console));
</script>
</body>
</html>
import { Component, NgModule } from '@angular/core';
import { IgTreeGridComponent } from 'igniteui-angular-wrappers';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
declare var jQuery: any;
@Component({
selector: 'my-app',
template: `<ig-tree-grid [(options)]='gridOptions' [(widgetId)]='id'></ig-tree-grid>`
})
export class AppComponent {
private gridOptions: IgTreeGrid;
private id: string;
private hierarchicalDS: Array <any>;
constructor() {
this.id = 'grid1';
this.hierarchicalDS = [{
"id": 0,
"tasks": "Project Plan",
"start": "6/2/2014",
"finish": "8/22/2014",
"duration": "60d",
"progress": "32%",
"products": [{
"id": 1,
"tasks": "Planning",
"start": "6/2/2014",
"finish": "6/4/2014",
"duration": "3d",
"progress": "100%"
},
{
"id": 2,
"tasks": "Write a specification",
"start": "6/5/2014",
"finish": "6/6/2014",
"duration": "2d",
"progress": "100%"
},
{
"id": 3,
"tasks": "Create a demo application",
"start": "6/9/2014",
"finish": "6/11/2014",
"duration": "3d",
"progress": "100%"
},
{
"id": 4,
"tasks": "Collect a feedback",
"start": "6/12/2014",
"finish": "6/12/2014",
"duration": "1d",
"progress": "100%"
},
{
"id": 5,
"tasks": "Design",
"start": "6/13/2014",
"finish": "6/19/2014",
"duration": "5d",
"progress": "60%",
"products": [{
"id": 8,
"tasks": "Conceptual Design",
"start": "6/13/2014",
"finish": "6/16/2014",
"duration": "2d",
"progress": "100%"
},
{
"id": 9,
"tasks": "Preliminary Design",
"start": "6/17/2014",
"finish": "6/18/2014",
"duration": "2d",
"progress": "65%"
},
{
"id": 10,
"tasks": "Final Design",
"start": "6/19/2014",
"finish": "6/19/2014",
"duration": "1d",
"progress": "15%"
}
]
},
{
"id": 6,
"tasks": "Development",
"start": "6/20/2014",
"finish": "8/20/2014",
"duration": "44d",
"progress": "5%",
"products": [{
"id": 11,
"tasks": "Implementation",
"start": "6/20/2014",
"finish": "7/17/2014",
"duration": "20d",
"progress": "5%"
},
{
"id": 12,
"tasks": "Testing",
"start": "7/18/2014",
"finish": "7/31/2014",
"duration": "10d",
"progress": "0%"
},
{
"id": 13,
"tasks": "Bug fixing",
"start": "8/1/2014",
"finish": "8/14/2014",
"duration": "10d",
"progress": "0%"
},
{
"id": 14,
"tasks": "Documenting",
"start": "8/15/2014",
"finish": "8/20/2014",
"duration": "4d",
"progress": "0%"
}
]
},
{
"id": 7,
"tasks": "Project Complete",
"start": "8/21/2014",
"finish": "8/22/2014",
"duration": "2d",
"progress": "0%"
}
]
}];
this.gridOptions = {
width: "100%",
dataSource: this.hierarchicalDS,
autoGenerateColumns: false,
height: 500,
primaryKey: "id",
columns: [{
headerText: "ID",
key: "id",
width: "10%",
dataType: "number",
hidden: true
},
{
headerText: "タスク",
key: "tasks",
width: "30%",
dataType: "string"
},
{
headerText: "開始日付",
key: "start",
width: "20%",
dataType: "string"
},
{
headerText: "終了日付",
key: "finish",
width: "20%",
dataType: "string"
},
{
headerText: "期間",
key: "duration",
width: "20%",
dataType: "string"
},
{
headerText: "進行状況",
key: "progress",
width: "10%",
dataType: "string"
}
],
childDataKey: "products",
features: [{
name: "Selection",
multipleSelection: true
},
{
name: "RowSelectors",
multipleSelection: true,
rowSelectorColumnWidth: 80,
enableRowNumbering: true,
rowSelectorNumberingMode: "hierarchical"
},
{
name: "Paging",
pageSize: 10,
mode: 'allLevels'
}
]
};
}
}
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent, IgTreeGridComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="/igniteui/css/structure/infragistics.css" rel="stylesheet" />
<!-- 1. Load libraries -->
<script src="/js/modernizr.min.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-ui.min.js"></script>
<!-- ReactJS library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="/igniteui/js/infragistics.core.js"></script>
<script src="/igniteui/js/infragistics.lob.js"></script>
<script src="/js-data/nw-products"></script>
<!-- Ignite UI for jQuery ReactJS Files -->
<script src="https://unpkg.com/igniteui-react@1.0.1/igniteui-react.js"></script>
</head>
<body>
<div id="app">
<!--Sample JSON Data-->
<script src="/js-data/northwind"></script>
<script type="text/babel">
var App = React.createClass({
render: function () {
var hierarchicalDS = [
{
"id": 0, "tasks": "Project Plan", "start": "6/2/2014", "finish": "8/22/2014", "duration": "60d", "progress": "32%", "products": [
{ "id": 1, "tasks": "Planning", "start": "6/2/2014", "finish": "6/4/2014", "duration": "3d", "progress": "100%" },
{ "id": 2, "tasks": "Write a specification", "start": "6/5/2014", "finish": "6/6/2014", "duration": "2d", "progress": "100%" },
{ "id": 3, "tasks": "Create a demo application", "start": "6/9/2014", "finish": "6/11/2014", "duration": "3d", "progress": "100%" },
{ "id": 4, "tasks": "Collect a feedback", "start": "6/12/2014", "finish": "6/12/2014", "duration": "1d", "progress": "100%" },
{
"id": 5, "tasks": "Design", "start": "6/13/2014", "finish": "6/19/2014", "duration": "5d", "progress": "60%", "products": [
{ "id": 8, "tasks": "Conceptual Design", "start": "6/13/2014", "finish": "6/16/2014", "duration": "2d", "progress": "100%" },
{ "id": 9, "tasks": "Preliminary Design", "start": "6/17/2014", "finish": "6/18/2014", "duration": "2d", "progress": "65%" },
{ "id": 10, "tasks": "Final Design", "start": "6/19/2014", "finish": "6/19/2014", "duration": "1d", "progress": "15%" }
]
},
{
"id": 6, "tasks": "Development", "start": "6/20/2014", "finish": "8/20/2014", "duration": "44d", "progress": "5%", "products": [
{ "id": 11, "tasks": "Implementation", "start": "6/20/2014", "finish": "7/17/2014", "duration": "20d", "progress": "5%" },
{ "id": 12, "tasks": "Testing", "start": "7/18/2014", "finish": "7/31/2014", "duration": "10d", "progress": "0%" },
{ "id": 13, "tasks": "Bug fixing", "start": "8/1/2014", "finish": "8/14/2014", "duration": "10d", "progress": "0%" },
{ "id": 14, "tasks": "Documenting", "start": "8/15/2014", "finish": "8/20/2014", "duration": "4d", "progress": "0%" }
]
},
{ "id": 7, "tasks": "Project Complete", "start": "8/21/2014", "finish": "8/22/2014", "duration": "2d", "progress": "0%" }
]
}
];
return <IgTreeGrid id="checkboxModeTreeGrid"
width="100%"
dataSource={hierarchicalDS}
autoGenerateColumns={false}
height="500"
primaryKey="id"
columns={[
{ headerText: "ID", key: "id", width: "10%", dataType: "number", hidden: true },
{ headerText: "タスク", key: "tasks", width: "30%", dataType: "string" },
{ headerText: "開始日付", key: "start", width: "20%", dataType: "string" },
{ headerText: "終了日付", key: "finish", width: "20%", dataType: "string" },
{ headerText: "期間", key: "duration", width: "20%", dataType: "string" },
{ headerText: "進行状況", key: "progress", width: "10%", dataType: "string" }
]}
childDataKey="products"
features={[
{
name: "Selection",
multipleSelection: true
},
{
name: "RowSelectors",
multipleSelection: true,
rowSelectorColumnWidth: 80,
enableRowNumbering: true,
rowSelectorNumberingMode: "hierarchical"
},
{
name: "Paging",
pageSize: 10,
mode: 'allLevels'
}
]} />
}
});
ReactDOM.render(
<App />,
document.getElementById("app"));
</script>
</div>
</body>
</html>