DEMO: Crosstab with resizers.

by obobruyko

HTML

<script type='text/javascript' src="http://nesterone.github.io/jasper/dist/jasper.js"></script>

<div id="container" style="margin:20px;height:400px;width:701px"></div>
    
<!--<button id="resizeSelected">Resize selected</button>-->
 
    <div style="margin:60px 40px;">
        <button id="showHideRG">show/hide rowGroup</button>
        <button id="showHideCG">show/hide columnGroup</button>
        <!--<div>
            <input id="height" type="text"/>
            <button id="resizeCG">Resize columnGroup</button>
        </div>
        <div>
            <input id="width" type="text"/>
            <button id="resizeRG">Resize rowGroup</button>
        </div>
        
        <div>
            <input id="gridWidth" type="text" placeholder="Grid width"/>
            <input id="gridHeight" type="text" placeholder="Grid height"/>
            <button id="resizeGrid">Resize grid</button>
        </div>-->
        
        <div>
            <input id="row" type="text" placeholder="Row index"/>
            <input id="column" type="text" placeholder="Column index"/>
            <input id="cellHeight" type="text" placeholder="Height"/>
            <input id="cellWidth" type="text" placeholder="Width"/>
            <br/>
            <button id="resizeHCell">Resize header cell</button>
            <button id="resizeCCell">Resize columnGroup cell</button>
            <button id="resizeRCell">Resize rowGroup cell</button>
            <button id="resizeDCell">Resize data cell</button>
        </div>
        
        <div>
            <button id="selectCell">Select cell</button>
        </div>
        
    </div>

JavaScript

var url = "http://192.168.1.60:8080/jrs_amber_adv",
    //build script loader
    bi = jasper(url, function(err){
        //inform user about error
        alert(err.message);
    });
bi([
    "jquery",
    "components/table/Crosstab",
    "components/table/base/DynamicStrategy",
    "components/table/base/StaticGridDataProvider",
    "components/table/scrollableWidget/ScrollableWidget"
], function($, Crosstab, DynamicStrategy, StaticGridDataProvider, ScrollableWidget) {
    
    //Create data provider
    var dataProvider = new StaticGridDataProvider(gridData).getData,
        headerDataProvider = new StaticGridDataProvider(headerData).getData,
        columnGroupDataProvider = new StaticGridDataProvider(columnGroupData).getData,
        rowGroupDataProvider = new StaticGridDataProvider(rowGroupData).getData,
        colsBufferSize = 5,
        rowsBufferSize = 5;    
    
    //create and init table component
    var crosstab = new Crosstab({
        el: "#container",        
        strategy: { rows: DynamicStrategy,
         cols: DynamicStrategy},
        header: {
            getData: headerDataProvider,
            gridHeight: 100,
            gridWidth: 201,
            colsCount: 3,
            rowsCount: 4,
            colsBufferSize: 100
        },
        columnGroup: {
            getData: columnGroupDataProvider,
            gridHeight: 100,
            gridWidth: 500,
            //colsWidth: 150,
            colsCount: 4,
            //rowsCount: 4,
            colsBufferSize: 5,
            visible: true
        },
        rowGroup: {
            getData: rowGroupDataProvider,
            gridHeight: 300,
            gridWidth: 201,
            rowsHeight: 80,
            //colsCount: 3,
            //rowsCount: 4,
            colsBufferSize: 3,
            visible: true
        },        
        data: {
            getData: dataProvider,
            gridHeight: 300,
            gridWidth: 500,
            colsCount: 5,
            rowsCount:...