-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtest2.html
More file actions
96 lines (89 loc) · 7.23 KB
/
test2.html
File metadata and controls
96 lines (89 loc) · 7.23 KB
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
<html>
<head>
<title>2nd Test Page</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="sass/wsgrid.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0.min.css">
<style>
.test-class {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<!-- To have the grid resize when the window size changes make the div's size based on percent of space -->
<div id='grid' class="test-class"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.js"></script>
<script type="module">
/**
* This file contains a test implementation of the wsGrid class.
*/
import {Number_Utility} from './number_utility.js';
import {Grid} from './wsGrid.js';
let columns = [
{ name: 'id', visible: false, },
{ name: 'delete', label: '', width: 20, format: 'delete', },
{ name: 'first_name', label: 'First Name', width: 100, align: 'left', fixed: false, type: 'text', editable: true },
{ name: 'last_name', label: 'Last Name', width: 100, align: 'left', fixed: false, type: 'text', editable: false },
{ name: 'age', label: 'Age', width: 75, align: 'right', fixed: true, type: 'number', editable: true },
{ name: 'height', label: 'Height', width: 75, fixed: true, type: 'text', editable: true },
{ name: 'dob', label: 'DOB', width: 100, fixed: true, type: 'date', editable: true },
{ name: 'color', label: 'Color', width: 75, fixed: true, type: 'color', editable: true },
{ name: 'gender', label: 'Gender', width: 75, align: 'left', fixed: true, type: 'dropdown', editable: true, options: { 'female': 'Female', 'male': 'Male' } },
{ name: 'selected', label: 'Check', width: 50, fixed: true, type: 'checkbox', editable: true, format: 'boolean' },
{ name: 'edited', label: 'Edited', width: 150, align: 'left', fixed: true, type: 'datetime-local', editable: true, format: 'datetime' },
];
let grid = new Grid( {
id: 'grid',
url: 'ws://localhost:8000',
overflow: false,
column_reorder: true,
column_model: columns,
multi_select: true,
row_reorder: true,
column_defaults: {
align: 'center',
},
events: {
click( row, column_name, data ) {
},
after_edit( row, column_name, value ) {
console.log( "after edit", row, column_name, value );
}
},
connection_options: {
type: 'Socket',
url: 'ws://localhost:1337',
}
} );
function dataChanged( event ) {
console.log( "data changed", event );
}
grid.bind( 'cell.changed', dataChanged );
grid.display( [
{ id: 1, first_name: 'John', last_name: 'Smith', age: 28, height: '5\'10"', dob: '1985-10-21', gender: 'male', color: '#FFC0CB', selected: 1, edited: '2018-10-01T12:24:32' },
{ id: 2, first_name: 'Jane', last_name: 'Doe', age: 26, height: '5\'6"', dob: '1982-12-03', gender: 'female', color: '#DB7093', selected: 0, edited: '2018-09-01T12:24:32' },
{ id: 3, first_name: 'Matt', last_name: 'Miller', age: 45, height: '5\'9"', dob: '1990-04-07', gender: 'male', color: '#FA8072', selected: 1, edited: '2018-08-01T12:24:32' },
{ id: 4, first_name: 'Emma', last_name: 'Johnson', age: 23, height: '5\'3"', dob: '1998-02-05', gender: 'female', color: '#CD5C5C', selected: 0, edited: '2018-07-01T12:24:32' },
{ id: 11, first_name: 'John', last_name: 'Smith', age: 28, height: '5\'10"', dob: '2001-04-30', gender: 'male', color: '#DC143C', selected: 0, edited: '2018-06-01T12:24:32' },
{ id: 12, first_name: 'Jane', last_name: 'Doe', age: 26, height: '5\'6"', dob: '2005-11-6', gender: 'female', color: '#8B0000', selected: 1, edited: '2018-05-01T12:24:32' },
{ id: 13, first_name: 'Matt', last_name: 'Miller', age: 45, height: '5\'9"', dob: '1985-10-21', gender: 'male', color: '#FF4500', selected: 1, edited: '2018-04-01T12:24:32' },
{ id: 14, first_name: 'June', last_name: 'Johnson', age: 47, height: '5\'3"', dob: '1982-12-03', gender: 'female', color: '#FF6347', selected: 0, edited: '2018-03-01T12:24:32' },
{ id: 22, first_name: 'Jane', last_name: 'Doe', age: 10, height: '5\'6"', dob: '1998-02-05', gender: 'female', color: '#FFA500', selected: 0, edited: '2018-02-01T12:24:32' },
{ id: 24, first_name: 'Jimmy', last_name: 'Johnson', age: 13, height: '5\'3"', dob: '2005-11-6', gender: 'male', color: '#FFFACD', selected: 0, edited: '2018-01-01T12:24:32' },
{ id: 33, first_name: 'Matt', last_name: 'Miller', age: 45, height: '5\'9"', dob: '1990-04-07', gender: 'male', color: '#FFDEAD', selected: 1, edited: '2018-04-06T12:24:32' },
{ id: 34, first_name: 'Terri', last_name: 'Johnson', age: 89, height: '5\'3"', dob: '1998-02-05', gender: 'female', color: '#D2B48C', selected: 1, edited: '2018-10-01T12:24:32' },
{ id: 111, first_name: 'John', last_name: 'Smith', age: 28, height: '5\'10"', dob: '2001-04-30', gender: 'male', color: '#D2691E', selected: 1, edited: '2018-10-01T12:24:32' },
{ id: 114, first_name: 'Beth', last_name: 'Johnson', age: 50, height: '5\'3"', dob: '1982-12-03', gender: 'female', color: '#800000', selected: 1, edited: '2018-10-01T12:24:32' },
{ id: 124, first_name: 'Beverly', last_name: 'Johnson', age: 62, height: '5\'3"', dob: '2005-11-6', gender: 'female', color: '#228B22', selected: 0, edited: '2018-10-01T12:24:32' },
] );
grid.cell_property( 2, 'first_name', 'background', '#aaaaaa' );
grid.append_rows( [
{ id: 114, first_name: 'Brian', last_name: 'Milco', age: 35, height: '5\'10"', dob: '1982-12-03', gender: 'male', color: '#800000', selected: 1, edited: '2018-10-01T12:24:32' },
{ id: 124, first_name: '????', last_name: '????', age: 30, height: '5\'2"', dob: '2005-11-6', gender: 'female', color: '#228B22', selected: 0, edited: '2018-10-01T12:24:32' },
{ id: 111, first_name: 'Hank', last_name: 'Williams', age: 28, height: '5\'10"', dob: '2001-04-30', gender: 'male', color: '#D2691E', selected: 1, edited: '2018-10-01T12:24:32' },
] );
</script>
</body>
</html>