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

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: 

A screenshot of the table with some highlights of the differences.

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:
Screen Shot of the table with javascript turned off

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/... ######################## */
Bạn thấy bài viết này như thế nào?: 
Average: 5 (1 vote)
Ảnh của Tommy Tran

Tommy owner Express Magazine

Drupal Developer having 9+ year experience, implementation and having strong knowledge of technical specifications, workflow development. Ability to perform effectively and efficiently in team and individually. Always enthusiastic and interseted to study new technologies

  • Skype ID: tthanhthuy

Tìm kiếm bất động sản

 

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

 

Tìm hiểu các câu lệnh trong Turbo Pascal, Borland Pascal

Ngưng thực hiện chương trình và trở về hệ điều hành.

Bài 5:Học sinh lập trình Scratch - Làm quen với biến

Bài 5:Học sinh lập trình Scratch - Làm quen với biến

Bạn đã làm được hai trò chơi: “Mèo nhí diễu hành” và “Dơi bắt chuột, chuột ăn chuối”. Bạn nên hướng dẫn cho bé tự làm từ đầu thật thạo hai trò chơi đó trước khi chuyển qua bước tiếp theo

Facebook quyết định về những nội dung họ muốn người dùng xem

Facebook quyết định về những nội dung họ muốn người dùng xem

Cựu quản lý Facebook tố thuật toán của công ty xếp nội dung dựa trên sự tương tác, khiến bài đăng gây sốc có thể được ưu tiên lên đầu News Feed.

Công ty diệt chuột T&C

 

Diet con trung