查找小计和总计

Question

With reference to the answer given by Mr. asgallant for my previous question here , I extended my sample like in this fiddle where I added a column named "Total" and sum of each columns. Also I added a print button as,

function printPage(){
    var tableData = '<table border="1" width="100%" cellspacing="0" cellpadding="4px" style="font-family: arial, helvetica; font-size: 10pt; border-spacing: 0;"><tr><td colspan="10">Print Report</td></tr>' +document.getElementsByTagName('table')[0].innerHTML+'<tr style="padding-bottom: 4px; width:100%; font-size: 11pt; font-weight: bold; font-family: arial, helvetica; text-align: right; vertical-align: top;"><td colspan="3">Total:&nbsp;</td><td>'+C100+'</td><td>'+C500+'</td><td>'+C200+'</td><td>'+C600+'</td><td>'+C300+'</td><td>'+C400+'</td><td>'+CTotal+'</td></tr></table>';
    var data = tableData+'<style type="text/css" media="print"> .noprint {visibility: hidden;} </style><br/><button class="noprint" onclick="window.print()" >Print the Report</button><button class="noprint" onclick="window.close();">Close Preview</button><br />';        
    myWindow=window.open('','','width=800,height=600');
    myWindow.innerWidth = screen.width;
    myWindow.innerHeight = screen.height;
    myWindow.screenX = 0;
    myWindow.screenY = 0;
    myWindow.document.write(data);
    myWindow.focus();
};

which given in the fiddle. But I am trying to achieve some format in print page as given below.

Answer 1

Complete code to address the base question and comments:

function drawTable(response) {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Column1');
    data.addColumn('string', 'Column2');
    data.addColumn('number', 'Column3');
    data.addRows([
        ['A', 'foo', 100],
        ['A', 'foo', 200],
        ['A', 'foo', 100],
        ['A', 'foo', 100],
        ['A', 'bar', 200],
        ['A', 'bar', 300],
        ['A', 'baz', 300],
        ['B', 'baz', 200],
        ['B', 'cad', 300],
        ['B', 'cad', 400],
        ['B', 'cad', 100]
    ]);

    //  var distinctValues = data.getDistinctValues(2);
    var distinctValues = [100, 500, 200, 600, 300, 400];

    var viewColumns = [0, 1];
    var groupColumns = [];
    // build column arrays for the view and grouping
    for (var i = 0; i < distinctValues.length; i++) {
        viewColumns.push({
            type: 'number',
            label: distinctValues[i],
            calc: (function (x) {
                return function (dt, row) {
                    return (dt.getValue(row, 2) == x) ? 1 : 0;
                }
            })(distinctValues[i])
        });
        groupColumns.push({
            column: i+2,
            type: 'number',
            //label: distinctValues[i],
            aggregation: google.visualization.data.sum
        });
    }

    //total column
    viewColumns.push({
        type: 'number',
        label: 'Total',
        calc: function (dt, row) {
            return 1;
        }
    });
    groupColumns.push({
        column: distinctValues.length + 2,
        type: 'number',
        aggregation: google.visualization.data.sum
    });

    var view = new google.visualization.DataView(data);
    view.setColumns(viewColumns);

    // next, we group the view on column A, which gets us the pivoted data
    var pivotedData = google.visualization.data.group(view, [0, 1], groupColumns);

    var control = new google.visualization.ControlWrapper({
        'controlType': 'CategoryFilter',
        'containerId': 'control',
        'options': {
            'filterColumnIndex': 0,
            'ui': {
                'labelStacking': 'vertical',
                'caption': 'Select',
                'allowTyping': false,
                'allowMultiple': false
            }
        }
    });

    var table = new google.visualization.ChartWrapper({
        'chartType': 'Table',
        'containerId': 'table1',
        'options': {
            'width': '100%',
            'showRowNumber' : true
        },
    });

    new google.visualization.Dashboard(document.getElementById('dashboard')).
    bind(control, table).
    // Configure & bind the controls 
    draw(pivotedData);

    google.visualization.events.addListener(table, 'ready', function () {
        var reportview = google.visualization.data.group(table.getDataTable(), [0, 1], groupColumns);
        var subTotals = google.visualization.data.group(reportview, [0], groupColumns);

        var grandTotal = google.visualization.data.group(reportview, [{
            type: 'string',
            column: 0,
            modifier: function (val) {return null;}
        }], groupColumns);

        // add subtotals to pivotedData
        for (var i = reportview.getNumberOfRows() - 1, oldVal, newVal, row, subIndex; i >= 0; i--) {
            newVal = reportview.getValue(i, 0);
            if (oldVal != newVal) {
                oldVal = newVal;
                subIndex = subTotals.getFilteredRows([{column: 0, value: newVal}])[0];
                row = [{v: subTotals.getValue(subIndex, 0) + ' Total', p: {style: 'font-style:bold; font-size:22px;'}}, null];
                for (var j = 1; j < subTotals.getNumberOfColumns(); j++) {
                    row.push({v: subTotals.getValue(subIndex, j), p: {style: 'font-style:bold; font-size:22px;'}});
                }
                reportview.insertRows(i + 1, [row]);
            }
        }

        // add grand total to pivotedData
        var row = [{v: 'Grand Total', p: {style: 'font-style:bold; font-size:22px;'}}, null];
        for (var i = 1; i < grandTotal.getNumberOfColumns(); i++) {
            row.push({v: grandTotal.getValue(0, i), p: {style: 'font-style:bold; font-size:22px;'}});
        }
        reportview.addRow(row);

        var table2 = new google.visualization.Table(document.getElementById('table2'));
        table2.draw(reportview, {'width': '100%', 'showRowNumber' : true, allowHtml: true});
    });
}

jsfiddle: http://jsfiddle.net/asgallant/DUn6B/15/