-
Notifications
You must be signed in to change notification settings - Fork 2
/
check.html
51 lines (47 loc) · 1.97 KB
/
check.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
<!DOCTYPE html>
<html>
<head>
<title>W2UI Demo: grid-1</title>
<script src=http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js></script>
<script type=text/javascript src="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" />
</head>
<body>
<div id="grid" style="width: 50%; height: 350px;"></div>
<script type="text/javascript">
$(function () {
$('#grid').w2grid({
name: 'grid',
method: 'GET', // need this to avoid 412 error on Safari
columns: [
{ field: 'fname', text: 'First Name', size: '30%' },
{ field: 'lname', text: 'Last Name', size: '30%' },
{ field: 'email', text: 'Email', size: '40%',
// based on http://w2ui.com/web/demos/#!grid/grid-23
// the problem here is that it is not the TD that gets styled
// but the internal div ...
//render: function (record, index, column_index) {
// var html = '<div style="background-color:#7F7F7F;">'+ record.email + '</div>';
// return html; }
},
{ field: 'sdate', text: 'Start Date', size: '120px' }
],
records: [
{ recid: 1,
// default styling for reference
fname: "John", lname: "Doe", email: "jdoe@gmail.com", sdate: "4/3/2012"
},
{ recid: 2,
// based on http://w2ui.com/web/demos/#!grid/grid-2
// this works. entire row is blue text on red
// w2ui: { style: "background-color:red; color:blue;" },
// https://stackoverflow.com/questions/38696758/add-custom-color-to-w2ui-cell-grid
style: {1: 'background-color: yellow; color: white;'},
fname: "John", lname: "Two", email: "j2@gmail.com", sdate: "4/3/2012"
},
]
});
});
</script>
</body>
</html>