下載SpreadJS最新試用版

前言 | 問題背景

在不同的應用場景中，數字格式千變萬化，即便強大如Excel，也無法滿足所有的數字格式的需求。有用戶提出了這樣的需求：小數超過兩位時，只保留兩位且不做進位（例如123.456顯示123.45）；小數不足兩位時，無后綴0（例如123.4就顯示123.4）；沒有小數時只顯示整數（例如123就顯示123）；整數部分需要能夠每三位添加一個分位符（例如1234顯示1,234）。

問題分析與解決思路

針對這樣的“非典型需求”，我們即無法直接用Excel實現，Spread JS也沒有原生的數字格式的支持。原本用戶想用條件格式來實現，但實際上Spread JS提供了更加簡潔的思路——自定義格式接口，這樣用戶可以最大限度地實現自己想要的格式。

解決自定義格式的問題，可以分為以下幾個步驟：

1. 重寫GC.Spread.Formatter.GeneralFormatter類的format方法，這個方法接收的第一個參數就是單元格的值，我們可以在format方法中隨意拼接修改值的格式和內容，不會影響單元格的真實值，只會改變最終的展示格式（單元格的Text）。
2. 為單元格設置自定義樣式。
3. 定義一個處理數字的方法，返回符合上述用戶需求的數字字符串。示例中提供的方法比需求的更強大和靈活，不僅可以實現定制是否四舍五入，還可以自定義分位符與小數點。

示例代碼分析

示例中主要做了兩件事，一是通過繼承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 | 下載試用

純前端表格控件SpreadJS，是市面上布局與功能都與 Excel 高度類似的一款表格控件，全中文操作界面，適用于.NET、Java、移動端等多個平臺的類 Excel 數據開發，備受華為、中通、民航飛行學院等國內知名企業客戶青睞。