<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>ActiveReportsJSデモ</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdn.materialdesignicons.com/2.8.94/css/materialdesignicons.min.css"
/>
<script src="/activereportsjs/demos/arjs/dist/ar-js-core.js"></script>
<script src="/activereportsjs/demos/arjs/dist/ar-js-viewer.js"></script>
<script src="/activereportsjs/demos/arjs/dist/ar-js-pdf.js"></script>
<script src="/activereportsjs/demos/arjs/dist/ar-js-xlsx.js"></script>
<script src="/activereportsjs/demos/arjs/dist/ar-js-html.js"></script>
<script src="/activereportsjs/demos/arjs-localization/dist/ar-js-locales.js"></script>
<script type="text/javascript" src="data.js"></script>
<script src="$DEMOROOT$/lib/purejs/license.js"></script>
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
type="text/css"
href="/activereportsjs/demos/arjs/styles/ar-js-ui.css"
/>
<link
rel="stylesheet"
type="text/css"
href="/activereportsjs/demos/arjs/styles/ar-js-viewer.css"
/>
<style>
.gcim,
.gcim-calendar {
width: 200px;
}
</style>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous"
/>
<!-- InputManJS -->
<script
type="text/javascript"
src="https://cdn.mescius.com/inputmanjs/hosted/scripts/2.4/gc.inputman-js.ja.js"
></script>
<script src="$DEMOROOT$/lib/purejs/license-imjs.js"></script>
<link
rel="stylesheet"
type="text/css"
href="https://cdn.mescius.com/inputmanjs/hosted/css/2.4/gc.inputman-js.css"
/>
<!-- Wijmo -->
<script
type="text/javascript"
src="https://cdn.mescius.com/wijmo/5.latest/controls/wijmo.min.js"
></script>
<script
type="text/javascript"
src="https://cdn.mescius.com/wijmo/5.latest/controls/wijmo.grid.min.js"
></script>
<script
type="text/javascript"
src="https://cdn.mescius.com/wijmo/5.latest/controls/cultures/wijmo.culture.ja.min.js"
></script>
<script src="$DEMOROOT$/lib/purejs/license-wijmo.js"></script>
<link
rel="stylesheet"
href="https://cdn.mescius.com/wijmo/5.latest/styles/wijmo.min.css"
/>
</head>
<body>
<table id="btn_container">
<tr>
<td>
<div id="grid" style="height: 23rem;"></div>
</td>
<td>
<div> </div>
</td>
<td style="min-width: 20rem">
<table>
<tr>
<td>ID</td>
<td><input id="id"></td>
</tr>
<tr>
<td>お客様コード </td>
<td><select id="customerID"></select></td>
</tr>
<tr>
<td>日付</td>
<td><input id="date"></td>
</tr>
<tr>
<td>伝票No</td>
<td><input id="slipNo"></td>
</tr>
<tr>
<td>区分</td>
<td><input id="category"></td>
</tr>
<tr>
<td>製品名</td>
<td><input id="products"></td>
</tr>
<tr>
<td>単価</td>
<td><input id="unitPrice"></td>
</tr>
<tr>
<td>数量</td>
<td><input id="number"></td>
</tr>
</table>
<div id="editForm" style="display: block;">
<button name="edit" type="button" class="btn btn-primary btn-sm">
編集
</button>
<button name="add" type="button" class="btn btn-primary btn-sm">
追加
</button>
<button name="remove" type="button" class="btn btn-primary btn-sm">
削除
</button>
</div>
<div id="commitForm" style="display: none;">
<button name="commit" type="button" class="btn btn-success btn-sm">
確定
</button>
<button
name="cancel"
type="button"
class="btn btn-secondary btn-sm"
>
キャンセル
</button>
</div>
<div>
<button
name="moveCurrentToFirst"
type="button"
class="btn btn-light btn-sm"
>
<<
</button>
<button
name="moveCurrentToPrevious"
type="button"
class="btn btn-light btn-sm"
>
<
</button>
<button
name="moveCurrentToNext"
type="button"
class="btn btn-light btn-sm"
>
>
</button>
<button
name="moveCurrentToLast"
type="button"
class="btn btn-light btn-sm"
>
>>
</button>
</div>
<hr />
<div>
<button
id="refreshReport"
type="button"
class="btn-outline-success"
>
レポート再表示
</button>
</div>
</td>
</tr>
</table>
<hr />
<div id="viewer-form">
<div id="gcArjsv" style="height: 70vh; margin: 0px"></div>
</div>
<script>
var controls = {
ID: new GC.InputMan.GcTextBox(document.getElementById("id")),
CustomerID: new GC.InputMan.GcComboBox(
document.getElementById("customerID"),
{
items: customersData,
columns: [
{ name: "CustomerID", label: "客先CD", width: 50 },
{ name: "CustomerName", label: "客先名", width: 150 },
],
displayMemberPath: "CustomerID",
valueMemberPath: "CustomerID",
dropDownWidth: "auto",
}
),
Date: new GC.InputMan.GcDateTime(document.getElementById("date"), {
formatPattern: "yyy/M/d",
displayFormatPattern: "",
showDropDownButton: true,
dropDownConfig: {
dropDownType: GC.InputMan.DateDropDownType.Calendar
}
}),
SlipNo: new GC.InputMan.GcTextBox(document.getElementById("slipNo")),
Category: new GC.InputMan.GcNumber(document.getElementById("category")),
Products: new GC.InputMan.GcTextBox(
document.getElementById("products")
),
UnitPrice: new GC.InputMan.GcNumber(
document.getElementById("unitPrice"),
{
displayFormatDigit: "##,##0",
}
),
Number: new GC.InputMan.GcNumber(document.getElementById("number"), {
displayFormatDigit: "##,##0",
}),
};
var cv;
var grid;
var gcArjsv;
window.onload = function () {
// gridの設定
cv = new wijmo.collections.CollectionView(billData, {
trackChanges: true,
currentChanged: () => update(),
});
grid = new wijmo.grid.FlexGrid("#grid", {
itemsSource: cv,
isReadOnly: true,
columns: [
{ header: "ID", binding: "ID", maxLength: 5, width: 80 },
{ header: "お客様コード", binding: "CustomerID", width: 120 },
{ header: "日付", binding: "Date", width: 140 },
{ header: "伝票No", binding: "SlipNo", width: 100 },
{ header: "区分", binding: "Category", format: "n", width: 60 },
{ header: "製品名", binding: "Products", width: 350 },
{ header: "単価", binding: "UnitPrice", format: "n", width: 100 },
{ header: "数量", binding: "Number", format: "n", width: 100 },
],
});
update();
setEnabled(false);
// ARJSビューワ生成
gcArjsv = new MESCIUS.ActiveReportsJS.ReportViewer.Viewer("#gcArjsv", {
language: "ja",
});
// フォント読込
gcArjsv.registerFont("fonts/fontsConfig.json").then(function () {
reportUpdate(cv.sourceCollection, customersData);
});
};
document
.getElementById("btn_container")
.addEventListener("click", function (e) {
let name = e.target.getAttribute("name");
if (!name) {
return;
}
handler[name]();
});
var handler = {
edit: () => {
cv.editItem(cv.currentItem);
setEnabled(true);
switchForms();
},
add: () => {
cv.addNew();
setEnabled(true);
switchForms();
},
remove: () => {
cv.remove(cv.currentItem);
},
commit: () => {
for (let fieldName in controls) {
if (fieldName == "CustomerID") {
cv.currentItem[fieldName] =
controls[fieldName].getSelectedValue();
} else if (fieldName == "Date") {
cv.currentItem[fieldName] = controls[fieldName].getText();
} else {
cv.currentItem[fieldName] = controls[fieldName].getValue();
}
}
cv.commitEdit();
cv.commitNew();
setEnabled(false);
switchForms();
},
cancel: () => {
cv.cancelEdit();
cv.cancelNew();
setEnabled(false);
switchForms();
},
moveCurrentToFirst: () => cv.moveCurrentToFirst(),
moveCurrentToPrevious: () => cv.moveCurrentToPrevious(),
moveCurrentToNext: () => cv.moveCurrentToNext(),
moveCurrentToLast: () => cv.moveCurrentToLast(),
};
function update() {
for (var fieldName in controls) {
if (
fieldName == "ID" ||
fieldName == "SlipNo" ||
fieldName == "Products"
) {
controls[fieldName].setText(cv.currentItem[fieldName]);
} else if (fieldName == "CustomerID") {
controls[fieldName].setSelectedValue(cv.currentItem[fieldName]);
} else {
controls[fieldName].setValue(cv.currentItem[fieldName]);
}
}
}
function setEnabled(isEnabled) {
for (var fieldName in controls) {
controls[fieldName].setEnabled(isEnabled);
}
}
function switchForms() {
var editForm = document.getElementById("editForm");
var commitForm = document.getElementById("commitForm");
editForm.style.display =
editForm.style.display == "block" ? "none" : "block";
commitForm.style.display =
commitForm.style.display == "block" ? "none" : "block";
}
document
.getElementById("refreshReport")
.addEventListener("click", function () {
reportUpdate(cv.sourceCollection, customersData);
});
function reportUpdate(data1, data2) {
// ビューワのリセット
gcArjsv.resetDocument();
// パラメータの設定
var parameters = [
{ Name: "レポートパラメータ1", Value: [JSON.stringify(data1)] },
{ Name: "レポートパラメータ2", Value: [JSON.stringify(data2)] },
];
gcArjsv.open("Invoice_Grouped.rdlx-json", { ReportParams: parameters });
}
</script>
</body>
</html>
