【新特性速递】表格列的货币栅格化显示
FineUIPro/Mvc/Core的下个版本（v7.0.0），我们会新增一个表格示例，用来展示如何自定义货币栅格化显示。
首先看下示例显示效果：
工资列中，红色竖线表示小数分隔符，绿色竖线表示千分位分隔符。
那么怎么实现这个效果呢？这就需要借助于列渲染函数，并自定义CSS样式。
本列的标签定义：
<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;
}
需要注意如下两点：
- 最后一个栅格右侧边框为透明色，通过 .currency td:last-child 来选择相应节点
- 小数分隔符的右侧边框为红色，通过 .currency td.separator.lastone 来选择相应节点
三石出品，必属精品
