GRID DOC. Example 3.1: Crosstab with StaticStrategy

by obobruyko

HTML

<link rel="stylesheet" type="text/css" href="http://build-master.jaspersoft.com:7680/jrs-pro-feature-amber-adv/themes/reset.css"> 
    
<link rel="stylesheet" type="text/css" href="http://build-master.jaspersoft.com:7680/jrs-pro-feature-amber-adv/themes/default/containers.css"> 
    
<link rel="stylesheet" type="text/css" href="http://build-master.jaspersoft.com:7680/jrs-pro-feature-amber-adv/themes/default/theme.css">

<link rel="stylesheet" href="http://build-master.jaspersoft.com:7680/jrs-pro-feature-amber-adv/scripts/components/table/css/table.css">
    
<link type="text/css" rel="stylesheet" href="http://build-master.jaspersoft.com:7680/jrs-pro-feature-amber-adv/scripts/components/table/css/perfect-scrollbar.css">  
    
<link rel="stylesheet" type="text/css" href="http://build-master.jaspersoft.com:7680/jrs-pro-feature-amber-adv/scripts/lib/jquery/theme/redmond/jquery-ui-1.10.4-custom.css">
    
<script src="http://build-master.jaspersoft.com:7680/jrs-pro-feature-amber-adv/scripts/lib/require-2.1.10.js"></script>
         
<script src="http://build-master.jaspersoft.com:7680/jrs-pro-feature-amber-adv/scripts/require.config.js"></script>

<script>
var __jrsConfigs__ = {
    contextPath : "http://build-master.jaspersoft.com:7680/jrs-pro-feature-amber-adv",
    userLocale: "en",
    isXdm: true
};
    
require.config({
    baseUrl: __jrsConfigs__.contextPath + "/scripts",
});
</script>

<div id="container" style="margin-top:20px;height:400px;width:701px"></div>
<button id="left" style="margin-top: 50px;">Left</button>
<button id="right">Right</button>
<button id="resizeSelected">Resize selected</button>

JavaScript

require([
    "jquery",
    "components/table/Crosstab",
    "components/table/base/DynamicStrategy",
    "components/table/base/StaticGridDataProvider",
], function($, Crosstab, DynamicStrategy, StaticGridDataProvider) {
    
    //Create data provider
    var dataProvider = new StaticGridDataProvider(gridData).getData,
        headerDataProvider = new StaticGridDataProvider(headerData).getData,
        columnGroupDataProvider = new StaticGridDataProvider(columnGroupData).getData,
        rowGroupDataProvider = new StaticGridDataProvider(rowGroupData).getData;
    
    //create and init table component
    var crosstab = new Crosstab({
        el: "#container",
        header: {
            getData: headerDataProvider,
            gridHeight: 100,
            gridWidth: 201,
            colsCount: 3,
            rowsCount: 4,
            colsBufferSize: 100
        },
        columnGroup: {
            getData: columnGroupDataProvider,
            gridHeight: 100,
            gridWidth: 500,
            colsCount: 5,
            rowsCount: 4,
            colsBufferSize: 10       
        },
        rowGroup: {
            getData: rowGroupDataProvider,
            gridHeight: 300,
            gridWidth: 201,
            colsCount: 3,
            rowsCount: 4,
            colsBufferSize: 3        
        },        
        data: {
            getData: dataProvider,
            gridHeight: 300,
            gridWidth: 500,
            colsCount: 10,
            rowsCount: 10,
            colsBufferSize: 100
        }
    });
    crosstab.render();
    
    var resizer = function(){crosstab.resizeGrid();}

    $("#container").resizable({                            
            stop: resizer,
            ghost: true,
            helper: "jrs-grid-resizable-helper"
    });
   
    $("#left").on("click", function(event) {
        var scroollPos = crosstab.scrollPos();
        crosstab.scrollTo(scroollPos.top, scroollPos.left - 1);
        event.stopPropagation();
   ...