製品版のみの機能
グリッド - 行セレクター
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
デフォルトの行セレクター
チェックボックス付きの行セレクター
行番号
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
このサンプルでは、igGrid コントロールで行セレクターを構成する方法を紹介します。
注: タッチ デバイスで igGrid 行を選択するには、igGrid の行セレクターのチェックボックスを使用する必要があります。
このサンプルは、タッチ デバイス ブラウザーで開かれた場合に igGrid のチェックボックスが有効になります。デスクトップ ブラウザーでは必要がないため無効になります。
コード ビュー
クリップボードへコピー
<!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 Default RowSelectors igGrid -->
<table id="defaultRowSelectors">
</table>
<br />
<h3>チェックボックス付きの行セレクター</h3>
<!-- Target element for the Checkboxes RowSelectors igGrid -->
<table id="cbRowSelectors">
</table>
<br />
<h3>行番号</h3>
<!-- Target element for the RowNumbering igGrid -->
<table id="rowNumbering">
</table>
<!--Sample JSON Data-->
<script src="/data-files/nw-employees.js"></script>
<script>
$(function () {
/*----------------- Instantiation -------------------------*/
createDefaultSelectorsGrid();
createCboxSelectorsGrid();
createRowNumberingGrid();
});
function createDefaultSelectorsGrid() {
$("#defaultRowSelectors").igGrid({
width: "100%",
autoGenerateColumns: false,
dataSource: northwindEmployees,
responseDataKey: "results",
dataSourceType: "json",
columns: [
{ headerText: "社員 ID", key: "ID", dataType: "number", width: "120px", hidden: true },
{ headerText: "名前", key: "Name", dataType: "string" },
{ headerText: "役職", key: "Title", dataType: "string"},
{ headerText: "電話", key: "Phone", dataType: "string" },
{ headerText: "国名", key: "Country", dataType: "string" }
],
features: [
{
name: 'Responsive',
enableVerticalRendering: false,
columnSettings: [
{
columnKey: 'Country',
classes: 'ui-hidden-phone'
}
]
},
{
name: "RowSelectors",
enableRowNumbering: false
},
{
name: "Selection"
}
]
});
}
function createCboxSelectorsGrid() {
$("#cbRowSelectors").igGrid({
width: "100%",
autoGenerateColumns: false,
dataSource: northwindEmployees,
responseDataKey: "results",
dataSourceType: "json",
columns: [
{ headerText: "社員 ID", key: "ID", dataType: "number", width: "120px", hidden: true },
{ headerText: "名前", key: "Name", dataType: "string"},
{ headerText: "役職", key: "Title", dataType: "string" },
{ headerText: "電話", key: "Phone", dataType: "string" },
{ headerText: "国名", key: "Country", dataType: "string" }
],
features: [
{
name: 'Responsive',
enableVerticalRendering: false,
columnSettings: [
{
columnKey: 'Country',
classes: 'ui-hidden-phone'
}
]
},
{
name: "RowSelectors",
enableCheckBoxes: true,
enableRowNumbering: false
},
{
name: "Selection"
}
]
});
}
function createRowNumberingGrid() {
$("#rowNumbering").igGrid({
width: "100%",
autoGenerateColumns: false,
dataSource: northwindEmployees,
responseDataKey: "results",
dataSourceType: "json",
columns: [
{ headerText: "社員 ID", key: "ID", dataType: "number", width: "120px", hidden: true },
{ headerText: "名前", key: "Name", dataType: "string" },
{ headerText: "役職", key: "Title", dataType: "string" },
{ headerText: "電話", key: "Phone", dataType: "string" },
{ headerText: "国名", key: "Country", dataType: "string" }
],
features: [
{
name: "Responsive",
enableVerticalRendering: false,
columnSettings: [
{
columnKey: 'Country',
classes: 'ui-hidden-phone'
}
]
},
{
name: "RowSelectors",
enableRowNumbering: true
},
{
name: "Selection"
}
]
});
}
</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: "日本語" }] }
]