-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
96 lines (92 loc) · 4.53 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="dist/jquery.entryTable.css">
<link rel="stylesheet" href="assets/style.css">
<title>entry table</title>
</head>
<body>
<h1>entry table</h1>
<table id="mainTable" class="table table-striped entry-table"></table>
<br>
<div class="padding-20"><input type="text" id="mainSelect" class="entry-select"></div>
<div class="padding-20"><input type="text" id="mainCodeName" class="entry-code-name"></div>
<div class="padding-20"><input type="text" onkeypress="return event.charCode >= 48 && event.charCode <= 57" onchange="this.value = this.value.replace(/[^0-9]/g,'')"></div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="node_modules/jquery/dist/jquery.min.js" ></script>
<script src="dist/jquery.entryTable.js"></script>
<script>
$(function(){
$('#mainTable').entryTable({
//readonly:true,
columns:[
{title:'NO.', field:'NO', width:'40px', controlClasses:['test-color', 'test-border']},
{title:'D/C', field:'DC', control:'select', options:[{text:'DC0',value:0},{text:'DC1',value:1}], required:true},
{title:'G/L Account', field:'GLAccount', required:true, maxlength:17, control:'entry-select', entrySelectOptions:
{data:[], updateValueOnSetData:false, url:'http://127.0.0.1:8080/assets/glaccount.json', ajaxMethod:'GET', onBeforeLoadData: function(el, opt, pa){
console.log('opt.value:' + opt.value);
}}
},
{title:'Amount', field:'Amount', required:true, maxlength:16},
{title:'Tax Code', field:'TaxCode', required:true, maxlength:2},
{title:'Cost Center', field:'CostCenter', control:'number', required:true},
{title:'Assignment', field:'Assignment'},
{title:'Text', field:'Text'}
],
data:[
{NO:1, DC: 0, GLAccount: 100000088, Amount:101.20, TaxCode:'A1',CostCenter:90000001,Assignment:'aa', Text:'bb'},
{NO:2, DC: 1, GLAccount: 1000000002, Amount:102.20, TaxCode:'A2',CostCenter:90000001,Assignment:'aa', Text:'bb'},
{NO:3, DC: 1, GLAccount: 1000000003, Amount:103.20, TaxCode:'A3',CostCenter:90000001,Assignment:'aa', Text:'bb'},
{NO:4, DC: 0, GLAccount: 1000000004, Amount:104.20, TaxCode:'A4',CostCenter:90000001,Assignment:'aa', Text:'bb'},
{NO:5, DC: 0, GLAccount: 1000000005, Amount:105.20, TaxCode:'A5',CostCenter:90000001,Assignment:'aa', Text:'bb'}
],
onSaveRow:function(data, row){
console.log('onSaveRow' + data);
row.setId('123');
},
onDeleteRow:function(data, row){
console.log('onDeleteRow' + data);
row.delete();
}
});
$('#mainSelect').entrySelect({
data:[
{'text':'Account 1', 'value':'100000088'},
{'text':'Account 2', 'value':'200000088'},
{'text':'Account 3', 'value':'301000088'},
{'text':'Account 4', 'value':'500200099'},
{'text':'Account 5', 'value':'100000088'},
{'text':'Account 6', 'value':'200000088'},
{'text':'Account 7', 'value':'301000088'},
{'text':'Account 8', 'value':'500200099'},
{'text':'Account 9', 'value':'100000088'},
{'text':'Account 10', 'value':'200000088'},
{'text':'Account 11', 'value':'301000088'},
{'text':'Account 12', 'value':'500200099'},
]});
$('#mainCodeName').entryCodeName({
data:[
{'text':'Code 01', 'value':'01'},
{'text':'Code 02', 'value':'02'},
{'text':'Code 03', 'value':'03'},
{'text':'Code 04', 'value':'04'},
{'text':'Code 05', 'value':'05'},
{'text':'Code 06', 'value':'06'},
{'text':'Code 07', 'value':'07'},
{'text':'Code 08', 'value':'08'},
{'text':'Code 09', 'value':'09'},
{'text':'Code 10', 'value':'10'},
{'text':'Code 11', 'value':'11'},
{'text':'Code 12', 'value':'12'},
]});
});
</script>
</body>
</html>