轉帖|使用教程|編輯:王香|2019-04-10 16:27:16.000|閱讀 732 次
概述:在不同的應用場景中,數字格式千變萬化,即便強大如Excel,也無法滿足所有的數字格式的需求。有用戶提出了這樣的需求:小數超過兩位時,只保留兩位且不做進位(例如123.456顯示123.45);小數不足兩位時,無后綴0(例如123.4就顯示123.4);沒有小數時只顯示整數(例如123就顯示123);整數部分需要能夠每三位添加一個分位符(例如1234顯示1,234)。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
在不同的應用場景中,數字格式千變萬化,即便強大如Excel,也無法滿足所有的數字格式的需求。有用戶提出了這樣的需求:小數超過兩位時,只保留兩位且不做進位(例如123.456顯示123.45);小數不足兩位時,無后綴0(例如123.4就顯示123.4);沒有小數時只顯示整數(例如123就顯示123);整數部分需要能夠每三位添加一個分位符(例如1234顯示1,234)。
針對這樣的“非典型需求”,我們即無法直接用Excel實現,Spread JS也沒有原生的數字格式的支持。原本用戶想用條件格式來實現,但實際上Spread JS提供了更加簡潔的思路——自定義格式接口,這樣用戶可以最大限度地實現自己想要的格式。
解決自定義格式的問題,可以分為以下幾個步驟:
示例中主要做了兩件事,一是通過繼承GeneralFormatter類來實現自定義數字格式,二是在format方法中實現了自定義數字格式的業務邏輯。下面的代碼部分就是第一步,如何通過繼承GeneralFormatter來實現自定義數字格式。
var customFormatterTest = {};
customFormatterTest.prototype = GC.Spread.Formatter.GeneralFormatter;
// format方法中,第一個參數obj就是當前單元格的值(帶類型)
customFormatterTest.format = function (obj, conditionalForeColor) {
    return number_format(obj, 2, ".", ",");
};
上述代碼通過繼承GeneralFormatter類,并重寫format方法實現了自定義數字格式,在format方法中,第一個參數obj就是當前單元格的值,拿到單元格的值后,可以根據業務需求進行自定義顯示格式,方法返回值是一個字符串。
第二步,實現自定義數字格式,注意最后返回值是字符串就行了。
function number_format(number, decimals, dec_point, thousands_sep, isRoundUp) {
    /*
    * 參數說明:
    * number:要格式化的數字
    * decimals:保留幾位小數
    * dec_point:小數點符號
    * thousands_sep:千分位符號
    * isRoundUp:是否四舍五入
    * */
    number = (number + '').replace(/[^0-9+-Ee.]/g, '');
    var n = !isFinite(+number) ? 0 : +number,
        prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
        sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
        dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
        s = '',
        toFixedFix = function (n, prec) {
            var k = Math.pow(10, prec);
            // 是否四舍五入
            if(isRoundUp){
                return '' + Math.round(n * k) / k;
            }
            // floor 實現了只舍去不進位的邏輯
            return '' + Math.floor(n * k) / k;
        };
    s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
    var re = /(-?\d+)(\d{3})/;
    while (re.test(s[0])) {
        s[0] = s[0].replace(re, "$1" + sep + "$2");
    }
    if ((s[1] || '').length < prec) {
        s[1] = s[1] || '';
    }
    // 當小數部分為空時,不顯示小數點
    if(s[1] === ""){
        return s.join("");
    }
    return s.join(dec);
}
純前端表格控件SpreadJS,是市面上布局與功能都與 Excel 高度類似的一款表格控件,全中文操作界面,適用于.NET、Java、移動端等多個平臺的類 Excel 數據開發,備受華為、中通、民航飛行學院等國內知名企業客戶青睞。
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn