|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="utf-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|
|
<title>itemX :: ๊ธฐํ์ ์ฌ๊ณ ๊ด๋ฆฌ ํ๋ก๊ทธ๋จ</title> |
|
|
|
|
|
|
|
|
<script>window.$ = window.jQuery = require('jquery'); </script> |
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script src="renderer.js"></script> |
|
|
|
|
|
|
|
|
|
|
|
<script src="js/Orange.js"></script> |
|
|
|
|
|
<script src="js/Grape.js"></script> |
|
|
|
|
|
<script src="js/Berry.js"></script> |
|
|
|
|
|
<script src="js/Melon.js"></script> |
|
|
|
|
|
<script src="js/TableX.js"></script> |
|
|
|
|
|
<script src="js/Banana.js"></script> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> |
|
|
|
|
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> |
|
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css"> |
|
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap4-editable/css/bootstrap-editable.min.css"> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="css/demo.css"> |
|
|
|
|
|
|
|
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com"> |
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700;900&family=Orbit&display=swap" rel="stylesheet"> |
|
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com"> |
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700;900&display=swap" rel="stylesheet"> |
|
|
<style> |
|
|
|
|
|
#table .inprice{ |
|
|
font-family: 'Noto Sans KR', sans-serif; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
[data-name="name"] { |
|
|
font-family: 'Noto Sans KR', sans-serif; |
|
|
transform : rotate(0.04deg); |
|
|
font-weight : 700; |
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
[data-name="inprice"] { |
|
|
font-family: 'Noto Sans KR', sans-serif; |
|
|
transform : rotate(0.04deg); |
|
|
font-weight : 700; |
|
|
|
|
|
} |
|
|
|
|
|
[data-name="outprice"] { |
|
|
font-family: 'Noto Sans KR', sans-serif; |
|
|
transform : rotate(0.04deg); |
|
|
font-weight : 700; |
|
|
|
|
|
} |
|
|
[data-name="guitar"] { |
|
|
font-family: 'Noto Sans KR', sans-serif; |
|
|
transform : rotate(0.04deg); |
|
|
font-weight : 700; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
.cd-title{ |
|
|
font-family: 'Noto Sans KR', sans-serif; |
|
|
font-weight : 900; |
|
|
transform : rotate(0.04deg); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
.cd-searchX{ |
|
|
font-family: 'Orbit', sans-serif; |
|
|
transform : rotate(0.04deg); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
.no-records-found{ |
|
|
font-family: 'Orbit', sans-serif; |
|
|
transform : rotate(0.04deg); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</style> |
|
|
|
|
|
<script> |
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<style> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.cd-table-container{ |
|
|
background: #fff; |
|
|
box-shadow: 1px 2px 26px rgba(0, 0, 0, 0.2); |
|
|
padding: 15px; |
|
|
max-width: 920px; |
|
|
} |
|
|
|
|
|
.cd-table{ |
|
|
width: 100%; |
|
|
color: #666; |
|
|
margin: 10px auto; |
|
|
border-collapse: collapse; |
|
|
} |
|
|
|
|
|
.cd-table tr, |
|
|
.cd-table td{ |
|
|
border: 1px solid #ccc; |
|
|
padding: 10px; |
|
|
} |
|
|
.cd-table th{ |
|
|
background: #1369ff; |
|
|
color: #fff; |
|
|
padding: 10px; |
|
|
} |
|
|
|
|
|
|
|
|
.cd-searchX{ |
|
|
padding: 10px; |
|
|
border: 1px solid #ccc; |
|
|
width: 100%; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
|
|
|
.cd-title{ |
|
|
color: #666; |
|
|
margin: 15px 0; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
</style> |
|
|
|
|
|
</head> |
|
|
<body> |
|
|
|
|
|
|
|
|
|
|
|
<textarea id="inputTextarea" rows="4" cols="50"></textarea> |
|
|
<button id="submitButton">Submit</button> |
|
|
<script src="renderer.js"></script> |
|
|
<script src="main.js"></script> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<main> |
|
|
|
|
|
<section class="container cd-table-container"> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<h2 class="cd-title" style="color: black;">itemX : ์ฌ๊ณ ๊ด๋ฆฌ</h2> |
|
|
<input type="text" class="cd-searchX table-filter" data-table="order-table" placeholder="ํ๋ช
(๋ฒ) ๋๋ ๊ฐ๊ฒฉ,๋ฉ๋ชจ๋ฅผ ์
๋ ฅํด์ฃผ์ธ์..." /> |
|
|
</br></br> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<table class="cd-table order-table table" |
|
|
id="table" |
|
|
data-toggle="table" |
|
|
data-pagination="true" |
|
|
data-url="owners.json"> |
|
|
<thead class="thead-re"> |
|
|
<button id="add" class="btn btn-success" style="margin-right: 5px; margin-left: 5px;">์ถ๊ฐ</button> |
|
|
<button id="remove" class="btn btn-danger" style="margin-right: 5px; margin-left: 5px;" disabled>์ญ์ </button> |
|
|
|
|
|
|
|
|
<button id="saveload" class="btn btn-save" style="margin-right: 5px; margin-left: 5px; background-color: #4a433e; color: #ed7c19;">๋ถ๋ฅด๊ธฐ ํ
์คํธ</button> |
|
|
|
|
|
|
|
|
<button id="save" class="btn btn-save" style="margin-right: 5px; margin-left: 5px; background-color: #4a433e; color: #fff;">์ ์ฅํ๊ธฐ</button> |
|
|
|
|
|
|
|
|
<input type="file" id="file-input" style="display: none;" accept=".itemx"> |
|
|
<button id="load" class="btn btn-save" style="margin-right: 5px; margin-left: 5px; background-color: #4a433e; color: #fff;">๋ถ๋ฌ์ค๊ธฐ</button> |
|
|
|
|
|
|
|
|
|
|
|
<tr> |
|
|
<th data-field="state" data-checkbox="true"></th> |
|
|
<th data-field="id" data-title="๋ฒํธ" data-editable="true">๋ฒํธ</th> |
|
|
<th data-field="name" data-title="ํ๋ช
" data-editable="true">ํ๋ช
</th> |
|
|
<th data-field="inprice" data-title="์
๊ณ ๋จ๊ฐ" data-editable="true">์
๊ณ ๋จ๊ฐ</th> |
|
|
<th data-field="outprice" data-title="์ถ๊ณ ๋จ๊ฐ" data-editable="true">์ถ๊ณ ๋จ๊ฐ</th> |
|
|
<th data-field="guitar" data-title="๊ธฐํ๋ฉ๋ชจ" data-editable="true">๊ธฐํ๋ฉ๋ชจ</th> |
|
|
</tr> |
|
|
|
|
|
|
|
|
</thead> |
|
|
|
|
|
</table> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</section> |
|
|
|
|
|
</main> |
|
|
|
|
|
|
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script> |
|
|
<script> |
|
|
require('./renderer.js') |
|
|
</script> |
|
|
<script> |
|
|
|
|
|
var table = document.getElementById('table'); |
|
|
var add = document.getElementById('add'); |
|
|
var remove = document.getElementById('remove'); |
|
|
var load = document.getElementById('load'); |
|
|
var fileInput = document.getElementById('file-input'); |
|
|
|
|
|
document.addEventListener("DOMContentLoaded", function() { |
|
|
if (typeof editable !== 'undefined' && editable.defaults) { |
|
|
editable.defaults.emptytext = '[์
๋ ฅ]'; |
|
|
} |
|
|
|
|
|
|
|
|
$table.bootstrapTable('getData'); |
|
|
|
|
|
$add.click(function() { |
|
|
var currentId = $table.bootstrapTable('getData').length + 1; |
|
|
if (currentId <= 1000000) { |
|
|
$table.bootstrapTable('insertRow', { |
|
|
index: 0, |
|
|
row: { |
|
|
id: currentId, |
|
|
name: '', |
|
|
inprice: '', |
|
|
outprice: '', |
|
|
guitar: '' |
|
|
} |
|
|
}); |
|
|
} |
|
|
}); |
|
|
|
|
|
$table.on('check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table', function() { |
|
|
$remove.prop('disabled', !$table.bootstrapTable('getSelections').length); |
|
|
}); |
|
|
|
|
|
$remove.click(function() { |
|
|
var ids = $.map($table.bootstrapTable('getSelections'), function(row) { |
|
|
return row.id; |
|
|
}); |
|
|
$table.bootstrapTable('remove', { |
|
|
field: 'id', |
|
|
values: ids |
|
|
}); |
|
|
$remove.prop('disabled', true); |
|
|
}); |
|
|
|
|
|
$load.click(function() { |
|
|
$fileInput.click(); |
|
|
}); |
|
|
|
|
|
|
|
|
$table.on('check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table', function() { |
|
|
$remove.prop('disabled', !$table.bootstrapTable('getSelections').length); |
|
|
}); |
|
|
|
|
|
$remove.click(function() { |
|
|
var ids = $.map($table.bootstrapTable('getSelections'), function(row) { |
|
|
return row.id; |
|
|
}); |
|
|
$table.bootstrapTable('remove', { |
|
|
field: 'id', |
|
|
values: ids |
|
|
}); |
|
|
$remove.prop('disabled', true); |
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
$fileInput.change(function(event) { |
|
|
var file = event.target.files[0]; |
|
|
|
|
|
|
|
|
var fileName = file.name; |
|
|
var fileExtension = fileName.substring(fileName.lastIndexOf('.') + 1).toLowerCase(); |
|
|
if (fileExtension !== 'itemx') { |
|
|
alert('์ฌ๋ฐ๋ฅธ ํ์ผ ํ์์ด ์๋๋๋ค. itemX ํ์ผ(.itemx)์ ์ ํํด์ฃผ์ธ์.'); |
|
|
return; |
|
|
} |
|
|
|
|
|
var reader = new FileReader(); |
|
|
reader.onload = function(event) { |
|
|
var contents = event.target.result; |
|
|
var parsedData = JSON.parse(contents); |
|
|
$table.bootstrapTable('load', parsedData); |
|
|
}; |
|
|
reader.readAsText(file); |
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
$table.on('check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table', function() { |
|
|
$remove.prop('disabled', !$table.bootstrapTable('getSelections').length); |
|
|
}); |
|
|
|
|
|
$remove.click(function() { |
|
|
var ids = $.map($table.bootstrapTable('getSelections'), function(row) { |
|
|
return row.id; |
|
|
}); |
|
|
$table.bootstrapTable('remove', { |
|
|
field: 'id', |
|
|
values: ids |
|
|
}); |
|
|
$remove.prop('disabled', true); |
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
<script > |
|
|
var $table = $('#table'); |
|
|
var $add = $('#add'); |
|
|
var $remove = $('#remove'); |
|
|
var $save = $('#save'); |
|
|
var $load = $('#load'); |
|
|
var $fileInput = $('#file-input'); |
|
|
|
|
|
$(function() { |
|
|
$.fn.editable.defaults.emptytext = '[์
๋ ฅ]'; |
|
|
$table.bootstrapTable('getData'); |
|
|
|
|
|
|
|
|
|
|
|
$table.on('check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table', function() { |
|
|
$remove.prop('disabled', !$table.bootstrapTable('getSelections').length); |
|
|
}); |
|
|
|
|
|
$save.click(function() { |
|
|
var tableData = $table.bootstrapTable('getData'); |
|
|
var dataString = JSON.stringify(tableData, null, 2); |
|
|
var currentDate = new Date(); |
|
|
var fileName = 'itemx' + currentDate.toLocaleString().replace(/[/:]/g, '-') + '.itemx'; |
|
|
var blob = new Blob([dataString], { |
|
|
type: 'text/plain;charset=utf-8' |
|
|
}); |
|
|
saveAs(blob, fileName); |
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
}); |
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script src="renderer.js"></script> |
|
|
<script src="js/script.js"></script> |
|
|
|
|
|
</body> |
|
|
</html> |
