miniUI 扩展 金额输入控件

/**
 * miniui扩展组件
 */

if (!window.UserControl) window.UserControl = {};


/**
 * 金额输入控件
 * 2014-10-22
 * www.liuchang.org
 * 显示格式:100,000.00
 * 调用:
 * <input id="amount" name="amount" class="mini-textamount" decimal='2' useThousandsSeparator='false' thousandsSeparator='’' />
 * decimal:精度,默认两位
 * useThousandsSeparator:是否使用千分位,默认true
 * thousandsSeparator:千分位分隔符,默认 ","
 */
UserControl.TextAmount = function () {
    UserControl.TextAmount.superclass.constructor.call(this);
    this.initComponents();
    this.bindEvents();
}

mini.extend(UserControl.TextAmount, mini.TextBox, {
    uiCls: 'mini-textamount',
	decimal : 2, // 精度,默认两位
	value:'0.00', // 默认值
	useThousandsSeparator:true,// 是否使用千分位,默认true
	thousandsSeparator:',',// 千分位分隔符,默认 ","
	
    initComponents: function () {
		this.set({
			decimal:this.decimal,
			useThousandsSeparator:this.useThousandsSeparator,
			thousandsSeparator:this.thousandsSeparator
		});
    },
    
    bindEvents: function () {
		var me = this;
		// 绑定valuechanged事件,对金额格式化
        this.on('valuechanged', function(){
        	var v = me.getValue(),
        		money = 0;
        		
        	// 格式化为数字,并设置精度
        	money = parseFloat(('0' + v).match(/[\d\.]/ig).join('')).toFixed(me.decimal);
        	
        	// 格式化千分位金额格式
        	if(me.useThousandsSeparator){
        		money = money.split('').reverse().join('').replace(/(\d{3}(?=\d)(?!\d+\.|$))/g, '$1' + me.thousandsSeparator).split('').reverse().join('');
        	}
        	
        	me.setValue(money);
        });
    },

    // 重写getValue,去掉金额千分位
    getValue:function(){
        var me = this;
    	return this.value.replace(me.thousandsSeparator, '');
    },
    
    // 返回格式化后的金额
    getText:function(){
    	return this.value;
    },
    
    getAttrs: function (el) {
        var attrs = UserControl.TextAmount.superclass.getAttrs.call(this, el);
        mini._ParseInt(el, attrs,
            ['decimal']
        );
        mini._ParseBool(el, attrs,
            ['useThousandsSeparator']
        );
        mini._ParseString(el, attrs,
            ['thousandsSeparator']
        );
        return attrs;
    }

});

mini.regClass(UserControl.TextAmount, "textamount");

 

发表评论