製品版のみの機能

ツリーグリッド - 選択

このサンプルでは、igTreeGrid で行セレクターを構成する方法を紹介します。

このサンプルは、より大きい画面サイズのためにデザインされました。

モバイルデバイスで画面を回転、フルサイズ表示、またはその他のデバイスにメールで送信します。

グリッドの下のエディターは機能のオプションを構成します。rowSelectorNumberingMode オプションは行番号の書式設定を構成します。hierarchical に設定すると、番号は親および子インデックスが連結されたものになります。このオプションのその他の値は sequential です。行番号が表示行のインデックスの形式になります。triState チェックボックスは単一の選択のみに使用できます。triState モードは、選択行と対応するチェックボックスの状態に明確な違いがあります。行を選択しても対応するチェックボックスをチェックしません。またセレクターチェックボックスをクリックしても行に選択を適用しません。このオプションで可能なその他の値は biState です。biState が有効な場合、行の選択は親行に影響しません。

コードビュー

JsFiddle で表示

クリップボードへコピー

                    <!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>

Ignite UI for jQuery | サンプル

検索結果

ツリーグリッド - 選択

コードビュー

Ignite UI for jQuery | サンプル

検索結果

ツリー グリッド - 選択

コード ビュー

ツリーグリッド - 選択

コードビュー