javascript - 重力形式求列表列的总和

Question

我正在尝试计算重力形式中列表列的总和，不幸的是，这不是主插件中包含的功能，因此我必须找到不同的来源来完成此任务。我找到了一个应该完成此任务的脚本，可以在这里找到， jsFiddle

function calculateLFColumnTotal(formId, columnClass, totalFieldId, currency) {
var columnTotal = 0,
    preField = '#field_' + formId + '_' + totalFieldId,
    totalField = jQuery('#input_' + formId + '_' + totalFieldId),
    cellValue;
currency = (currency && typeof gf_global !== 'undefined');
jQuery(columnClass).each(function () {
    cellValue = jQuery(this).val();
    cellValue = (currency) ? gformToNumber(cellValue) : cellValue;
    columnTotal += parseFloat(cellValue) || 0;
});x
if (jQuery(preField).hasClass('gfield_price')) {
    columnTotal = gformFormatMoney(columnTotal);
    if (jQuery(preField + ' input').length > 1) {
        totalField.html(columnTotal);
        totalField = jQuery('input[name="input_' + totalFieldId + '.2"]');
    }
} else {
    columnTotal = (currency) ? gformFormatMoney(columnTotal) : columnTotal;
}
totalField.val(columnTotal).change();
gformCalculateTotalPrice(formId);
}
    function listFieldColumnTotal(formId, fieldId, column, totalFieldId,       currency) {
var listField = '#field_' + formId + '_' + fieldId,
    columnClass = '.gfield_list_' + fieldId + '_cell' + column + ' input';
jQuery(listField).on('blur', columnClass, function () {
    if (currency && typeof gf_global !== 'undefined') {
        gformFormatPricingField(this);
    }
    calculateLFColumnTotal(formId, columnClass, totalFieldId, currency);
});
jQuery(listField).on('click', '.add_list_item', function () {
    jQuery(listField + ' .delete_list_item').removeProp('onclick');
});
jQuery(listField).on('click', '.delete_list_item', function () {
    gformDeleteListItem(this, 0);
    calculateLFColumnTotal(formId, columnClass, totalFieldId, currency);
});
}
 listFieldColumnTotal( 140, 1, 3, 3, true );

但是，我不确定应该更改哪些元素以及应该保留哪些元素。如果有人有这方面的经验，并且可以引导我走向正确的方向，那就太好了。

Answer 1

有点晚了，但我偶然发现了这个脚本并决定使用它来创建用户定义的价格字段数量。客户希望能够输入多个发票金额并显示总额，我可以使用以下方法实现此目的:

1. 脚本的魔力在于最后一行:

   listFieldColumnTotal( 140, 1, 3, 3, true );
   

各元素在函数中进行了描述，但按顺序描述如下:

• 表单 ID(例如 gform_wrapper_6)
• 列表容器的 ID(例如#field_6_7)
• 我们想要用作动态值的列项，位于列表容器下方(例如 .gfield_list_7_cell2)
• 结果输入容器的 ID(例如 field_6_18)
• 定义我们是否使用货币(我没有尝试将此值设置为“false”，但我想它的工作原理是相同的

因此，这将导致我们的最终声明如下所示:

    listFieldColumnTotal( 6, 7, 2, 18, true );

我使用 gform_pre_render 过滤器将脚本附加到表单。为此，我们将上述脚本集成到我们的functions.php 文件中:

    add_filter( 'gform_pre_render', 'realtimePriceListUpdate' );
	function realtimePriceListUpdate( $form ) {
	?>

		<script type="text/javascript">

			jQuery(document).ready(function(){

				function calculateLFColumnTotal(formId, columnClass, totalFieldId, currency) {
				    var columnTotal = 0,
				        preField = '#field_' + formId + '_' + totalFieldId,
				        totalField = jQuery('#input_' + formId + '_' + totalFieldId),
				        cellValue;
				    currency = (currency && typeof gf_global !== 'undefined');
				    jQuery(columnClass).each(function () {
				        cellValue = jQuery(this).val();
				        cellValue = (currency) ? gformToNumber(cellValue) : cellValue;
				        columnTotal += parseFloat(cellValue) || 0;
				    });
				    if (jQuery(preField).hasClass('gfield_price')) {
				        columnTotal = gformFormatMoney(columnTotal);
				        if (jQuery(preField + ' input').length > 1) {
				            totalField.html(columnTotal);
				            totalField = jQuery('input[name="input_' + totalFieldId + '.2"]');

				        }
				    } else {
				        columnTotal = (currency) ? gformFormatMoney(columnTotal) : columnTotal;
				    }

					totalField.val(columnTotal);
		    		gformCalculateTotalPrice(formId);

				}

				function listFieldColumnTotal(formId, fieldId, column, totalFieldId, currency) {
				    var listField = '#field_' + formId + '_' + fieldId,
				        columnClass = '.gfield_list_' + fieldId + '_cell' + column + ' input';
				    
				    jQuery(listField).on('focusout', columnClass, function () {

				        if (currency && typeof gf_global !== 'undefined') {
				            gformFormatPricingField(this);
				        }
				        calculateLFColumnTotal(formId, columnClass, totalFieldId, currency);

				    });

				    jQuery(listField).on('click', '.add_list_item', function () {
				        jQuery(listField + ' .delete_list_item').removeProp('onclick');
				    });

				    jQuery(listField).on('click', '.delete_list_item', function () {
				        gformDeleteListItem(this, 0);
				        calculateLFColumnTotal(formId, columnClass, totalFieldId, currency);
				    });

				}

			 	listFieldColumnTotal( 6, 7, 2, 18, true );

			});	

		</script>

		<?php

		return $form;

	}

最后，我们不能使用重力表单提供的“总计”字段。我们必须创建一个“Product”字段，这是我们在步骤 1 中获取 id 的字段(结果输入容器的 id)。此外，我们必须在“产品”字段的“高级”选项卡中启用“允许动态填充字段”选项。 (可选)我们可以将产品的字段类型更改为“隐藏”，因为我们不想同时显示总计和产品字段。 Here's a screenshot of the fields required for this list calculation script