Giới thiệu jQuery và Subtotaling trong Views Calc Tables - Drupal 7

Views Calc module

As a follow up to Drupal 6: Using jQuery to pick up where views_calc falls short, I worked on a project this week that used views_calc in D7 and we wanted to leverage the same subtotaling that I demonstrated in D6.

>>  Làm thế nào tạo Search Pages sử dụng Views trong Drupal 7

>> Hướng dẫn tạo Faceted Filters, without ApacheSolr trong Drupal 7 Views

There are a lot of similarities in the code so it didn’t take much tweaking. 

Here’s a look at a table with some elements highlighted: 

The server calculated totals are in the green bar and you can see the correlation between those and the subtotals in the grey table. In addition, each sub-totaled column (noted with the yellow underline) adds up; which is nice.

Compare that to the table with javascript disabled:

Green and grey totals don’t match and the subtotals are not correct.

Below is the code. You’ll see two Drupal.behaviors functions. Drupal.behaviors.sumCarryForward() runs any time a js action is triggered (and on page load). It calls Drupal.behaviors.sumCarryForwardSubTotal() which is the routine that calculates the total and pushes the sum to the relevant subtotal cell.

/* ######################## Helper function for Auto Calc jquery for cfba/ledger/edit/... ######################## */

(function ($) {

  Drupal.behaviors.sumCarryForwardSubTotal = function(colsToSumClassArray, selectedThis) {

      if(typeof colsToSumClassArray !== 'undefined' && (colsToSumClassArray.toString().indexOf('HTMLDocument')== -1) && typeof selectedThis !== 'undefined'){

          //console.log(colsToSumClassArray+', '+selectedThis);

        for(data_and_total_class_inc = 0; data_and_total_class_inc < colsToSumClassArray.length; data_and_total_class_inc++){

          data_and_total_class = colsToSumClassArray[data_and_total_class_inc];

          //console.log('data_and_total_class: '+data_and_total_class);

          //run only if there is a data_and_total_class var

          var sum = parseFloat(0);

          $('table.views-table tr:not(.view-fop-subtotal, .view-footer-number)', selectedThis).each(function(){

            var curVal = 0;

            //sum input and non-input fields

            //console.log('length: '+$('td.' + data_and_total_class + ' input', this).length);

            if($('td.' + data_and_total_class + ' input', this).length > 0){

              curVal = parseFloat($('td.' + data_and_total_class + ' input', this).val().replace(',', ''));

              //console.log('input cell: '+curVal);

            }else{

              curVal = parseFloat($('td.' + data_and_total_class, this).text().replace(',', ''));

              //console.log('No input in this cell: '+curVal);

            }

            if(jQuery.isNumeric(curVal)){

              sum += curVal;

            }

          });//end $('form table.views-table tr:not(.view-footer-number)', this).each(function()

          //console.log('sum: '+sum);

          //console.log('.views-field-field-vr-fop table.views-table .view-fop-subtotal td.' + data_and_total_class+' , this).html(sum): '+$('.views-field-field-vr-fop table.views-table .view-fop-subtotal td.' + data_and_total_class , this).html());

          $('.views-field-field-vr-fop table.views-table .view-fop-subtotal td.' + data_and_total_class , selectedThis).html(sum);


        }//end for each

      }//end typeof data_and_total_class !== undefined...

    }//end Drupal.behaviors function(data_and_total_class)

})(jQuery);


/* ######################## END Helper function for Auto Calc jquery for cfba/ledger/edit/... ######################## */


/* ######################## Auto Calc jquery for cfba/ledger/edit/... ######################## */

(function ($) {

  Drupal.behaviors.sumCarryForward = {

    attach: function(context) {

      //run only if there is a context var

      if(typeof context !== 'undefined'){

        //Sum the value of each carry forward input field and put the total in the carry forward header

        if($('body').hasClass('page-cfba-ledger')) {

          //console.log('hasClass page-cfba-ledger');

          $('.views-row').each( function(){

            //get the value of each column and then total with Drupal.behaviors.sumCarryForwardSubTotal('data_and_total_class')

            colsToSumArr = Array();

            //console.log($('form table.views-table .view-footer-number td.views-field-field-cf-budget', this).html());

            colsToSumArr = Array('views-field-field-adjusted-budget','views-field-field-actual-budget-used','views-field-field-budget-balance','views-field-field-cf-budget')

            //console.log('typeof colsToSumArr: '+typeof colsToSumArr);

            Drupal.behaviors.sumCarryForwardSubTotal(colsToSumArr, this);

         });//end $('.views-row').each( function()

        }//end if($('body').hasClass('page-cfba-ledger'))

      }//end typeof context !== und

    }//end function(context)

  }//end Drupal.behaviors

})(jQuery);

/* ######################## End Auto Calc jquery for cfba/ledger/edit/... ######################## */