-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
80 lines (68 loc) · 3.61 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="./css/jgrid.css" rel="stylesheet">
<link href="./css/site.css" rel="stylesheet">
<title>jdatagrid</title>
</head>
<body>
<div class="container">
<h1 class="text-center">jdatagrid example</h1>
<hr>
<table id="jgrid" class="table table-bordered"></table>
<table id="jgrid_2" class="table table-bordered"></table>
<blockquote>
<pre>
<code id="result"></code>
</pre>
</blockquote>
<input type="submit" class="btn btn-primary" id="btn_submit" value="Submit">
</div>
<script src="./js/jdatagrid.js"></script>
<!-- <script src="./js/bundle.js"></script> -->
<script type="application/javascript">
let grid;
let btn_submit = document.querySelector("#btn_submit");
let result = document.querySelector('#result');
btn_submit.addEventListener('click', function () {
result.innerHTML = '';
let data = grid.get_data;
result.innerHTML = JSON.stringify(data.data);
console.log('jdatagrid data log', data);
});
document.addEventListener('DOMContentLoaded', function () {
// grid = new jdatagrid.config({
// table_name: '#jgrid',
// item_list: [
// { name: 'name', input_type: 'text', header_text: 'NAME' },
// { name: 'email', input_type: 'email', header_text: 'EMAIL' },
// { name: 'dateOfbirth', input_type: 'date', header_text: 'DoB' }
// ],
// is_pagination: false,
// page_size: 3
// });
grid =new jdatagrid(
{
table_name: '#jgrid',
item_list:
[
{ name: 'name', input_type: 'text', header_text: 'Name', is_require: false, require_message : 'please enter name', attributes: [{ name: 'class', value: 'form-control' }], is_sort : true },
{ name: 'date_of_birth', input_type: 'date', header_text: 'Date of birth',is_require: false, attributes: [{ name: 'class', value: 'form-control' }] },
{ name: 'gender', input_type: 'radio', header_text: 'Gender',is_require: false, data: [{ text: 'Male', value: 'M' }, { text: 'Female', value: 'F' }] },
{ name: 'status', input_type: 'checkbox', header_text: 'Status' , is_require: false, require_message: 'please check the status!'},
{ name: 'subjects', input_type: 'checkbox', header_text: 'Subjects', data: [{ text: 'Html', value: 'html' }, { text: 'CSS', value: 'css' }, { text: 'Javascript', value: 'javascript' }] },
{ name: 'class', input_type: 'select', header_text: 'Class',is_require: false, attributes: [{ name: 'class', value: 'form-control' }], data: [{ text: 'Class A', value: 'class_a' }, { text: 'Class B', value: 'class_b' }, { text: 'Class C', value: 'class_c' }] , is_sort : true }
],
is_pagination: true,
page_size: 10
}
);
});
</script>
</body>
</html>