forked from flexmonster/pivot-react
-
Notifications
You must be signed in to change notification settings - Fork 0
/
03-event-handlers.html
64 lines (64 loc) · 2.06 KB
/
03-event-handlers.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
<!DOCTYPE html>
<html>
<head>
<title>Flexmonster/React</title>
<!-- React -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<!-- Babel -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
<!-- Flexmonster -->
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
</head>
<body>
<div id="fm-container"></div>
<script type="text/babel">
var App = React.createClass({
render: function() {
return <FlexmonsterReact.Pivot
ref="pivot"
componentFolder="https://cdn.flexmonster.com/"
toolbar={true}
ready={this.onFlexmonsterReady}
reportcomplete={this.onReportComplete}
reportchange={this.onReportChange}
update={this.onUpdate}
cellclick={this.onCellClick}
celldoubleclick={this.onCellDoubleClick}
filteropen={this.onFilterOpen}
fieldslistopen={this.onFieldsListOpen}
fieldslistclose={this.onFieldsListClose}
/>;
},
onFlexmonsterReady: function() {
this.refs.pivot.flexmonster.load('https://cdn.flexmonster.com/reports/report.json');
},
onReportComplete: function() {
console.log("[reportcomplete]");
},
onReportChange: function() {
console.log("[reportchange]");
},
onUpdate: function() {
console.log("[update]");
},
onCellClick: function(cell) {
console.log("[cellclick]", cell);
},
onCellDoubleClick: function(cell) {
console.log("[celldoubleclick]", cell);
},
onFilterOpen: function(params) {
console.log("[filteropen]", params);
},
onFieldsListOpen: function() {
console.log("[fieldslistopen]");
},
onFieldsListClose: function() {
console.log("[fieldslistclose]");
}
});
ReactDOM.render(<App/>, document.getElementById('fm-container'));
</script>
</body>
</html>