GRID DOC. Example 1: BaseGrid with StaticStrategy

by tara5

HTML

<script src="http://build-master.jaspersoft.com:7680/jrs-pro-feature-amber-adv/scripts/lib/require-jquery-2.1.2.js"></script>
         
<script src="http://build-master.jaspersoft.com:7680/jrs-pro-feature-amber-adv/scripts/require.config.js"></script>

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

<div class="table-container"> 
       <div id="container" style="height:250px;width:600px;"></div>
</div>

CSS

.table-headerTable.table-cellHeader {
    font-weight:bold;
}
.table-container{
    margin-top: 20px;
    margin-left: 20px;
}

/*------------------------------------------
MODULES STYLESHEET

Project:		JasperReports Server
Version:		.01
Last change:	03/20/14
Author:			Anna Leeg
-------------------------------------------*/

/*----------------*/
/*  TABLE MODULE  */
/*----------------*/

.table {
    border-collapse:separate;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width:100%;
}

.table-header {}

.table-cell {
    border-collapse:separate;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color:#666666;
    height: 24px;
    line-height:1.4em;
    overflow: hidden;
    padding: 3px 4px;
    position: relative;
    text-align:left;
    vertical-align: top;
    white-space: normal;
    word-wrap: break-word;
}

/* table-cell varieties */

/* thead rows */
.table-headerColumns {
    /* background:linear-gradient(#E1E9F3, #D4DEE9) repeat scroll 0 0 transparent; */
    background-color:#D4DEE9;
}

.table-headerTable {
   background-image:...

JavaScript

require([
        "jquery",
        "components/table/base/BaseGrid",
        "components/table/base/StaticGridDataProvider"
    ], function($, BaseGrid, StaticGridDataProvider) {        
        //Create data provider
        var dataProvider = new StaticGridDataProvider(gridData).getData;
        
        // A little bit changed template ( added cell.contentClass) 
        var template = '<table class="jrs-grid table tableResults" style="height: {{=totalHeight}}px; width: {{=totalWidth}}px;" unselectable="on" onselectstart="return false">' + 

    '<colgroup>'+
        '{{_.each(widths, function(width) { }}'+
        '<col style="">'+ // removed styles 
        '{{ }); }}'+
    '</colgroup>'+

    '<tbody>'+
    '{{_.each(data, function(row, y) { }}'+
    '<tr style="height: {{=heights[y]}}px;">'+
        '{{_.each(row, function(cell, x) { }}'+
        '{{ if (cell && !cell.isHelper) { }}'+
        '<td class="{{=cell.className}} jrs-grid-cell"'+
            ' data-column="{{=cell.column}}" data-row="{{=cell.row}}"'+
            ' data-visibleColumn="{{=cell._meta.column}}" data-visibleRow="{{=cell._meta.row}}"'+
            ' colspan="{{=cell.colspan}}" rowspan="{{=cell.rowspan}}">'+
            '<div class="jrs-grid-cell-content-container" style="position: relative;">'+
                '<div class="jrs-grid-cell-content {{=cell.contentClass}}"'+
                     ' style=""'+ // removed styles
                     ' title="{{- cellRenderer.getTitle(x, y, cell) }}">'+
                     ' {{= cellRenderer.getContent(x, y, cell) }}'+
                '</div>'+
            '</div>'+
        '</td>'+
        '{{ } }}'+
        '{{ }); }}'+
   '</tr>'+
    '{{ }); }}'+
    '</tbody>'+
'</table>';
        
        //Create instance of grid
        var grid =  new BaseGrid({
            getData: dataProvider,
            colsWidth: 120,
            rowsHeight: 30,
            colsCount: 5,
            rowsCount: 5,
            template: template,
           ...