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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
|
<!DOCTYPE html>
<html>
<head>
<title>Bond Semi Central</title>
<link href="font-awesome.min.css" rel="stylesheet">
<link href="bootstrap.css" rel="stylesheet">
<script src="jquery-2.1.1.min.js"></script>
<script src="bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="w2ui-1.4.min.css" />
<script type="text/javascript" src="w2ui-1.4.min.js"></script>
</head>
<body>
<div id="layout" style="width: 100%; height: 400px;"></div>
<div id="grid" style="width: 100%; height: 350px;"></div>
<script>
$(function () {
// -- LAYOUT
var pstyle = 'background-color: #F5F6F7; overflow: hidden';
$('#layout').w2layout({
name: 'layout',
padding: 0,
panels: [
{ type: 'left', size: '40%', style: pstyle, resizable: true },
{ type: 'right', size: '60%', style: pstyle, resizable: true }
]
});
var pstyle = 'background-color: #F5F6F7; overflow: hidden';
$('#layout2').w2layout({
name: 'layout2',
padding: 0,
panels: [
{ type: 'left', size: '50%', style: pstyle, resizable: true },
{ type: 'right', size: '50%', style: pstyle, resizable: true },
{ type: 'bottom', size: '30%', style: pstyle, resizable: true }
]
});
// -- GRID
$().w2grid({
name: 'pinkGrid',
sortData: [ { field: 'recid', direction: 'asc' } ],
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: 'email', caption: 'Email', size: '40%', resizable: true, sortable: true },
{ field: 'sdate', caption: 'Start Date', size: '120px', resizable: true },
{ field: 'sdate', caption: 'End Date', size: '120px', resizable: true },
{ field: 'sdate', caption: 'Release Date', size: '120px', resizable: true },
],
records: [
{ recid: 1, fname: 'John', lname: 'doe', email: 'vitali@gmail.com', sdate: '1/3/2012' },
{ recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '2/4/2012' },
{ recid: 3, fname: 'Jin', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/23/2012' },
{ recid: 4, fname: 'Susan', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '5/3/2012' },
{ recid: 5, fname: 'Kelly', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
{ recid: 6, fname: 'Francis', lname: 'Gatos', email: 'vitali@gmail.com', sdate: '2/5/2012' },
{ recid: 7, fname: 'Mark', lname: 'Welldo', email: 'jdoe@gmail.com', sdate: '8/25/2012' },
{ recid: 8, fname: 'Thomas', lname: 'Bahh', email: 'jdoe@gmail.com', sdate: '9/3/2012' },
{ recid: 9, fname: 'Sergei', lname: 'Rachmaninov', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
{ recid: 20, fname: 'Jill', lname: 'Doe', email: 'jdoe@gmail.com', sdate: '10/3/2012' },
{ recid: 21, fname: 'Frank', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
{ recid: 22, fname: 'Peter', lname: 'Franson', email: 'vitali@gmail.com', sdate: '4/3/2012' },
{ recid: 23, fname: 'Andrew', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
{ recid: 24, fname: 'Manny', lname: 'Silver', email: 'jim@gmail.com', sdate: '12/3/2012' },
{ recid: 25, fname: 'Ben', lname: 'Gatos', email: 'jim@gmail.com', sdate: '4/3/2012' },
{ recid: 26, fname: 'Doer', lname: 'Welldo', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
{ recid: 27, fname: 'Shashi', lname: 'bahh', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
{ recid: 28, fname: 'Av', lname: 'Rachmaninov', email: 'jdoe@gmail.com', sdate: '4/3/2012' }
],
onClick: function (event) {
var rec = this.get(event.recid);
w2ui['form'].record = rec;
w2ui['form'].refresh();
event.onComplete = function () {
if (this.getSelection().length == 0) $('#delete').attr('disabled', true); else $('#delete').removeAttr('disabled');
}
}
});
$().w2grid({
name: 'blueOutrightGrid',
sortData: [ { field: 'recid', direction: 'asc' } ],
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: 'email', caption: 'Email', size: '40%', resizable: true, sortable: true },
{ field: 'sdate', caption: 'Start Date', size: '120px', resizable: true },
{ field: 'sdate', caption: 'End Date', size: '120px', resizable: true },
{ field: 'sdate', caption: 'Release Date', size: '120px', resizable: true },
],
records: [
{ recid: 1, fname: 'John', lname: 'doe', email: 'vitali@gmail.com', sdate: '1/3/2012' },
{ recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '2/4/2012' },
{ recid: 3, fname: 'Jin', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/23/2012' },
{ recid: 4, fname: 'Susan', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '5/3/2012' },
{ recid: 5, fname: 'Kelly', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
{ recid: 6, fname: 'Francis', lname: 'Gatos', email: 'vitali@gmail.com', sdate: '2/5/2012' },
{ recid: 7, fname: 'Mark', lname: 'Welldo', email: 'jdoe@gmail.com', sdate: '8/25/2012' },
{ recid: 8, fname: 'Thomas', lname: 'Bahh', email: 'jdoe@gmail.com', sdate: '9/3/2012' },
{ recid: 9, fname: 'Sergei', lname: 'Rachmaninov', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
{ recid: 20, fname: 'Jill', lname: 'Doe', email: 'jdoe@gmail.com', sdate: '10/3/2012' },
{ recid: 21, fname: 'Frank', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
{ recid: 22, fname: 'Peter', lname: 'Franson', email: 'vitali@gmail.com', sdate: '4/3/2012' },
{ recid: 23, fname: 'Andrew', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
{ recid: 24, fname: 'Manny', lname: 'Silver', email: 'jim@gmail.com', sdate: '12/3/2012' },
{ recid: 25, fname: 'Ben', lname: 'Gatos', email: 'jim@gmail.com', sdate: '4/3/2012' },
{ recid: 26, fname: 'Doer', lname: 'Welldo', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
{ recid: 27, fname: 'Shashi', lname: 'bahh', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
{ recid: 28, fname: 'Av', lname: 'Rachmaninov', email: 'jdoe@gmail.com', sdate: '4/3/2012' }
],
onClick: function (event) {
var rec = this.get(event.recid);
w2ui['form'].record = rec;
w2ui['form'].refresh();
event.onComplete = function () {
if (this.getSelection().length == 0) $('#delete').attr('disabled', true); else $('#delete').removeAttr('disabled');
}
}
});
$().w2grid({
name: 'blueSwitchGrid',
sortData: [ { field: 'recid', direction: 'asc' } ],
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: 'email', caption: 'Email', size: '40%', resizable: true, sortable: true },
{ field: 'sdate', caption: 'Start Date', size: '120px', resizable: true },
{ field: 'sdate', caption: 'End Date', size: '120px', resizable: true },
{ field: 'sdate', caption: 'Release Date', size: '120px', resizable: true },
],
records: [
{ recid: 1, fname: 'John', lname: 'doe', email: 'vitali@gmail.com', sdate: '1/3/2012' },
{ recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '2/4/2012' },
{ recid: 3, fname: 'Jin', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/23/2012' },
{ recid: 4, fname: 'Susan', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '5/3/2012' },
{ recid: 5, fname: 'Kelly', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
{ recid: 6, fname: 'Francis', lname: 'Gatos', email: 'vitali@gmail.com', sdate: '2/5/2012' },
{ recid: 7, fname: 'Mark', lname: 'Welldo', email: 'jdoe@gmail.com', sdate: '8/25/2012' },
{ recid: 8, fname: 'Thomas', lname: 'Bahh', email: 'jdoe@gmail.com', sdate: '9/3/2012' },
{ recid: 9, fname: 'Sergei', lname: 'Rachmaninov', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
{ recid: 20, fname: 'Jill', lname: 'Doe', email: 'jdoe@gmail.com', sdate: '10/3/2012' },
{ recid: 21, fname: 'Frank', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
{ recid: 22, fname: 'Peter', lname: 'Franson', email: 'vitali@gmail.com', sdate: '4/3/2012' },
{ recid: 23, fname: 'Andrew', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
{ recid: 24, fname: 'Manny', lname: 'Silver', email: 'jim@gmail.com', sdate: '12/3/2012' },
{ recid: 25, fname: 'Ben', lname: 'Gatos', email: 'jim@gmail.com', sdate: '4/3/2012' },
{ recid: 26, fname: 'Doer', lname: 'Welldo', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
{ recid: 27, fname: 'Shashi', lname: 'bahh', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
{ recid: 28, fname: 'Av', lname: 'Rachmaninov', email: 'jdoe@gmail.com', sdate: '4/3/2012' }
],
onClick: function (event) {
var rec = this.get(event.recid);
w2ui['form'].record = rec;
w2ui['form'].refresh();
event.onComplete = function () {
if (this.getSelection().length == 0) $('#delete').attr('disabled', true); else $('#delete').removeAttr('disabled');
}
}
});
w2ui['layout'].content('left', w2ui['pinkGrid']);
w2ui['layout'].content('right', w2ui['layout2']);
w2ui['layout2'].content('left', w2ui['blueOutrightGrid']);
w2ui['layout2'].content('right', w2ui['blueSwitchGrid']);
w2ui['pinkGrid'].get(1).getCell(1).style = 'bgcolor: #ff0000';
});
</script>
</head>
<body>
<div id="layout" style="width: 100%; height: 500px;"></div>
</body>
</html>
|
