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

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 来选择相应节点

  

 

 

欢迎入伙:https://fineui.com/fans/

三石出品,必属精品 

posted @ 2020-09-16 11:39  三生石上(FineUI控件)  阅读(344)  评论(0编辑  收藏  举报