製品版のみの機能
スプレッドシート - 表示の構成
このサンプルは、igSpreadsheet コントロールにサポートされるアクション メソッドの部分を使用する方法を紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>igSpreadsheet Configuration</title>
<!--<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />-->
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/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.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.lob.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.excel-bundled.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.spreadsheet-bundled.js"></script>
<style>
.ui-igspreadsheet .ui-menu-item {
white-space:nowrap;
}
.sampleContainer .ui-tabs .ui-tabs-panel {
background:#efefef;
border-radius:0;
border-color:#ddd;
border-bottom:none;
}
.sampleContainer .ui-tabs {
padding: 0;
border-radius:0;
border:none;
}
.sampleContainer .ui-tabs .ui-tabs-nav {
padding:0;
background:transparent;
border:none;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.sampleContainer .ui-tabs .ui-tabs-nav li.ui-state-default {
background:transparent;
}
.sampleContainer .ui-tabs .ui-tabs-nav li.ui-state-default,
.sampleContainer .ui-tabs .ui-tabs-nav li.ui-state-active {
border:none;
}
.sampleContainer .ui-tabs .ui-tabs-nav li.ui-state-default:hover {
background:#efefef;
}
.sampleContainer .ui-tabs .ui-tabs-nav li.ui-state-active {
background:#efefef;
color:#333;
border: 1px solid #ddd;
border-bottom: none;
}
.sampleContainer .ui-tabs .ui-tabs-nav li.ui-state-active a {
color:#333;
font-weight:bold;
}
.sampleContainer .ui-tabs .ui-tabs-nav li.ui-state-active:hover {
background:#efefef;
color:#333;
border: 1px solid #ddd;
border-bottom: none;
}
#freeze {
margin-right: 10px;
}
#zoomSlider {
max-width: 30%;
min-width: 100px;
float: left;
margin: 9px 9px 9px 0px;
}
.spreadsheet-sample-btn,
#freeze,
#zoomSlider,
.f-left {
float: left;
}
.spreadsheet-sample-btn
{
max-width: 200px;
padding: 8px;
background: #fff;
color:#444;
text-align: center;
border-radius: 3px;
font-size: 12px;
text-transform: uppercase;
margin-right: 10px;
cursor:pointer;
border:1px solid #ccc;
}
.spreadsheet-sample-btn:hover {
border-color:#09f;
}
#bold {
font-weight:bold
}
#italic {
font-style:italic;
}
#underline {
text-decoration:underline;
}
#delSheet:hover,
#delContent:hover
{
color:#fff;
background:indianred;
}
#delSheet,
#delContent {
border-color:indianred;
color:indianred;
}
.ui-widget.ui-widget-content.spreadsheet-sample {
border:none;
border-radius:0;
}
.show-row {
position:relative;
margin-bottom:10px;
}
.show-row:last-of-type {
margin-bottom:0;
}
.spreadsheet-sample .show-row-checkbox {
position:absolute;
left:0;
top:0;
}
.show-row-text {
padding-left:23px;
display:inline-block;
}
.spreadsheet-icon {
background:url('/images/samples/spreadsheet/sprite.png');
width:16px;
height:16px;
overflow:hidden;
}
.zoom-in-icon {
background-position: 0 0;
}
.zoom-out-icon {
background-position: 0 -16px;
}
.zoom-selection {
background-position: 0 -32px;
}
.zoom-reset {
background-position: 0 -224px;
}
.ribbon-bold {
background-position: 0 -304px;
}
.ribbon-italic {
background-position: 0 -320px;
}
.ribbon-underline {
background-position: 0 -208px;
}
.spreadsheet-sample a {
color:#666!important;
}
.spreadsheet-sample .ui-slider {
background:#555;
}
.spreadsheet-sample .ui-slider-handle {
background:#fff;
}
.decimal-places-enabled {
position: relative;
min-width: 400px;
float: left;
margin: 10px;
}
.decimal-places-enabled #decimalPlaces {
margin-right: 6px;
border-radius: 3px;
position: absolute;
left: 0;
top: 15px;
}
.label-decimal {
display:inline-block;
position: absolute;
left: 23px;
top: 15px;
}
.ui-igeditor-input-container,
.ui-igedit-container {
border-radius: 3px;
}
.decimal-places-count-container {
position: relative;
float: left;
margin-top: 10px;
}
.ui-igedit-input {
/*font-size: 12px!important;
font-weight: bold;
text-align: center!important;*/
}
</style>
<meta charset="utf-8" />
</head>
<body>
<div class="actions spreadsheet-sample" id="tabs">
<ul>
<li><a href="#tabs-1">表示</a></li>
<li><a href="#tabs-2">ズーム レベル</a></li>
<li><a href="#tabs-3">シート</a></li>
<li><a href="#tabs-4">書式設定</a></li>
<li><a href="#tabs-5">削除</a></li>
</ul>
<div class="show clearfix" id="tabs-1">
<div class="show-row">
<span for="gridlines" class="show-row-text">
<div id="gridlines" class="show-row-checkbox"></div>
グリッド線
</span>
</div>
<div class="show-row">
<span for="headings" class="show-row-text">
<div id="headings" class="show-row-checkbox"></div>
見出し
</span>
</div>
<div class="show-row">
<span for="formulabar" class="show-row-text">
<div id="formulabar" class="show-row-checkbox"></div>
数式バー
</span>
</div>
</div>
<div class="zoom clearfix" id="tabs-2">
<div class="zoom-slider f-left">
<div id="zoomOut" class="spreadsheet-sample-btn">
<div class="spreadsheet-icon zoom-in-icon"></div>
</div>
<div id="zoomSlider"></div>
<div id="zoomIn" class="spreadsheet-sample-btn">
<div class="spreadsheet-icon zoom-out-icon"></div>
</div>
</div>
<div class="f-left">
<div id="zoom" class="spreadsheet-sample-btn">
<div class="spreadsheet-icon zoom-reset"></div>
</div>
<div id="zoomSelection" class="spreadsheet-sample-btn">
<div class="spreadsheet-icon zoom-selection"></div>
</div>
</div>
</div>
<div class="sheet clearfix" id="tabs-3">
<div id="freeze"></div>
<div id="split" class="spreadsheet-sample-btn">分割</div>
</div>
<div class="formatting clearfix" id="tabs-4">
<div id="bold" class="spreadsheet-sample-btn">
<div class="spreadsheet-icon ribbon-bold"></div>
</div>
<div id="italic" class="spreadsheet-sample-btn">
<div class="spreadsheet-icon ribbon-italic"></div>
</div>
<div id="underline" class="spreadsheet-sample-btn">
<div class="spreadsheet-icon ribbon-underline"></div>
</div>
<div class="clearfix"></div>
<div class="decimal-places-count-container">
<div id="decimalPlacesCount"></div>
</div>
<div class="decimal-places-enabled">
<div id="decimalPlaces"></div>
<span class="label-decimal">小数位の書式設定を有効にする</span>
</div>
</div>
<div class="delete clearfix" id="tabs-5">
<div id="delSheet" class="spreadsheet-sample-btn">シートを削除</div>
<div id="delContent" class="spreadsheet-sample-btn">コンテンツを削除</div>
</div>
</div>
<div id="spreadsheet2"></div>
<script type="text/javascript">
$( function () {
if ($("#spreadsheet2").length !== 0) {
$("#tabs").tabs();
$("#spreadsheet2").igSpreadsheet({
height: "600",
width: "100%"
});
var workbook = null;
var xhr = new XMLHttpRequest();
xhr.open('GET', '/data-files/FormattingData.xlsx', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function (e) {
// response is unsigned 8 bit integer
var responseArray = new Uint8Array(this.response);
$.ig.excel.Workbook.load(responseArray, function () {
workbook = arguments[0];
$("#spreadsheet2").igSpreadsheet("option", "workbook", workbook);
}, function () {
console.log("fail");
})
};
xhr.send();
$("#zoomSlider").slider({
change: function (event, ui) {
$("#spreadsheet2").igSpreadsheet("option", "zoomLevel", ui.value);
},
min: 10,
max: 400,
value: 100,
step: 1
});
$("#zoomIn").click(function () {
$('#spreadsheet2').igSpreadsheet('executeAction', "zoomIn");
var zoomInLevel = $('#spreadsheet2').igSpreadsheet('option', "zoomLevel");
$("#zoomSlider").slider("value", zoomInLevel);
});
$("#zoomOut").click(function () {
$('#spreadsheet2').igSpreadsheet('executeAction', "zoomOut");
var zoomOutLevel = $('#spreadsheet2').igSpreadsheet('option', "zoomLevel");
$("#zoomSlider").slider("value", zoomOutLevel);
});
$("#zoom").click(function () {
$('#spreadsheet2').igSpreadsheet('executeAction', "zoomTo100");
var zoomLevel = $('#spreadsheet2').igSpreadsheet('option', "zoomLevel");
$("#zoomSlider").slider("value", zoomLevel);
});
$("#zoomSelection").click(function () {
$('#spreadsheet2').igSpreadsheet('executeAction', "zoomToSelection");
var zoomSelectionLevel = $('#spreadsheet2').igSpreadsheet('option', "zoomLevel");
$("#zoomSlider").slider("value", zoomSelectionLevel);
});
$("#split").click(function () {
$('#spreadsheet2').igSpreadsheet('executeAction', "toggleSplitPanes");
});
$("#gridlines").igCheckboxEditor({
checked: true,
valueChanged: function (evt, ui) {
if (ui.newState) {
$("#spreadsheet2").igSpreadsheet("option", "areGridlinesVisible", true);
} else {
$("#spreadsheet2").igSpreadsheet("option", "areGridlinesVisible", false);
}
}
});
$("#headings").igCheckboxEditor({
checked: true,
valueChanged: function (evt, ui) {
if (ui.newState) {
$("#spreadsheet2").igSpreadsheet("option", "areHeadersVisible", true);
} else {
$("#spreadsheet2").igSpreadsheet("option", "areHeadersVisible", false);
}
}
});
$("#formulabar").igCheckboxEditor({
checked: true,
valueChanged: function (evt, ui) {
if (ui.newState) {
$("#spreadsheet2").igSpreadsheet("option", "isFormulaBarVisible", true);
} else {
$("#spreadsheet2").igSpreadsheet("option", "isFormulaBarVisible", false);
}
}
});
var listItems = [{ id: 1, action: "ペインを固定" }, { id: 2, action: "最初の行を固定" }, { id: 3, action: "最初の列を固定" }];
$("#freeze").igCombo({
dataSource: listItems,
textKey: "action",
valueKey: "action",
width: "150px",
enableClearButton : false,
autoSelectFirstMatch: false,
selectionChanged: function (evt, ui) {
if (ui.items[0].data.id == 1) {
if (ui.items[0].data.action == "ペイン固定を解除") {
var currentValue = ui.items[0].data.action;
listItems[0].action = "ペインを固定";
$("#freeze").igCombo("dataBind");
$("#freeze").igCombo("text", currentValue);
} else {
var paneValue = ui.items[0].data.action;
listItems[0].action = "ペイン固定を解除";
$("#freeze").igCombo("dataBind");
$("#freeze").igCombo("text", paneValue);
}
$('#spreadsheet2').igSpreadsheet('executeAction', "toggleFreezePanes");
} else if (ui.items[0].data.id == 2) {
$('#spreadsheet2').igSpreadsheet('executeAction', "freezeFirstRow");
listItems[0].action = "ペイン固定を解除";
$("#freeze").igCombo("dataBind");
$("#freeze").igCombo("value", ui.items[0].data.action);
} else {
$('#spreadsheet2').igSpreadsheet('executeAction', "freezeFirstColumn");
listItems[0].action = "ペイン固定を解除";
$("#freeze").igCombo("dataBind");
$("#freeze").igCombo("value", ui.items[0].data.action);
}
}
});
$("#delSheet").click(function () {
$('#spreadsheet2').igSpreadsheet('executeAction', "deleteWorksheets");
});
$("#delContent").click(function () {
$('#spreadsheet2').igSpreadsheet('executeAction', "clearContents");
});
$("#bold").click(function () {
$('#spreadsheet2').igSpreadsheet('executeAction', "toggleBold");
});
$("#italic").click(function () {
$('#spreadsheet2').igSpreadsheet('executeAction', "toggleItalic");
});
$("#underline").click(function () {
$('#spreadsheet2').igSpreadsheet('executeAction', "toggleUnderline");
});
$("#decimalPlaces").igCheckboxEditor({
valueChanged: function (evt, ui) {
$("#spreadsheet2").igSpreadsheet("option", "isFixedDecimalEnabled", ui.newState);
$("#decimalPlacesCount").igNumericEditor("option", "disabled", !ui.newState);
}
}).igNotifier({
width: 200,
showOn: "mouseenter",
mode: "popover",
appendTo: ".decimal-places-enabled",
direction: "right",
position: "right",
notifyLevel: "info",
headerTemplate: {
closeButton: false
},
locale: {
infoMsg: "編集モードで整数が入力されたときに固定小数位が自動的に追加されるかどうかを示します。"
},
closeOnBlur: true
});;
$("#decimalPlacesCount").igNumericEditor({
minValue: 1,
maxValue: 10,
disabled: true,
value: $("#spreadsheet2").igSpreadsheet("option", "fixedDecimalPlaceCount"),
width: 34,
height: 34,
valueChanged: function (evt, ui) {
$("#spreadsheet2").igSpreadsheet("option", "fixedDecimalPlaceCount", ui.newValue);
}
}).igNotifier({
width: 200,
showOn: "mouseenter",
mode: "popover",
appendTo: ".decimal-places-count-container",
direction: "right",
position: "right",
notifyLevel: "info",
headerTemplate: {
closeButton: false
},
locale: {
infoMsg: "編集モードで入力された整数に使用される小数位。"
},
closeOnBlur: true
});
}
});
</script>
</body>
</html>