製品版のみの機能
グリッド - Excel からの貼り付け
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
このサンプルでは、Excel から igGrid の貼り付けを実装する方法を紹介します。
任意の Excel スプレッドシート (またはこのファイル) を開き、行をコピーした後にキーボードを使用してグリッドに貼り付けます。
2 つのモードがあります。
データを新しいレコードとして貼り付け - このモードの場合、貼り付けられたレコードがグリッドの新しい行として追加されます。
アクティブ セルから開始する貼り付け - このモードの場合、貼り付けられたレコードがアクティブなグリッド セルから開始してデータを置き換えます。
2 つのモードがあります。
データを新しいレコードとして貼り付け - このモードの場合、貼り付けられたレコードがグリッドの新しい行として追加されます。
アクティブ セルから開始する貼り付け - このモードの場合、貼り付けられたレコードがアクティブなグリッド セルから開始してデータを置き換えます。
コード ビュー
クリップボードへコピー
<!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>
<fieldset id="pasteOptions" class="explorer">
<label for="pasteMode">貼り付けモードの選択:</label>
<input id="pasteMode" />
</fieldset>
<fieldset class="explorer">
<table id="grid"></table>
</fieldset>
<fieldset id="editingOptions" class="explorer">
<input type="button" id="saveChanges" class="button-style" value="変更の保存" />
<input type="button" id="undo" class="button-style" value="元に戻す" />
<input type="button" id="redo" class="button-style" value="やり直し" />
</fieldset>
<script src="/data-files/nw-employees.js"></script>
<script>
$(function () {
var pasteMode = "データを新規レコードとして貼り付ける", updates;
var grid = $("#grid");
//editors and buttons
$("#pasteMode").igCombo({
mode: "dropdown",
width: "300px",
dataSource: [
"データを新規レコードとして貼り付ける",
"アクティブ セルから開始して貼り付ける"
],
selectionChanged: function (evt, ui) {
if (ui.items.length == 1) {
pasteMode = ui.items[0].data.value;
}
}
});
$("#saveChanges").igButton({ labelText: $("#saveChanges").val(), disabled: true });
$("#undo").igButton({ labelText: $("#undo").val(), disabled: true });
$("#redo").igButton({ labelText: $("#redo").val(), disabled: true });
$("#undo").on('igbuttonclick',
function (e, args) {
updates = $.extend({}, grid.data('igGrid').pendingTransactions());
$.each(updates, function (index, transaction) {
grid.igGrid("rollback", transaction.rowId, true);
});
$("#redo").igButton("option", "disabled", false);
$("#undo").igButton("disable");
$("#saveChanges").igButton("disable");
return false;
}
);
$("#redo").on('igbuttonclick',
function (e) {
$.each(updates, function (index, transaction) {
switch (transaction.type) {
case "row":
grid.igGridUpdating('updateRow', transaction.rowId, transaction.row, null, false);
break;
case "newrow":
grid.igGridUpdating('addRow', transaction.row, false);
break;
case "deleterow":
grid.igGridUpdating('deleteRow', transaction.rowId, false);
break;
}
});
$(this).igButton("disable");
$("#undo").igButton("option", "disabled", false);
$("#saveChanges").igButton("option", "disabled", false);
}
);
$("#saveChanges").on('igbuttonclick',
function (e) {
grid.igGrid("commit");
updates = null;
$("#undo").igButton("disable");
$(this).igButton("disable");
return false;
}
);
grid.on("iggridupdatingdatadirty", function (event, ui) {
grid.igGrid("commit");
updates = null;
$("#undo").igButton("disable");
$("#saveChanges").igButton("disable");
//saving local changes to the datasource when sorting and filtering
return false;
});
//grid definition and functionality
$("#grid").igGrid({
width: "100%",
autoGenerateColumns: false,
dataSource: northwindEmployees,
responseDataKey: "results",
dataSourceType: "json",
primaryKey: "ID",
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: "Updating"
},
{
name: "Selection",
mode: "cell"
},
{
name: "Filtering"
},
{
name: "Sorting"
}
]
}).on('focusin', function (e) {
if ($("#pasteHelper").length > 0) {
return;
}
var container = $(document.body);
var containerDiv = $("<div></div>")
.css({
"position": "fixed",
"top": -10000,
"left": -10000
});
//create textarea for handling paste event. Text area will be transparent.
var textArea = $("<textarea id='pasteHelper'></textarea>")
.css({
"opacity": 0,
"overflow": "hidden"
})
.appendTo(containerDiv);
containerDiv.appendTo(container);
textArea.on("paste", pasteHandler);
}).on('keydown', function (evnt) {
//handle grid's keydown event
var ctrl = evnt.ctrlKey, key = evnt.keyCode;
if ((ctrl || evnt.metaKey) && key == 86 || evnt.shiftKey && key == 45) // Ctrl-V || Shift-Ins
{
//on paste (Ctrl+V) move focus to textarea
$("#pasteHelper").focus();
}
});
grid.on("iggridupdatingrowdeleted", function (e, args) {
$("#undo").igButton("option", "disabled", false);
$("#saveChanges").igButton("option", "disabled", false);
});
grid.on("iggridupdatingrowadded", function (e, args) {
$("#undo").igButton("option", "disabled", false);
$("#saveChanges").igButton("option", "disabled", false);
});
grid.on("iggridupdatingeditrowended", function (e, args) {
if (args.update) {
$("#undo").igButton("option", "disabled", false);
$("#saveChanges").igButton("option", "disabled", false);
}
});
//paste event handler for the textArea.
function pasteHandler(event) {
var data;
//get clipboard data - from window.cliboardData for IE or from the original event's argumets.
if (window.clipboardData) {
window.event.returnValue = false;
data = window.clipboardData.getData("text");
} else {
data = event.originalEvent.clipboardData.getData('text/plain');
}
//process the clipboard data
var processedData = ProcessData(data);
if (pasteMode === "アクティブ セルから開始して貼り付ける") {
//update starting from selected cell
UpdateRecords(processedData);
} else {
//add to the grid
AddRecords(processedData)
}
$("#undo").igButton("option", "disabled", false);
$("#saveChanges").igButton("option", "disabled", false);
}
function ProcessData(data) {
var pasteData = data.split("\n");
for (var i = 0; i < pasteData.length; i++) {
pasteData[i] = pasteData[i].split("\t");
// Check if last row is a dummy row
if (pasteData[pasteData.length - 1].length == 1 && pasteData[pasteData.length - 1][0] == "") {
pasteData.pop();
}
//remove empty data
if (pasteData.length == 1 && pasteData[0].length == 1 && (pasteData[0][0] == "" || pasteData[0][0] == "\r")) {
pasteData.pop();
}
}
return pasteData;
}
function UpdateRecords(processedData) {
//get active cell. Pasting will start from this cell as its top-right endpoint.
var cell = $("#grid").igGridSelection("selectedCell");
if (!cell) {
alert("アクティブ セルがありません。貼り付けを開始するセルを選択してください。");
return;
}
cell.element.focus();
var cellIndex = cell.index;
var rowIndex = cell.rowIndex;
//Get visible columns
var columns = getVisibleColumns();
//Get Updating feature
var updating = grid.data("igGridUpdating");
var excessColsCount = cellIndex + processedData[0].length - columns.length;
showNotification(cell.row, excessColsCount);
//update grid records based on the processed clipboard data
for (var i = 0; i < processedData.length; i++) {
var gridRow = grid.igGrid("rowAt", rowIndex + i);
var curentDataRow = processedData[i];
var rowData = {};
for (var j = 0; j < columns.length - cellIndex; j++) {
var currentCell = curentDataRow[j];
var colKey = columns[j + cellIndex].key;
rowData[columns[j + cellIndex].key] = currentCell;
}
updating.updateRow(parseInt($(gridRow).attr("data-id")), rowData);
}
}
function AddRecords(processedData) {
var columns = getVisibleColumns();
var fRowID;
for (var i = 0; i < processedData.length; i++) {
var curentDataRow = processedData[i];
var rowData = {};
for (var j = 0; j < columns.length; j++) {
var currentCell = curentDataRow[j];
var colKey = columns[j].key;
if (columns[j].dataType === "number") {
rowData[colKey] = parseInt(currentCell);
} else {
rowData[colKey] = currentCell;
}
}
//generate PK
rowData[grid.igGrid("option", "primaryKey")] = $("#grid").igGrid("allRows").length + 1;
if (fRowID === undefined) {
fRowID = rowData[grid.igGrid("option", "primaryKey")];
}
$("#grid").igGridUpdating("addRow", rowData);
}
var newRec = $("#grid").igGrid("rowById", fRowID);
var excessColsCount = processedData[0].length - columns.length;
showNotification(newRec, excessColsCount);
}
function getVisibleColumns() {
var visibleCols = [];
var columns = grid.igGrid("option", "columns");
$(columns).each(function () {
if (this.hidden !== true) {
visibleCols.push(this);
}
});
return visibleCols;
}
function showNotification(rec, excessColsCount) {
if (!rec.data("igNotifier")) {
rec.igNotifier({
mode: "popover",
direction: "top",
showOn: "manual",
position: "start",
maxWidth: 50 / 100 * grid.width()
});
}
if (excessColsCount > 0) {
var warning = "グリッドに利用可能な列を超える列を貼り付けました。貼り付けたデータの最後の {count} 列は破棄されました。";
//PasteWarning
rec.igNotifier("notify", "warning", warning.replace("{count}", excessColsCount));
} else {
//SuccessfullyPasted
rec.igNotifier("notify", "success", "データをグリッドに正常に貼り付けました。");
}
setTimeout(function () {
rec.focus();
$(rec).on("blur", function () {
rec.igNotifier("hide");
});
}, 0);
}
});
</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: "日本語" }] }
]