製品版のみの機能
グリッド - 概要
igGrid は jQuery グリッドです。業務用機能、タッチ サポート、およびレスポンシブ web デザイン機能を提供します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
igGrid を JSON、XML、HTML テーブル、.NET コレクション、.NET DataTable などのデータ ソースにバインドできます。
igGrid は、KnockoutJS、History.js、JsRender、および Bootstrap などの人気のあるオープン ソース ライブラリと操作します。
以下の業務用機能を提供します:
コード ビュー
クリップボードへコピー
<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/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" /> <link href="http://cdn-na.infragistics.com/igniteui/2024.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/2024.2/latest/js/infragistics.core.js"></script> <script src="http://cdn-na.infragistics.com/igniteui/2024.2/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>