製品版のみの機能
グリッド - 行編集ダイアログ
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
このサンプルでは、igGrid の更新機能の行編集ダイアログ機能を紹介します。行編集ダイアログは、editorsTemplate および dialogTemplate の 2 つのテンプレート型によってカスタマイズできます。
editorsTemplate は、グリッドの列コレクションの各列で実行され、dialogTemplate は編集中レコードのために描画されます。
行編集ダイアログを表示するには、行をクリックするか、タップします。
コード ビュー
クリップボードへコピー
<!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" />
<style>
.row-edit-dialog-container-cols
{
width:100%;
overflow:hidden;
border-bottom:1px solid #ccc;
padding-bottom:15px;
}
.row-edit-dialog-container-cols table
{
width: 100%;
border-collapse: collapse;
}
.row-edit-dialog-container-cols table tbody td
{
border:none !important;
padding: 0 4px 10px;
}
.row-edit-dialog-container-head
{
border-bottom:1px solid #ccc;padding-bottom:10px;margin-top:10px;margin-bottom:25px;font-size:16px;
}
.ui-dialog .ui-dialog-buttonpane
{
margin-top:0;
padding-top:0;
}
.ui-dialog .ui-dialog-buttonpane button
{
margin:0.5em 0 0.5em 0.4em;
}
.ui-iggrid .ui-widget-content.ui-dialog
{
border-color:#888;
}
.ui-dialog-title
{
text-transform:uppercase;
margin:0;
font-size:90%;
}
.ui-dialog .ui-dialog-titlebar
{
padding: 0.7em 1em;
}
</style>
<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>
<!--Sample JSON Data-->
<script src="/data-files/nw-employees.js"></script>
<!-- Target element for the igGrid -->
<table id="grid">
</table>
<script id="dialogTemplate" type="text/html">
<div class="row-edit-dialog-container-head"><strong>${Name}</strong></div>
<div class="row-edit-dialog-container-cols">
<div style="float: left;">
<table>
<colgroup>
<col style="width: 30%;" />
<col style="width: 70%;" />
</colgroup>
<tbody data-render-tmpl="true"></tbody>
</table>
</div>
<div style="width: 160px; float: right;">
<img width="100" height="90" src="${ImageUrl}" alt="${Name}" title="${Name}" style="float:right;" />
</div>
</div>
</script>
<script id="editorsTemplate" type="text/html">
<tr>
<td style="text-align:right;color:#777;"><strong>${headerText}</strong></td>
<td><input data-editor-for-${key}="true" /></td>
</tr>
</script>
<script type="text/javascript">
$( function ()
{
$("#grid").igGrid({
dataSource: northwindEmployees,
primaryKey: "ID",
width: "100%",
height: "600px",
autoGenerateColumns: false,
columns: [
{ headerText: "社員 ID", key: "ID", dataType: "number", hidden: true },
{ headerText: "画像", key: "ImageUrl", dataType: "object", template: "<img width='100' height='90' src='${ImageUrl}' alt='${Name}' title='${Name}' />" },
{ headerText: "名前", key: "Name", dataType: "string" },
{ headerText: "役職", key: "Title", dataType: "string" },
{ headerText: "電話", key: "Phone", dataType: "string" },
{ headerText: "雇用日", key: "HireDate", dataType: "date" }
],
features: [
{
name: "Updating",
enableAddRow: false,
enableDeleteRow: false,
editMode: "dialog",
columnSettings: [
{
columnKey: "ImageUrl",
readOnly: true
},
{
columnKey: "Name",
readOnly: true
}
],
rowEditDialogOptions: {
width: "530px",
height: "410px",
dialogTemplateSelector: "#dialogTemplate",
editorsTemplateSelector: "#editorsTemplate",
showReadonlyEditors: false,
}
}
]
});
});
</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: "日本語" }] }
]