Visualize: table row selection
Test plugins
by Yuriy Bablyukh
HTML
<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<!--Provide URL to visualize.js-->
<script type='text/javascript' src="http://localhost:8080/jasperserver-pro/client/visualize.js?_opt=false"></script>
<!--Provide container to render your visualization-->
<div id="details"></div>
<div id="container"></div>
CSS
.my-selected {
background-color: lightblue!important;
}
#details {
margin-bottom: 10px;
}
JavaScript
visualize({
auth: {
name: "superuser",
password: "superuser"
}
}, function(v) {
var ahv = v.adhocView({
resource: "/public/EmbeddableAhv/Ad_Hoc_View_TopN",
container: "#container",
success: function() {
console.log("rendered");
},
error: function(e) {
console.log(e);
},
linkOptions: {
beforeRender: function (elemToLinkPairs) {
console.log(elemToLinkPairs);
elemToLinkPairs.forEach(function (pair) {
pair.element.style.textDecoration = "underline";
pair.element.style.cursor = "pointer";
});
},
events: {
click: function(ev, data, defaultHandler, extendedData) {
console.log(data, extendedData);
}
}
}
});
});