forked from vitmalina/w2ui
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgrid3.html
118 lines (118 loc) · 5.44 KB
/
grid3.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
110
111
112
113
114
115
116
117
118
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="../dist/w2ui.css" />
<script type="text/javascript" src="../libs/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="../src/w2utils.js"></script>
<script type="text/javascript" src="../src/w2tabs.js"></script>
<script type="text/javascript" src="../src/w2toolbar.js"></script>
<script type="text/javascript" src="../src/w2fields.js"></script>
<script type="text/javascript" src="../src/w2popup.js"></script>
<script type="text/javascript" src="../src/w2grid.js"></script>
<script>
//<![CDATA[
$(function () {
$('#grid').w2grid({
name : 'grid',
show : {
toolbar : true,
footer : true,
lineNumbers : true,
toolbarDelete: true,
selectColumn : true
},
selectType: 'cell',
textSearch: 'contains',
columns: [
{ field: 'a', caption: '<div style="text-align: center">A</div>', size: '95px', searchable: true, editable: { type: 'div' }, frozen: true },
{ field: 'b', caption: '<div style="text-align: center">B</div>', size: '95px', editable: { type: 'div' }, frozen: true},
{ field: 'c', caption: '<div style="text-align: center">C</div>', size: '95px', editable: { type: 'div' }},
{ field: 'd', caption: '<div style="text-align: center">D</div>', size: '95px', editable: { type: 'div' }},
{ field: 'e', caption: '<div style="text-align: center">E</div>', size: '95px', editable: { type: 'text' }},
{ field: 'f', caption: '<div style="text-align: center">F</div>', size: '95px', editable: { type: 'text' }},
{ field: 'g', caption: '<div style="text-align: center">G</div>', size: '95px', editable: { type: 'text' }},
{ field: 'h', caption: '<div style="text-align: center">H</div>', size: '95px', editable: { type: 'text' }},
{ field: 'j', caption: '<div style="text-align: center">J</div>', size: '95px', editable: { type: 'text' }},
{ field: 'k', caption: '<div style="text-align: center">K</div>', size: '95px', editable: { type: 'text' }},
{ field: 'l', caption: '<div style="text-align: center">L</div>', size: '95px', editable: { type: 'text' }},
{ field: 'l', caption: '<div style="text-align: center">L</div>', size: '95px', editable: { type: 'text' }},
{ field: 'l', caption: '<div style="text-align: center">L</div>', size: '95px', editable: { type: 'text' }},
{ field: 'l', caption: '<div style="text-align: center">L</div>', size: '95px', editable: { type: 'text' }},
{ field: 'l', caption: '<div style="text-align: center">L</div>', size: '95px', editable: { type: 'text' }},
{ field: 'l', caption: '<div style="text-align: center">L</div>', size: '95px', editable: { type: 'text' }},
{ field: 'l', caption: '<div style="text-align: center">L</div>', size: '95px', editable: { type: 'text' }},
{ field: 'm', caption: '<div style="text-align: center">M</div>', size: '95px', editable: { type: 'text' }}
],
menu: ['some', 'other'],
onContextMenu: function (event) {
// console.log('context', event);
},
onSelectionExtend: function (event) {
console.log('extend', event);
},
onColumnSelect: function (event) {
console.log('column', event);
// event.preventDefault();
},
onSelect: function (event) {
// console.log('select', event);
},
onFocus: function (event) {
console.log('focus');
},
onBlur: function (event) {
console.log('blur');
}
});
w2ui.grid.on('onContextMenu', function (event) {
console.log('+++', event);
});
// add 10k records
for (var i = 0; i < 3000; i++) {
w2ui['grid'].records.push({
recid : (i + 10),
a: 'some',
b: 'sample',
k: 'text'
});
}
// add toolbar button, appending one record every second.
w2ui['grid'].toolbar.add([
{ type: 'break', id: 'autoload-break' },
{ type: 'check', id: 'autoload', caption: 'Add 1 Record/sec' },
]);
var autoId = 0;
setInterval(function() {
if (!w2ui['grid'].toolbar.get('autoload').checked)
return;
++autoId;
w2ui['grid'].add({
recid: autoId + 10000,
a: 'some ',
b: 'automatic',
c: 'text: '+autoId
});
}, 1000);
w2ui.grid.records[1].a = 'A1';
w2ui.grid.records[5].a = 'A1';
w2ui.grid.records[1].b = 'BBB1';
w2ui.grid.records[1].d = 'This is some long text in cell C and some and event more then this';
// w2ui.grid.records[1].e = '0';
// w2ui.grid.records[1].f = '1';
w2ui.grid.records[1].w2ui = { colspan: { d: 3 } };
w2ui.grid.records[1].c = 'CC1';
w2ui.grid.records[2].w2ui = { colspan: { e: 4 } };
w2ui.grid.records[2].e = 'This is some long text in cell E';
w2ui.grid.records[3].w2ui = { colspan: { e: 3 } };
w2ui.grid.records[6].w2ui = { colspan: { e: 2 } };
w2ui.grid.records[3].e = 'This is some long text in cell E';
w2ui.grid.records[4].w2ui = { summary: true };
w2ui.grid.records[1].w2ui = { style: { 1: 'background-color: red !important' }};
w2ui.grid.refresh();
});
//]]>
</script>
</head>
<body>
<div id="grid" style="width: 1024px; height: 568px;"></div>
</body>
</html>