随笔- 445 文章- 0 评论- 5832 阅读- 270万

【新特性速递】表格列的货币栅格化显示

FineUIPro/Mvc/Core的下个版本（v7.0.0），我们会新增一个表格示例，用来展示如何自定义货币栅格化显示。

首先看下示例显示效果：

工资列中，红色竖线表示小数分隔符，绿色竖线表示千分位分隔符。

那么怎么实现这个效果呢？这就需要借助于列渲染函数，并自定义CSS样式。

本列的标签定义：

1	`<f:RenderField` `Width="200px" ColumnID="Salary" DataField="Salary" HeaderText="工资" RendererFunction="renderSalary" />`

列的自定义渲染函数：

<script>
    // 单元格总数（8, 11, 14）
    var CELL_COUNT = 11;
 
    function renderSalary(value) {
        var result = '', html = [];
 
        var items = (value + '').split('.');
        var integerPart = items[0];
        var decimalPart = items[1];
        result += integerPart;
        if (decimalPart) {
            result += decimalPart.charAt(0) || '0';
            result += decimalPart.charAt(1) || '0';
        } else {
            result += '00';
        }
        var prefixCount = CELL_COUNT - result.length;
        if (prefixCount > 0) {
            for (var i = 0; i < prefixCount; i++) {
                result = '_' + result;
            }
        }
 
        html.push('<table class="currency"><tbody><tr>');
        for (var i = 0; i < CELL_COUNT; i++) {
            var tdCls = '';
            if ((i + 1) % 3 === 0) {
                tdCls = 'separator';
 
                if (i + 1 + 3 > CELL_COUNT) {
                    tdCls += ' lastone';
                }
            }
            var cellValue = result.charAt(i);
            html.push(F.formatString('<td class="{0}">{1}</td>',
                tdCls,
                cellValue === '_' ? ' ' : cellValue));
        }
        html.push('</tr></tbody></table>');
        return html.join('');
    }
 
</script>

这段JavaScript代码稍微有点复杂，我们就以数字 6888.5 为例分析一下。

1. 定义栅格的个数（CELL_COUNT）

8个：6位整数部分，2位小数部分

11个：9位整数部分，2位小数部分

2. 获取整数部分和小数部分

integerPart === '6888'
decimalPart === '5'

3. 生成需要渲染的字符串

result === '00000688850'

4. 循环生成HTML片段

在3位一个分割符的地方，为td标签增加separator样式

如果是最后一个分隔符，除了separator样式类，还需要增加一个lastone样式类，因为这个小数分隔符有别于前面的千分位分隔符。

最终生成的HTML片段如下所示：

<html>
 <head></head>
 <body>
  <table class="currency">
   <tbody>
    <tr>
     <td> </td>
     <td> </td>
     <td class="separator"> </td>
     <td> </td>
     <td> </td>
     <td class="separator">6</td>
     <td>8</td>
     <td>8</td>
     <td class="separator lastone">8</td>
     <td>5</td>
     <td>0</td>
    </tr>
   </tbody>
  </table>
 </body>
</html>

下面就是CSS定义了：

.f-grid-cell-Salary .f-grid-cell-inner {
    padding: 0;
}
.currency {
    border-collapse: separate;
    table-layout: fixed;
    width: 100%;
    border-spacing: 0px;
}
.currency td {
    border-right-width:1px;
    border-right-style: solid;
    border-right-color: #ddd;
    text-align: center;
}
.currency td:last-child {
    border-right-color: transparent;
}
.currency td.separator {
    border-right-color: green;
}
.currency td.separator.lastone {
    border-right-color: red;
}