forked from vitmalina/w2ui
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtabs-edit-grid.html
109 lines (106 loc) · 3.39 KB
/
tabs-edit-grid.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
97
98
99
100
101
102
103
104
105
106
107
108
109
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="../css/w2ui.css" />
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/w2ui.js"></script>
<script>
$(function () {
// -- Tabs
$('#tabs').w2tabs({
name: 'tabs',
active: 'tab1',
tabs: [
{ id: 'tab1', caption: 'Edit' },
{ id: 'tab2', caption: 'List 1' },
{ id: 'tab3', caption: 'List 2' }
],
onClick: function (target, data) {
switch (target) {
case 'tab1':
$('#contents').w2render('form');
break;
case 'tab2':
$('#contents').w2render('grid1');
break;
case 'tab3':
$('#contents').w2render('grid2');
break;
}
}
});
// -- Form
$('#contents').w2form({
name : 'form',
url : 'server/post',
style : 'border: 0px',
fields: [
{ name: 'fname', type: 'text', required: true },
{ name: 'lname', type: 'text', required: true },
],
actions: {
reset: function () {
this.clear();
},
save: function () {
this.save();
}
}
});
// -- Grid 1
$().w2grid({
name: 'grid1',
header: 'Grid 1',
style: 'border-top: 0px',
columns: [
{ field: 'recid', caption: 'ID', size: '50px', sortable: true, resizable: true },
{ field: 'lname', caption: 'Last Name', size: '30%', sortable: true, resizable: true },
{ field: 'fname', caption: 'First Name', size: '30%', sortable: true, resizable: true }
],
records: [
{ recid: 1, fname: 'John', lname: 'doe', email: '[email protected]', sdate: '1/3/2012' },
{ recid: 2, fname: 'Stuart', lname: 'Motzart', email: '[email protected]', sdate: '2/4/2012' },
{ recid: 3, fname: 'Jin', lname: 'Franson', email: '[email protected]', sdate: '4/23/2012', summary1: true }
]
});
// -- Grid 2
$().w2grid({
name: 'grid2',
style: 'border-top: 0px',
columns: [
{ field: 'recid', caption: 'ID', size: '50px', sortable: true, resizable: true },
{ field: 'lname', caption: 'Last Name', size: '30%', sortable: true, resizable: true },
{ field: 'fname', caption: 'First Name', size: '30%', sortable: true, resizable: true },
{ field: 'ldate', caption: 'Last Update', size: '90px', sortable: true, resizable: true },
{ field: 'ldate', caption: 'Last User', size: '90px', sortable: true, resizable: true },
{ field: 'ldate', caption: 'Created On', size: '90px', sortable: true, resizable: true }
],
records: [
{ recid: 1, fname: 'John', lname: 'doe', email: '[email protected]', sdate: '1/3/2012' },
{ recid: 2, fname: 'Stuart', lname: 'Motzart', email: '[email protected]', sdate: '2/4/2012' },
{ recid: 3, fname: 'Jin', lname: 'Franson', email: '[email protected]', sdate: '4/23/2012', summary1: true }
]
});
});
</script>
<body>
<div id="tabs" style="background-color: red !important;"></div>
<div id="contents" style="border: 1px solid silver; height: 400px;">
<!-- HTML below is needed only to init the form -->
<div class="w2ui-form">
<div class="w2ui-page page-0">
<div class="w2ui-label">First Name:</div>
<div class="w2ui-field">
<input name="fname" type="text" maxlength="100" size="60"/>
</div>
<div class="w2ui-label">Last Name:</div>
<div class="w2ui-field">
<input name="lname" type="text" maxlength="100" size="60"/>
</div>
</div>
<div class="w2ui-buttons">
<input type="button" value="Reset" name="reset">
<input type="button" value="Save" name="save">
</div>
</div>
</div>
</body>