製品版のみの機能

グリッド - 概要

igGrid は jQuery グリッドです。業務用機能、タッチサポート、およびレスポンシブ web デザイン機能を提供します。

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

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

igGrid を JSON、XML、HTML テーブル、.NET コレクション、.NET DataTable などのデータソースにバインドできます。 igGrid は、KnockoutJS、History.js、JsRender、および Bootstrap などの人気のあるオープンソースライブラリと操作します。以下の業務用機能を提供します:

コードビュー

JsFiddle で表示

クリップボードへコピー

                    <table id="grid"></table>

                    <!DOCTYPE html>
<html>
<head>
    <title></title>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2025.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2025.1/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/2025.1/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2025.1/latest/js/infragistics.lob.js"></script>

</head>
<body>

    <table id="grid"></table>

    <script src="/data-files/nw-products.js"></script>
    <script>
        $(function () {
            for (var i = 0; i < northwindProducts.length; i++) {
                northwindProducts[i].ImageUrl = "../images/samples/grid/" + (i % 10) + ".jpg";
            }
            $("#grid").igGrid({
            	primaryKey: "ProductID",
            	caption : "<span> <img src=\"//www.infragistics.com/media/441501/horz_logo.png\" alt=\"Infragistics\"></span>",
                width: '100%',
                columns: [
                    { headerText: "製品 ID", key: "ProductID", dataType: "number", width: "15%", hidden: true },
                    { headerText: "画像", key: "ImageUrl", dataType: "string", width: "15%", template: "<img style=\"height:50px;\" src=\"${ImageUrl}\"/>" },
                    { headerText: "製品名", key: "ProductName", dataType: "string", width: "25%" },
                    { headerText: "カテゴリ", key: "CategoryName", dataType: "string", width: "25%" },
                    { headerText: "在庫数", key: "InStock", dataType: "number", width: "35%" }
                ],
                autofitLastColumn: false,
                autoGenerateColumns: false,
                dataSource: northwindProducts,
                responseDataKey: "results",
                autoCommit: true,
                features: [
                    {
                        name: "Sorting",
                        sortingDialogContainment: "window"
                    },
                    {
                        name: "Filtering",
                        type: "local",
                        columnSettings: [
                            {
                                columnKey: "ImageUrl",
                                allowFiltering: false
                            },
                            {
                                columnKey: "InStock",
                                condition: "greaterThan"
                            }
                        ]
                    },
                    {
                        name: "GroupBy",
                        columnSettings: [
                            {
                                columnKey: "CategoryName",
                                isGroupBy: true
                            }
                        ]
                    },
                    {
                        name: "Selection"
                    },
                    {
                        name: "Paging",
                        pageSize: 10
                    },
                    {
                        name: "Resizing"
                    },
                    {
                        name: "Updating",
                        editMode: "dialog",
                        enableAddRow: false,
                        columnSettings: [
                            {
                                columnKey: "ImageUrl",
                                readOnly: false
                            }
                        ]
                    }
                ]
            });
        });
     </script>
</body>
</html>

                    var northwindProducts = [
    { "ProductID": 1, "ProductName": "果汁100% オレンジ", "CategoryName": "飲料", "ImageUrl": "../../images/samples/nw/categories/1.png", "InStock": 39 },
    { "ProductID": 2, "ProductName": "果汁100% グレープ", "CategoryName": "飲料", "ImageUrl": "../../images/samples/nw/categories/1.png", "InStock": 17 },
    { "ProductID": 3, "ProductName": "ホワイトソルト", "CategoryName": "調味料", "ImageUrl": "../../images/samples/nw/categories/2.png", "InStock": 13 },
    { "ProductID": 4, "ProductName": "ブラックペッパー", "CategoryName": "調味料", "ImageUrl": "../../images/samples/nw/categories/2.png", "InStock": 53 },
    { "ProductID": 5, "ProductName": "ピュアシュガー", "CategoryName": "調味料", "ImageUrl": "../../images/samples/nw/categories/2.png", "InStock": 0 },
    { "ProductID": 6, "ProductName": "うまい素", "CategoryName": "調味料", "ImageUrl": "../../images/samples/nw/categories/2.png", "InStock": 120 },
    { "ProductID": 7, "ProductName": "乾燥バナナ", "CategoryName": "加工食品", "ImageUrl": "../../images/samples/nw/categories/7.png", "InStock": 15 },
    { "ProductID": 8, "ProductName": "ピュアデミグラスソース", "CategoryName": "調味料", "ImageUrl": "../../images/samples/nw/categories/2.png", "InStock": 6 },
    { "ProductID": 9, "ProductName": "アメリカンポーク", "CategoryName": "肉類", "ImageUrl": "../../images/samples/nw/categories/6.png", "InStock": 29 },
    { "ProductID": 10, "ProductName": "大陸サーモン", "CategoryName": "魚介類", "ImageUrl": "../../images/samples/nw/categories/8.png", "InStock": 31 },
    { "ProductID": 11, "ProductName": "ロッキーチーズ", "CategoryName": "乳製品", "ImageUrl": "../../images/samples/nw/categories/4.png", "InStock": 22 },
    { "ProductID": 12, "ProductName": "フレッシュバター", "CategoryName": "乳製品", "ImageUrl": "../../images/samples/nw/categories/4.png", "InStock": 86 },
    { "ProductID": 13, "ProductName": "うなぎ", "CategoryName": "魚介類", "ImageUrl": "../../images/samples/nw/categories/8.png", "InStock": 24 },
    { "ProductID": 14, "ProductName": "乾燥アップル", "CategoryName": "加工食品", "ImageUrl": "../../images/samples/nw/categories/7.png", "InStock": 35 },
    { "ProductID": 15, "ProductName": "だしかつお", "CategoryName": "調味料", "ImageUrl": "../../images/samples/nw/categories/2.png", "InStock": 39 },
    { "ProductID": 16, "ProductName": "バニラクリームアイス", "CategoryName": "菓子類", "ImageUrl": "../../images/samples/nw/categories/3.png", "InStock": 29 },
    { "ProductID": 17, "ProductName": "うす味ウインナー", "CategoryName": "肉類", "ImageUrl": "../../images/samples/nw/categories/6.png", "InStock": 0 },
    { "ProductID": 18, "ProductName": "かに", "CategoryName": "魚介類", "ImageUrl": "../../images/samples/nw/categories/8.png", "InStock": 42 },
    { "ProductID": 19, "ProductName": "チョコクリームアイス", "CategoryName": "菓子類", "ImageUrl": "../../images/samples/nw/categories/3.png", "InStock": 25 },
    { "ProductID": 20, "ProductName": "紅茶バー", "CategoryName": "菓子類", "ImageUrl": "../../images/samples/nw/categories/3.png", "InStock": 40 },
    { "ProductID": 21, "ProductName": "じゃがチップス", "CategoryName": "菓子類", "ImageUrl": "../../images/samples/nw/categories/3.png", "InStock": 3 },
    { "ProductID": 22, "ProductName": "モーニングブレッド", "CategoryName": "穀類、シリアル", "ImageUrl": "../../images/samples/nw/categories/5.png", "InStock": 104 },
    { "ProductID": 23, "ProductName": "バタートースト", "CategoryName": "穀類、シリアル", "ImageUrl": "../../images/samples/nw/categories/5.png", "InStock": 61 },
    { "ProductID": 24, "ProductName": "コーヒーマイルド", "CategoryName": "飲料", "ImageUrl": "../../images/samples/nw/categories/1.png", "InStock": 20 },
    { "ProductID": 25, "ProductName": "アメリカンクラッカー", "CategoryName": "菓子類", "ImageUrl": "../../images/samples/nw/categories/3.png", "InStock": 76 },
    { "ProductID": 26, "ProductName": "バナナキャンディー", "CategoryName": "菓子類", "ImageUrl": "../../images/samples/nw/categories/3.png", "InStock": 15 },
    { "ProductID": 27, "ProductName": "メロンミルクキャンディー", "CategoryName": "菓子類", "ImageUrl": "../../images/samples/nw/categories/3.png", "InStock": 49 },
    { "ProductID": 28, "ProductName": "特選味のり", "CategoryName": "加工食品", "ImageUrl": "../../images/samples/nw/categories/7.png", "InStock": 26 },
    { "ProductID": 29, "ProductName": "ベターローストハム", "CategoryName": "肉類", "ImageUrl": "../../images/samples/nw/categories/6.png", "InStock": 0 },
    { "ProductID": 30, "ProductName": "いくら", "CategoryName": "魚介類", "ImageUrl": "../../images/samples/nw/categories/8.png", "InStock": 10 }
]

             <!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 -->
    <!-- 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>
    <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( 'overview-sample.ts' ).then( null, console.error.bind( console ) );
    </script>
</body>
</html>

             import { Component, NgModule } from '@angular/core';
import { IgGridComponent } from 'igniteui-angular-wrappers';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic }	from '@angular/platform-browser-dynamic';


declare var jQuery: any;
declare var northwindProducts: Array<any>;
@Component({
    selector: 'my-app',
    template: "<ig-grid [(options)]='gridOptions' [(widgetId)]='id'></ig-grid>"
})
export class AppComponent {
    private gridOptions: IgGrid;
    private id: string;

    constructor() {
        this.id = 'grid1';
        this.gridOptions = {
            primaryKey: "ProductID",
            width: '100%',
            columns: [
                { headerText: "製品 ID", key: "ProductID", dataType: "number", width: "15%", hidden: true },
                { headerText: "画像", key: "ImageUrl", dataType: "string", width: "15%", template: "<img style=\"height:50px;\" src=\"${ImageUrl}\"/>" },
                { headerText: "製品名", key: "ProductName", dataType: "string", width: "25%" },
                { headerText: "カテゴリ", key: "CategoryName", dataType: "string", width: "25%" },
                { headerText: "在庫数", key: "InStock", dataType: "number", width: "35%" }
            ],
            autofitLastColumn: false,
            autoGenerateColumns: false,
            dataSource: northwindProducts,
            responseDataKey: "results",
            autoCommit: true,
            features: [
                {
                    name: "Sorting",
                    sortingDialogContainment: "window"
                },
                {
                    name: "Filtering",
                    type: "local",
                    columnSettings: [
                        {
                            columnKey: "ImageUrl",
                            allowFiltering: false
                        },
                        {
                            columnKey: "InStock",
                            condition: "greaterThan"
                        }
                    ]
                },
                {
                    name: "GroupBy",
                    columnSettings: [
                        {
                            columnKey: "CategoryName",
                            isGroupBy: true
                        }
                    ]
                },
                {
                    name: "Selection"
                },
                {
                    name: "Paging",
                    pageSize: 10
                },
                {
                    name: "Resizing"
                },
                {
                    name: "Updating",
                    editMode: "dialog",
                    enableAddRow: false,
                    columnSettings: [
                        {
                            columnKey: "ImageUrl",
                            readOnly: false
                        }
                    ]
                }
            ]
        };
    }
}

@NgModule({
    imports: [BrowserModule],
    declarations: [AppComponent, IgGridComponent],
    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">
		<script type="text/babel">
			var App = React.createClass({
				render: function () {
					for (var i = 0; i < northwindProducts.length; i++) {
						northwindProducts[i].ImageUrl = "https://lorempixel.com/50/50/food/" + (i % 10) + "/";
					}
					return <IgGrid id="grid"
						primaryKey="ProductID"
						width="100%"
						columns={[
							{ headerText: "製品 ID", key: "ProductID", dataType: "number", width: "15%", hidden: true },
							{ headerText: "画像", key: "ImageUrl", dataType: "string", width: "15%", template: "<img style=\"height:50px;\" src=\"${ImageUrl}\"/>" },
							{ headerText: "製品名", key: "ProductName", dataType: "string", width: "25%" },
							{ headerText: "カテゴリ", key: "CategoryName", dataType: "string", width: "25%" },
							{ headerText: "在庫数", key: "InStock", dataType: "number", width: "35%" }
						]}
						autofitLastColumn={false}
						autoGenerateColumns={false}
						dataSource={northwindProducts}
						responseDataKey="results"
						autoCommi={true}
						features={[
							{name: "Sorting", sortingDialogContainment: "window"},
							{name: "Filtering", type: "local", columnSettings: [
									{ columnKey: "ImageUrl", allowFiltering: false },
									{ columnKey: "InStock", condition: "greaterThan" }
								]
							},
							{ name: "GroupBy", columnSettings: [ {columnKey: "CategoryName", isGroupBy: true }] },
							{ name: "Selection" },
							{ name: "Paging", pageSize: 10 },
							{ name: "Resizing" },
							{ name: "Updating", editMode: "dialog", enableAddRow: false, columnSettings: [
									{ columnKey: "ImageUrl", readOnly: false } ]
							}
						]}
					/>
				}
			});
			ReactDOM.render(
				<App />,
				document.getElementById("app")
			);
		</script>
	</div>
</body>
</html>

Ignite UI for jQuery | サンプル

検索結果

グリッド - 概要

コードビュー

Ignite UI for jQuery | サンプル

検索結果

グリッド - 概要

コード ビュー

コードビュー