【新特性速遞】表格列的貨幣柵格化顯示

三生石上(FineUI控制元件)發表於2020-09-16

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/

三石出品，必屬精品 

相關文章