查找小计和总计

Question

参照先生asgallant为我先前的问题here提供的答案，我扩展了我的样本，如this fiddle，其中我添加了一个名为“Total”的列和每列的总和。我还添加了一个打印按钮，如：

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(); 
}; 

其中给出了小提琴。但我正试图在打印页面中实现一些格式，如下所示。

Answer 1

完整代码，以解决基础问题和意见：

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/