下載SpreadJS最新試用版

前言 | 問題背景

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

問題分析與解決思路

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

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

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

示例代碼分析

示例中主要做了兩件事，一是通過繼承GeneralFormatter類來實現(xiàn)自定義數(shù)字格式，二是在format方法中實現(xiàn)了自定義數(shù)字格式的業(yè)務邏輯。下面的代碼部分就是第一步，如何通過繼承GeneralFormatter來實現(xiàn)自定義數(shù)字格式。

var customFormatterTest = {};
customFormatterTest.prototype = GC.Spread.Formatter.GeneralFormatter;
// format方法中，第一個參數(shù)obj就是當前單元格的值（帶類型）
customFormatterTest.format = function (obj, conditionalForeColor) {
    return number_format(obj, 2, ".", ",");
};

上述代碼通過繼承GeneralFormatter類，并重寫format方法實現(xiàn)了自定義數(shù)字格式，在format方法中，第一個參數(shù)obj就是當前單元格的值，拿到單元格的值后，可以根據(jù)業(yè)務需求進行自定義顯示格式，方法返回值是一個字符串。

第二步，實現(xiàn)自定義數(shù)字格式，注意最后返回值是字符串就行了。

function number_format(number, decimals, dec_point, thousands_sep, isRoundUp) {
    /*
    * 參數(shù)說明：
    * number：要格式化的數(shù)字
    * decimals：保留幾位小數(shù)
    * dec_point：小數(shù)點符號
    * 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 實現(xiàn)了只舍去不進位的邏輯
            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] || '';
    }
    // 當小數(shù)部分為空時，不顯示小數(shù)點
    if(s[1] === ""){
        return s.join("");
    }
    return s.join(dec);
}

SpreadJS | 下載試用

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