自动转换百分比输入值

时间:2011-09-26 20:19:02

标签: php javascript jquery forms cakephp

我使用CakePHP构建的应用程序中的几个表单字段为其值收集百分比。我希望用户能够以熟悉的百分比(24.5%)格式查看和编辑百分比,但我想将其存储为十进制(.245)格式,以便简化计算逻辑。由于这些字段中有几个,我宁愿不必将转换逻辑写入每个百分比字段的控制器中。

是否有人知道自动执行此转换的简单解决方案,或者我是否坚持编写自定义帮助程序/行为来解决此问题?

解决方案

我最终编写了一个处理此问题的jQuery插件。对于今后可能需要它的人来说,这就是:

/**
 * Input Percent
 * 
 * Percentages are tricky to input because users like seeing them as 24.5%, but
 * when using them in calculation their value is actually .245.  This plugin
 * takes a supplied field and automatically creates a percentage input.
 * 
 * It works by taking an input element and creating a hidden input with the same
 * name immediately following it in the DOM.  This has the effect of submitting
 * the proper value instead of the human only one.  An onchange method is then
 * bound to the original input in order to keep the two synced.
 * 
 * Potential Caveats:
 *   * There will be two inputs with the same name.  Make sure anything you
 *     script against this field is prepared to handle that.
 *     
 * @author Brad Koch <kochb@aedisit.com>
 */
(function($) {
    $.fn.inputPercent = function() {
        return this.each(function() {
            var display_field = this;
            var value_field = $('<input type="hidden" />').get(0);

            // Initialize and attach the hidden input.
            $(value_field).attr('name', $(this).attr('name'));
            $(value_field).val($(display_field).val());
            $(display_field).after(value_field);
            $(display_field).after('%');

            // Convert the display field's proper percent value into the display format.
            if (isFinite($(display_field).val())) {
                $(display_field).val($(display_field).val() * 100);
            }

            // Enable synchronization between the two.
            $(this).bind('change', function () {
                var value = $(display_field).val();

                // Handle non-numeric values.
                if (isFinite(value)) {
                    $(value_field).val(value / 100);
                } else {
                    $(value_field).val(value);
                }
            });
        });
    };
})(jQuery);

用法:

$('input.percent').inputPercent();

3 个答案:

答案 0 :(得分:2)

已经有了一个帮手 - NumberHelper

http://book.cakephp.org/view/1455/toPercentage

我发现的唯一缺点是,如果您将数据存储为百分比的十进制表示(即.045 = 4.5%)而不是实际百分比(即.045 = .045%)那么您将在转换之前必须乘以100。

即:

<?php echo $this->Number->toPercentage( 51.5 ); // 51.5% ?>
<?php echo $this->Number->toPercentage( .245 * 100 ); // 24.5% ?>

答案 1 :(得分:2)

你可以写一些简单的javascript(使用你最喜欢的框架,或简单的js),在提交之前用#percentage类转换字段。

或者,也可以在没有javascript的情况下处理用户;在模型中,添加beforeSave()方法,检查数字是否为&lt; 1或不,如果不是,除以100。

如果NumberHelper无法帮助,您还可以添加一个简单的组件或帮助程序,将内部数字转换回显示的百分比。

答案 2 :(得分:0)

我最近编写了一个插件,用于从json转换为存储在DB中。 https://github.com/dereuromark/tools/blob/master/models/behaviors/jsonable.php

您可以轻松修改它以转换为百分比。 你需要一些自定义

一个afterFind

beforeSave

这样做。

然后将其附加到您的模型,如下:

$ actsAs = array('Percentage');