|
18 | 18 | <script type="text/javascript"> |
19 | 19 | /** Generate Test Data */ |
20 | 20 | var testData = [] |
21 | | - for(var i=0; i<100; i++) { |
| 21 | + for(var i=0; i<1000; i++) { |
22 | 22 | testData.push({ |
23 | | - No1: Math.floor(100000+Math.random() * 900000), |
24 | | - No2: Math.floor(100000+Math.random() * 900000), |
25 | | - No3: Math.floor(100000+Math.random() * 900000) |
| 23 | + No1: Math.round(Math.random() * Math.pow(10,Math.random()*10)), |
| 24 | + No2: Math.round(Math.random() * Math.pow(10,Math.random()*10)), |
| 25 | + No3: Math.round(Math.random() * Math.pow(10,Math.random()*10)) |
26 | 26 | }) |
27 | 27 | } |
28 | 28 |
|
29 | 29 | /** Table creation */ |
30 | | - var scrollableTable = new scrollableTable('scrollableTable', 'wrapper') |
| 30 | + var scrollableTable = new scrollableTable(/* unique id */'scrollableTable', /* HTML wrapper id */'wrapper',/* enable logging*/true) |
31 | 31 | scrollableTable.setTableHeader(["Number 1", "Number 2", "Number 3"]) |
32 | 32 | scrollableTable.setTableContent(testData, "testDataEventType", ["No1", "No2", "No3"]) |
33 | 33 | /* optional */ scrollableTable.setTableHeight( () => { return $( window ).height() - 166 } ) |
34 | | - // or e.g.: scrollableTable.setTableHeight(500) |
| 34 | + // or alternatively e.g.: scrollableTable.setTableHeight(500) |
| 35 | + /* optional */ scrollableTable.expandTree() |
| 36 | + // /* optional */ scrollableTable.collapseTree() |
35 | 37 | /* optional */ scrollableTable.setCompareFunctionForSorting( function(a,b) { |
36 | 38 | return a.localeCompare(b, undefined, {usage: 'sort', numeric: true, sensitivity: 'base'}) |
37 | 39 | }) |
38 | 40 | /* optional */ scrollableTable.sortByColumnName("Number 1") |
39 | 41 |
|
40 | | - /** Event processing */ |
41 | | - $( document ).on("testDataEventType", function(event, rowId) { |
42 | | - if (rowId !== "") { |
| 42 | + |
| 43 | + /** |
| 44 | + * Event processing |
| 45 | + * return: data type: {rowId: '<<STRING>>', data: {<<ORIGINAL DATA ENTRY of the selected row>>}} or null if nothing is selected |
| 46 | + */ |
| 47 | + $( document ).on("testDataEventType", function(event, data) { |
| 48 | + if (data !== null) { |
43 | 49 | $('#displayArea').html( |
44 | | - "'testDataEventType' from row with ID: "+rowId +" was triggered.\n\n"+ |
| 50 | + "'testDataEventType' from row with ID: '"+data.rowId +"' was triggered.\n\n"+ |
45 | 51 | "Row data: \n" + |
46 | | - JSON.stringify( testData[rowId], null, 4) ) |
47 | | - } else { |
| 52 | + JSON.stringify( data.data, null, 4) ) |
| 53 | + } |
| 54 | + else { |
48 | 55 | $('#displayArea').html("Chick on a row to display its content here.") |
49 | 56 | } |
50 | 57 | }); |
51 | 58 |
|
| 59 | + |
52 | 60 | function filterTable() { |
53 | 61 | var filterString = $('#searchField').val() |
54 | 62 | scrollableTable.filter(filterString) |
|
0 commit comments