layui表格添加千分位排序

迷南。 2022-12-28 12:56 21阅读 0赞

> 在项目开发中，有时会使用到表格，我们可以使用ui库提供的表格组件，来实现相关功能，我这里使用的是layui中的数据表格:
> 
>     <table class="layui-hide" id="test"></table>
>     
>     layui.use('table', function(){
>        var table = layui.table;
>        table.render({
>            elem: '#test',
>            data: userData,
>            cellMinWidth: 80, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
>            cols: [[
>                {field:'id', width:80, title: 'ID', sort: true},
>                {field:'username', width:80, title: '用户名'},
>                {field:'sex', width:80, title: '性别', sort: true},
>                {field:'city', width:80, title: '城市'},
>                {field:'sign', title: '签名', width: 80},
>                {field:'experience', title: '积分', sort: true},
>                {field:'score', title: '评分', sort: true},
>                {field:'classify', title: '职业'},
>                {field:'wealth', width:137, title: '财富', sort: true},
>            ]]
>        });
>     });
> 
> filed: 要展示的字段名，title: 显示的列名  
> 效果：  
> ![表格展示][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Jvb2tzdG9yZVNwaXJpdA_size_16_color_FFFFFF_t_70]  
> 可以看到，ID、性别、积分、评分、财富都又加上排序功能，但是财富数值较大，不够直观，就会有需求要求加上千分位，但是如果加上千分位后，数值就会变为字符串类型，排序就会按照字符排序规则，达不到我们想要的效果，这是我们可以使用`templet`来改变展示的数据，将财富列修改如下：
> 
>     {field:'wealth', width:137, title: '财富', sort: true, templet: function (d) { return $this.mhs_addComma(d.wealth) } }
>     
>     //添加千分位方法
>     mhs_addComma(num) {
>        if (num === '' || num === '0') {
>            return ''
>        } else {
>            num = Math.round(num).toString().split(".");  // 分隔小数点
>            var arr = num[0].split("").reverse();  // 转换成字符数组并且倒序排列
>            var res = [];
>            for (var i = 0, len = arr.length; i < len; i++) {
>                if (i % 3 === 0 && i !== 0) {
>                    res.push(",");   // 添加分隔符
>                }
>                res.push(arr[i]);
>            }
>            res.reverse(); // 再次倒序成为正确的顺序
>            if (num[1]) {  // 如果有小数的话添加小数部分
>                res = res.join("").concat("." + num[1]);
>            } else {
>                res = res.join("");
>            }
>            return res;
>        }
>     }
> 
> templet官方详解：https://www.layui.com/doc/modules/table.html\#templet

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Jvb2tzdG9yZVNwaXJpdA_size_16_color_FFFFFF_t_70]: /images/20221120/72d7b2e3412642f183123210021396d7.png