-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtreeTable.html
118 lines (107 loc) · 5.02 KB
/
treeTable.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
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> -->
<!-- https://jquery.com/download/ -->
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/scrollableTable.js"></script>
</head>
<body>
<div id="headline"><h2>Sortable and Scrollable TreeTable with fixed Header!</h2></div>
<div id="bar">Filter: <input id="searchField" type="text" value="" oninput="filterTable()"></div>
<div id="wrapper"></div>
<pre id="displayArea">Chick on a row to display its content here.</pre>
<script type="text/javascript">
/** Generate Test Data */
var testData = [
{"id": 0, "name": "name0", "value": Math.floor(100000 + Math.random() * 900000) },
{
"id": 1,
"name": "name1",
"value": Math.floor(100000 + Math.random() * 900000),
"subtree": [
{
"id": 11,
"name": "name1.1",
"value": Math.floor(100000 + Math.random() * 900000),
"subtree": []
},{
"id": 12,
"name": "name1.2",
"value": Math.floor(100000 + Math.random() * 900000),
"subtree": []
},{
"id": 13,
"name": "name1.3",
"value": Math.floor(100000 + Math.random() * 900000),
"subtree": [
{
"id": 131,
"name": "name1.3.1",
"value": Math.floor(100000 + Math.random() * 900000),
"subtree": []
}
]
}
]
},
{
"id": 2,
"name": "name2",
"value": Math.floor(100000 + Math.random() * 900000),
"subtree": []
},
{
"id": 3,
"name": "name3",
"value": Math.floor(100000 + Math.random() * 900000)
},
{
"id": 4,
"name": "name4",
"value": Math.floor(100000 + Math.random() * 900000),
"subtree": [
{
"id": 41,
"name": "name4.1",
"value": Math.floor(100000 + Math.random() * 900000),
"subtree": []
}
]
}
]
// add more test data so that we will see the scrollbar
for(var i=6; i<50; i++) {
testData.push( {"id": i, "name": "name"+i, "value": Math.floor(100000 + Math.random() * 900000) } )
}
/** Table creation */
var scrollableTable = new scrollableTable(/* unique id */ 'scrollableTable', /* HTML wrapper id */ 'wrapper', /* enable logging*/ true)
scrollableTable.setTableHeader(["Name", "Id", "Value"])
scrollableTable.setTableContent(testData, "testDataEventType", ["name", "id","value"], /* optional parameter for TreeTable */ "subtree")
/* optional */ scrollableTable.setTableHeight( () => { return $( window ).height() - 166 } )
// or alternatively e.g.: scrollableTable.setTableHeight(500)
/* optional */ scrollableTable.expandTree()
// /* optional */ scrollableTable.collapseTree()
/* optional */ scrollableTable.setCompareFunctionForSorting( function(a,b) {
return a.localeCompare(b, undefined, {usage: 'sort', numeric: true, sensitivity: 'base'})
})
/* optional */ scrollableTable.sortByColumnName("Name")
/**
* Event processing
* data type: {rowId: '<<STRING>>', data: {<<ORIGINAL DATA ENTRY of the selected row>>}}
*/
$( document ).on("testDataEventType", function(event, data) {
$('#displayArea').html(
"'testDataEventType' from row with ID: '" + data.rowId +"' was triggered.\n\n"+
"Row data: \n" +
JSON.stringify( data.data, null, 4) )
});
function filterTable() {
var filterString = $('#searchField').val()
scrollableTable.filter(filterString)
}
$('#searchField').focus()
</script>
</body>
</html>