製品版のみの機能
グリッド - 選択
このサンプルでは、igGrid の選択機能およびそのセルと行選択モードを示します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
単一のセル選択
セルの複数選択
複数の行選択
行セレクターとの複数行選択
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
セル モードでは、単一のセルまたは複数のセルを選択できます。行モードでは、単一の行または複数の行を選択できます。multipleSelection を true に設定すると、各モードを単一または複数の選択用に構成できます。
上のグリッドは単一セル選択モードに構成されます。下のグリッドは複数行選択モードに構成されます。
コード ビュー
クリップボードへコピー
<!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>
<h3>単一のセル選択</h3>
<!-- Target element for the CellSelection igGrid -->
<table id="singleCellSelectionGrid"></table>
<br />
<h3>セルの複数選択</h3>
<!-- Target element for the CellSelection igGrid -->
<table id="multipleCellSelectionGrid"></table>
<br />
<h3>複数の行選択</h3>
<!-- Target element for the RowSelection igGrid -->
<table id="rowSelectionGrid"></table>
<br />
<h3>行セレクターとの複数行選択</h3>
<!-- Target element for the RowSelection igGrid -->
<table id="rowSelectionRowSelectorsGrid"></table>
<!--Sample JSON Data-->
<script src="/data-files/nw-employees.js"></script>
<script>
$(function () {
createSingleCellSelectionGrid();
createMultipleCellSelectionGrid();
createRowSelectionGrid();
createRowSelectionRowSelectorsGrid();
});
function createSingleCellSelectionGrid() {
$("#singleCellSelectionGrid").igGrid({
width: "100%",
autoGenerateColumns: false,
dataSource: northwindEmployees,
responseDataKey: "results",
dataSourceType: "json",
columns: [
{ headerText: "社員 ID", key: "ID", dataType: "number", width: "120px" },
{ headerText: "名前", key: "Name", dataType: "string" },
{ headerText: "役職", key: "Title", dataType: "string" },
{ headerText: "電話", key: "Phone", dataType: "string" }
],
features: [
{
name: 'Responsive',
enableVerticalRendering: false,
columnSettings: [
{
columnKey: 'ID',
classes: 'ui-hidden-phone'
}
]
},
{
name: "Selection",
mode: "cell",
multipleSelection: false,
touchDragSelect: false, // this is true by default
multipleCellSelectOnClick: false
}
]
});
}
function createMultipleCellSelectionGrid() {
$("#multipleCellSelectionGrid").igGrid({
width: "100%",
autoGenerateColumns: false,
dataSource: northwindEmployees,
responseDataKey: "results",
dataSourceType: "json",
columns: [
{ headerText: "社員 ID", key: "ID", dataType: "number", width: "120px" },
{ headerText: "名前", key: "Name", dataType: "string" },
{ headerText: "役職", key: "Title", dataType: "string" },
{ headerText: "電話", key: "Phone", dataType: "string" }
],
features: [
{
name: 'Responsive',
enableVerticalRendering: false,
columnSettings: [
{
columnKey: 'ID',
classes: 'ui-hidden-phone'
}
]
},
{
name: "Selection",
mode: "cell",
multipleSelection: true,
touchDragSelect: false, // this is true by default
multipleCellSelectOnClick: false,
allowMultipleRangeSelection: true
}
]
});
}
function createRowSelectionGrid() {
$("#rowSelectionGrid").igGrid({
width: "100%",
autoGenerateColumns: false,
dataSource: northwindEmployees,
responseDataKey: "results",
dataSourceType: "json",
columns: [
{ headerText: "社員 ID", key: "ID", dataType: "number", width: "120px" },
{ headerText: "名前", key: "Name", dataType: "string" },
{ headerText: "役職", key: "Title", dataType: "string" },
{ headerText: "電話", key: "Phone", dataType: "string" }
],
features: [
{
name: 'Responsive',
enableVerticalRendering: false,
columnSettings: [
{
columnKey: 'ID',
classes: 'ui-hidden-phone'
}
]
},
{
name: "Selection",
mode: 'row',
multipleSelection: true
}
]
});
}
function createRowSelectionRowSelectorsGrid() {
$("#rowSelectionRowSelectorsGrid").igGrid({
width: "100%",
autoGenerateColumns: false,
dataSource: northwindEmployees,
responseDataKey: "results",
dataSourceType: "json",
columns: [
{ headerText: "社員 ID", key: "ID", dataType: "number", width: "120px" },
{ headerText: "名前", key: "Name", dataType: "string" },
{ headerText: "役職", key: "Title", dataType: "string" },
{ headerText: "電話", key: "Phone", dataType: "string" }
],
features: [
{
name: 'Responsive',
enableVerticalRendering: false,
columnSettings: [
{
columnKey: 'ID',
classes: 'ui-hidden-phone'
}
]
},
{
name: "Selection",
mode: 'row',
multipleSelection: true
},
{
name: "RowSelectors",
enableCheckBoxes: true,
enableRowNumbering: false,
enableSelectAllForPaging: true // this option is true by default
},
{
name: "Paging",
pageSize: 5
}
]
});
}
</script>
</body>
</html>
var northwindEmployees = [
{ "ID": 1, "Name": "サラ ヴィッテリ", "Title": "ソフトウェア エンジニア", "ImageUrl": "../../images/samples/nw/employees/1.png", "Phone": "(206) 555-9857", "PhoneUrl": "tel:(206) 555-9857", "BirthDate":"1948-12-08T00:00:00", "HireDate":"1992-05-01T00:00:00", "Country": "USA", "Languages": [{ name: "英語" }, { name: "ロシア語" }] },
{ "ID": 2, "Name": "デイビット グリーン", "Title": "最高技術責任者", "ImageUrl": "../../images/samples/nw/employees/2.png", "Phone": "(206) 555-9482", "PhoneUrl": "tel:(206) 555-9482", "BirthDate":"1952-02-19T00:00:00", "HireDate":"1992-08-14T00:00:00", "Country": "USA", "Languages": [{ name: "英語" }, { name: "ドイツ語" }] },
{ "ID": 3, "Name": "ジジ マッシュー", "Title": "ソフトウェア エンジニア", "ImageUrl": "../../images/samples/nw/employees/3.png", "Phone": "(206) 555-3412", "PhoneUrl": "tel:(206) 555-3412", "BirthDate":"1963-08-30T00:00:00Z", "HireDate":"1992-04-01T00:00:00Z", "Country": "USA", "Languages": [{ name: "英語" }] },
{ "ID": 4, "Name": "アリス カートマン", "Title": "ソフトウェア エンジニア", "ImageUrl": "../../images/samples/nw/employees/4.png", "Phone": "(206) 555-8122", "PhoneUrl": "tel:(206) 555-8122", "BirthDate":"1937-09-19T00:00:00Z","HireDate":"1993-05-03T00:00:00Z", "Country": "USA", "Languages": [{ name: "英語" }, { name: "スペイン語" }] },
{ "ID": 5, "Name": "マイケル ラファイエット", "Title": "システム開発 VP", "ImageUrl": "../../images/samples/nw/employees/5.png", "Phone": "(71) 555-4848", "PhoneUrl": "tel:(71) 555-4848", "BirthDate":"1955-03-04T00:00:00Z","HireDate":"1993-10-17T00:00:00Z", "Country": "UK", "Languages": [{ name: "英語" }, { name: "イタリア語" }] },
{ "ID": 6, "Name": "クリス ウィスルトン", "Title": "ソフトウェア エンジニア", "ImageUrl": "../../images/samples/nw/employees/6.png", "Phone": "(71) 555-7773", "PhoneUrl": "tel:(71) 555-7773", "BirthDate":"1963-07-02T00:00:00Z","HireDate":"1993-10-17T00:00:00Z", "Country": "UK", "Languages": [{ name: "英語" }, { name: "ポルトガル語" }] },
{ "ID": 7, "Name": "ジェームス オークビル", "Title": "ソフトウェア エンジニア", "ImageUrl": "../../images/samples/nw/employees/7.png", "Phone": "(71) 555-5598", "PhoneUrl": "tel:(71) 555-5598", "BirthDate":"1960-05-29T00:00:00Z","HireDate":"1994-01-02T00:00:00Z", "Country": "UK", "Languages": [{ name: "英語" }, { name: "フランス語" }, { name: "スペイン語" }] },
{ "ID": 8, "Name": "マーサ ブラウン", "Title": "システム アドミニストレーター", "ImageUrl": "../../images/samples/nw/employees/8.png", "Phone": "(206) 555-1189", "PhoneUrl": "tel:(206) 555-1189", "BirthDate":"1958-01-09T00:00:00Z","HireDate":"1994-03-05T00:00:00Z", "Country": "USA", "Languages": [{ name: "英語" }, { name: "中国語" }] },
{ "ID": 9, "Name": "サラ レクラー", "Title": "ソフトウェア エンジニア", "ImageUrl": "../../images/samples/nw/employees/9.png", "Phone": "(71) 555-4444", "PhoneUrl": "tel:(71) 555-4444", "BirthDate":"1966-01-27T00:00:00Z","HireDate":"1994-11-15T00:00:00Z", "Country": "UK", "Languages": [{ name: "英語" }, { name: "日本語" }] }
]