<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Customer API Tool</title>
<script src="javascript/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="javascript/w2ui-1.5.rc1.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/w2ui-1.5.rc1.min.css" />
</head>
<body>
<div id="toolbar" style="padding: 4px; border: 1px solid #dfdfdf; border-radius: 3px"></div>
<div id="data-grid" style="width: 100%; height: 500px;"></div>
<div id="data-form" style="width: 100%; height: 350px;"></div>
<script type="text/javascript">
//w2ui-tablemaintenance.js グリッド設定
var uiName = "顧客設定"; // 画面表示名
var gridURL = location.href + 'customers'; //グリッド表示データ取得URL
var gridColumns = [ // グリッド項目
{ field: 'customerid', caption: '顧客ID', size: '35%' ,sortable: true, info: true},
{ field: 'customerCode', caption: '顧客契約CD', size: '35%' ,sortable: true},
{ field: 'customerName', caption: '顧客名 ', size: '130%' ,sortable: true},
{ field: 'apiUrl', caption: 'API URL', size: '100%' ,sortable: true},
{ field: 'user', caption: 'ユーザーID', size: '50%' ,sortable: true},
{ field: 'password', caption: 'パスワード', size: '40%', render: 'password', sortable: true},
{ field: 'mailadr', caption: '通知先メールアドレス', size: '100%' ,sortable: true},
{ field: 'insdate', caption: '作成日時', size: '60%' ,sortable: true},
{ field: 'updddate', caption: '更新日時', size: '60%' ,sortable: true},
];
//w2ui-tablemaintenance.js フォーム設定
var formURL = location.href + 'customers'; //フォーム更新URL
var formColumns = [ //フォーム項目
{ field: 'customerid', type: 'text', required: true, html:{caption: '顧客ID', attr: 'size=5 maxlength=4'}},
{ field: 'customerCode', type: 'text', required: true, html:{caption: '顧客契約CD', attr: 'size=10 maxlengh=8'}},
{ field: 'customerName', type: 'text', required: true, html:{caption: '顧客名', attr: 'size=60 maxlengh=60' }},
{ field: 'apiUrl', type: 'text', required: true, html:{caption: 'API URL', attr: 'size=60 maxlengh=60' }},
{ field: 'user', caption: 'login ID', type: 'text', required: true, html:{caption: 'login ID', attr: 'size=20 maxlengh=20' }},
{ field: 'password', caption: 'password', type: 'password', required: true, html:{caption: 'password', attr: 'size=20 maxlengh=20' }},
{ field: 'mailadr', caption: '通知先メールアドレス', size: '100%' ,sortable: true, html:{caption: '通知先メールアドレス', attr: 'size=40 maxlengh=40' }},
];
//ツールバー
$('#toolbar').w2toolbar({
name: 'toolbar',
tooltip: 'right',
items: [{ type: 'break' },{ type: 'html', html: '<strong><font color="red">Customer API Tool</font></strong>'},
{ type: 'button', id: 'customerBT', group: '1',text: '顧客設定', icon: 'fa-wrench', tooltip: '顧客設定を参照・編集します',
onClick: function (event) { showGrid();}},
{ type: 'break' },
]
});
$(document).ready(function(){
showGrid();
});
</script>
<script type="text/javascript" src="javascript/w2ui-tablemaintenance.js"></script>
</body>
</html>