特定场景下的数据格式化(根据后台控制格式化的方式)

特定场景下的数据格式化

使用biadutemplate边加载边渲染

在加载数据之后需要先格式化再渲染,格式化四种数据:

  1. 日期:需要格式化为yy-mm-dd、yy/mm/dd等
  2. 金额:整数部分从左到右每隔三位数加一个逗号,保留几位小数
  3. 整数:从左到右每隔三位数加一个逗号
  4. 其他:按返回格式输出

html:

<script id="bdt_list" type="text/html">
<div class="row col-xs-12">
    <div class="box box-body table-responsive no-padding">
        <table id="tb_list" class="table table-striped dataTable">
            <thead>
                <tr>
                    <%for(var item_title in wordbook){ %>
                        <% var title = getTitle(wordbook[item_title]);  %>
                        <th width="auto"><%:=title; %></th>
                    <%}%>
                </tr>
            </thead>
            <tbody id="tb_tbody">
            <%if(data!=null&&data.length>0){%> 
            <%for(var i=0;i<data.length;i++){%>
            <% var item = data[i]; %>
            <tr data-index="<%=i%>" >
            <%for(var item_title in wordbook){ %>
                <% var rule = getRule(wordbook[item_title]); %>
                <td style="word-break: break-all;"><%:=formatN(item[item_title],rule); %></td>
            <%}%>
            </tr>
            <%}}%>
            </tbody>
        </table>
    </div>
</div>
</script>

js

// 展示搜索返回的数据
showList: function(ret) {
    var that = this;

    var listData = JSON.parse(ret);
    var bt = baidu.template;
    var chtml = bt('bdt_list', listData.data);
    $('#div_loading').hide();
    $('#div_list').html(chtml);
 /* 
 *   格式化数据开始
 */

/* 通用格式化,number:传入的值 rule:规则 */
formatN: function(number, rule) {
    var number = number.toString();
    if (!isNaN(number)) {
        if (rule == 1) {
            return number;
        } else {
            /* 将格式化规则分类 */
            var regFl = /\(.\)$/;
            var rule_d = regFl.exec(rule)[0].charAt(1);
            if (isNaN(rule_d)) {
                /* 日期 */
                return number.substr(0, 4) + rule_d + number.substr(4, 2) + rule_d + number.substr(6, 2);
            } else if (rule_d == 0) {
                return parseInt(number).toString().replace(/(\d{1,3})(?=(\d{3})+$)/g, '$1,');
            } else {
                /* 格式化数字,千分位加分隔符,保留小数 */
                var right = '';
                var reg = /\./;
                if (!reg.test(number)) {
                    var left = parseInt(number).toString().replace(/(\d{1,3})(?=(\d{3})+$)/g, '$1,');
                    for (var i = 0; i < rule_d; i++) {
                        right += '0';
                    }
                    return left + '.' + right;
                } else {
                    return Number(number).toFixed(rule_d).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
                }
            }
        }
    } else {
        return number;
    }
},
/* 获取title */
getTitle: function(param) {
    var regT = /\,formatN/;
    if (regT.test(param)) {
        return param.split(',')[0];
    } else {
        return param;
    }
},
/* 获取格式化规则 */
getRule: function(param2) {
    var regT2 = /\,formatN/;
    if (regT2.test(param2)) {
        return param2.split(',')[1];
    } else {
        return 1;
    }
},

/* 
 *   格式化数据结束
 */

涉及到正则、字符串、数组的相应知识。格式化的方式是由后端决定的。

约定的返回格式

{
    "state": true,
    "data": {
        "key": "idb:act:bonusgroup",
        "data": [{
            "k0": 20180625,
            "k1": "Centroids: 0, 1, 2, 3, 4<br>",
            "k2": "Centroids: 1, 3, 6, 9, 26<br>",
            "k3": "Centroids: 1, 3, 6, 9, 26<br>"
        }],
        "wordbook": {
            "k0": "日期,formatN(-)",
            "k1": "金额,formatN(2)",
            "k2": "数字,formatN(0)",
            "k3": "其他"
        }
    }
}
其中:
  1. “日期,formatN(-)”表示日期使用“-”分割,可以传其他分隔符。
  2. “金额,formatN(2)”表示保留两位小数,可以传其他整数。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏测试驿栈

Jmeter(五)_函数

1、它有两个参数,第一个参数是要执行的语句,可以是beanshell语句或者是文件地址,是必选参数;第二个参数是保存结果的变量名称,非必选参数。

1832
来自专栏郭少华

ES6

在cmd命令窗口初始化项目-y代表全部默认同意,就不用一次次按回车了。命令执行完成后,会在项目根目录下生产package.json文件。

1633
来自专栏nummy

ECMAScript 6 特性ECMAScript 6 特性

ECMAScript 6,也被称做ECMAScript 2015,是ECMAScript标准的下一个版本。这个标准预计将于2015年6月被正式批准。ES6是这门...

831
来自专栏ShaoYL

iOS循环引用

3005
来自专栏Nian糕的私人厨房

JavaScript 常见面试题分析(二)

④ call() 方法 apply() 方法 bind() 方法 (this 指向第一个参数)

943
来自专栏進无尽的文章

编码篇-iOS程序中的内存分配 栈区堆区全局区等相关知识

在计算机的系统中,运行的应用程序中的数据都是保存在内存中,不同类型的数据,保存的内存区域不同。内存区域大致可以分为:栈区、堆区、全局区(静态区)、文字常量区、程...

1972
来自专栏Golang语言社区

转--Golang语言-- Web 编程

1.golang的安装工具 1.1 GVM 第三方开发的Go多版本管理工具 2.golang环境变量 2.1 GOROOT=D:\go (golang 安装目录...

3718
来自专栏逆向技术

框架原理第二讲,RTTI,运行时类型识别.(以MFC框架讲解)

           框架原理第二讲,RTTI,运行时类型识别.(以MFC框架讲解) 一丶什么是RTTI,以及RTTI怎么设计 通过第一讲,我们知道了怎么样升成...

20910
来自专栏求索之路

android阿里面试java基础锦集

接着上一篇 android阿里面试锦集 今天给大家带来一篇 android阿里面试java基础锦集。很多知识都是Thinking in Java上面的,所以如...

36911
来自专栏Golang语言社区

转-Go语言开发常见陷阱,你遇到过几个?

Go作为一种简便灵巧的语言,深受开发者的喜爱。但对于初学者来说,要想轻松驾驭它,还得做好细节学习工作。 初学者应该注意的地方: 大括号不能独立成行。 未使用变量...

3539

扫码关注云+社区

领取腾讯云代金券