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://build-master.jaspersoft.com:8980/jrs-pro-feature-embeddable-ahv2/client/visualize.js?_opt=true"></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/Ad_Hoc_View_Area",
    container: "#container",
    success: function() {
      console.log("rendered", _);
    },
    error: function(e) {
      console.log(e);
    },
    linkOptions: {
      events: {
        click: function(ev, data, defaultHandler, extendedData) {
          console.log(data, extendedData);
          
          $("tr").removeClass("my-selected");
          $("tbody tr:nth-child(" + (extendedData.row.relativeIndex + 1) + ")").addClass("my-selected");
          
        },
        mouseover: function(ev, data, defaultHandler, extendedData) {
          console.log(data, extendedData);
          
          $("tr").removeClass("my-selected");
          $("tbody tr:nth-child(" + (extendedData.row.relativeIndex + 1) + ")").addClass("my-selected");
          
        },
        mouseout: function(ev, data, defaultHandler, extendedData) {
          console.log(data, extendedData);
          
          $("tr").removeClass("my-selected");
          
        }
      },
                        beforeRender: function (elemToLinkPairs) {
                            console.log("Before Render",elemToLinkPairs);

                            elemToLinkPairs.forEach(function (pair) {
                                pair.element.style.textDecoration = "underline";
                                pair.element.style.cursor = "pointer";
                            });
                        }
    }
  });
});