Crosstab: last version

by obobruyko

HTML

<link rel="stylesheet" type="text/css" href="http://192.168.1.63:8080/jrs_amber_adv/scripts/components/table/css/perfect-scrollbar.css">
<link rel="stylesheet" type="text/css" href="http://192.168.1.63:8080/jrs_amber_adv/scripts/components/table/css/table.css">
<link rel="stylesheet" type="text/css" href="http://192.168.1.63:8080/jrs_amber_adv/scripts/lib/jquery/theme/redmond/jquery-ui-1.8.20.custom.css">
            
<script src="http://192.168.1.63:8080/jrs_amber_adv/scripts/lib/require-jquery-2.1.2.js"></script>
<script src="http://192.168.1.63:8080/jrs_amber_adv/scripts/require.config.js"></script>            
<script>
var __jrsConfigs__ = {
   urlContext : "http://192.168.1.63:8080/jrs_amber_adv",
   isXdm: true
};
    
require.config({
    baseUrl: __jrsConfigs__.urlContext + "/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;
    
    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="width: {{=width}}px;">'+
        '{{ }); }}'+
    '</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="width:{{=widths[x]}}px; height:{{=heights[y]}}px;"'+
                     ' title="{{- cellRenderer.getTitle(x, y, cell) }}">'+
                     ' {{= cellRenderer.getContent(x, y, cell) }}'+
                '</div>'+
            '</div>'+
        '</td>'+
        '{{ } }}'+
        '{{ }); }}'+
   '</tr>'+
    '{{ }); }}'+
    '</tbody>'+
'</table>';
    
    //create and init table...