【新特性速遞】當法語遇上FineUI（Bonjour）！

三生石上(FineUI控制元件)發表於2020-06-11
UI

上個版本，我們為數字輸入框增加了 DotSeparator 和 CommaSeparator，對於特殊語種會非常有用。

https://www.cnblogs.com/sanshi/p/12836430.html

 

比如在法語或者西班牙語的環境下，小數分隔符和千分位分隔符和我們正常的認知是不同的。

下面這個數字（以字串表示）：

"1,682.80"

在法語環境下，應該寫作：

"1.682,80"

 

那麼這個特性具體該怎麼使用呢？

資料庫與頁面顯示

不管是什麼語言，在資料庫中定義為 decimal 或者 int 時，內部儲存的都是標準的數字型別。

 

 

在法語環境下，頁面上顯示的效果：

頁面上顯示時，千分位分隔符是點號，而小數分隔符是逗號，和我們標準的數字格式剛好相反。

 

配置語言

在 Global.asax 中，配置法語環境：

protected void Application_BeginRequest(object sender, EventArgs e)
{
	Thread.CurrentThread.CurrentCulture = System.Globalization.CultureInfo.CreateSpecificCulture("es");
	Thread.CurrentThread.CurrentUICulture = new System.Globalization.CultureInfo("es");
}

　

配置數字輸入框

配置數字輸入框的 DotSeparator和CommaSeparator，可以在三個不同的層級配置。

Web.config中：

<FineUIPro FormDotSeparator="," FormCommaSeparator="." />

　　

在頁面上，可以設定 PageManager 的相應屬性，參考官網示例原始碼，可以在 PageBase.cs 中設定：

protected override void OnInit(EventArgs e)
{
	var pm = PageManager.Instance;
	if (pm != null)
	{
		pm.FormDotSeparator = ",";
		pm.FormCommaSeparator = ".";
	
	}
}

　　

當然，也可以直接設定 NumberBox 控制元件的相應屬性：

<f:NumberBox Label="小數" ID="NumberBox1" runat="server" Text="-12345.6789" EnableCommas="true"
    Required="true" ShowRedStar="true" DecimalPrecision="2" DotSeparator="," CommaSeparator="." />

　　

數字輸入框 - 讀取

頁面標籤：

<f:NumberBox Label="Decimal1" ID="txtDecimal1" runat="server" EnableCommas="true" />
<f:NumberBox Label="Decimal2" ID="txtDecimal2" runat="server" EnableCommas="true" />
<f:NumberBox Label="Decimal3" ID="txtDecimal3" runat="server" EnableCommas="true" />
<f:NumberBox Label="Decimal4" ID="txtDecimal4" runat="server" EnableCommas="true" NoDecimal="true"/>

 

後臺資料庫讀取省略，假設我們有一個方法可以將資料讀取到一個DataTable中，類似如下：

DataTable table = GetTableFromDB("select * from Ceshi where id='3d1980b7-b195-4212-87c4-903c5df119db'");

 

下面需要對 NumberBox 進行賦值，這裡還要再次提到一個原則：

不管頁面上顯示的格式如何，對控制元件賦值或者獲取都是標準的數字格式（也即是去除千分位，小數點用點號表示的字串）!

 

所以，我們需要將標準的數字型別轉換為字串（標準格式，忽略方言）：

NumberFormatInfo.InvariantInfo - 獲取不依賴於區域性的（固定）只讀的 System.Globalization.NumberFormatInfo 物件。

txtDecimal1.Text = ((decimal)table.Rows[0]["Decimal1"]).ToString(NumberFormatInfo.InvariantInfo);
txtDecimal2.Text = ((decimal)table.Rows[0]["Decimal2"]).ToString(NumberFormatInfo.InvariantInfo);
txtDecimal3.Text = ((decimal)table.Rows[0]["Decimal3"]).ToString(NumberFormatInfo.InvariantInfo);
txtDecimal4.Text = ((int)table.Rows[0]["Decimal4"]).ToString(NumberFormatInfo.InvariantInfo);

　　　

文字標籤 - 讀取

頁面標籤：

<f:Label Label="Decimal1" ID="lblDecimal1" runat="server" />
<f:Label Label="Decimal2" ID="lblDecimal2" runat="server" />
<f:Label Label="Decimal3" ID="lblDecimal3" runat="server" />
<f:Label Label="Decimal4" ID="lblDecimal4" runat="server" />

 

後臺直接使用 String.Format 進行格式化（新增千分位分隔符）：

lblDecimal1.Text = string.Format("{0:N2}", table.Rows[0]["Decimal1"]);
lblDecimal2.Text = string.Format("{0:N2}", table.Rows[0]["Decimal2"]);
lblDecimal3.Text = string.Format("{0:N2}", table.Rows[0]["Decimal3"]);
lblDecimal4.Text = string.Format("{0:N0}", table.Rows[0]["Decimal4"]);

　　

顯示效果：

　　

 

數字輸入框 - 儲存

儲存資料庫前，我們需要將數字輸入框的文字值轉換為數字型別：

var decimal1 = Convert.ToDecimal(txtDecimal1.Text, NumberFormatInfo.InvariantInfo);
var decimal2 = Convert.ToDecimal(txtDecimal2.Text, NumberFormatInfo.InvariantInfo);
var decimal3 = Convert.ToDecimal(txtDecimal3.Text, NumberFormatInfo.InvariantInfo);
var decimal4 = Convert.ToInt32(txtDecimal4.Text, NumberFormatInfo.InvariantInfo);

　　

和之前的程式碼類似，我們同樣需要指定 NumberFormatInfo.InvariantInfo，以便告訴轉換器以標準的格式解析數字字串。

 

表格 - 讀取

1. BoundField

由於BoundField是在後臺繫結的資料，所以可以直接指定 DataFormatString 來格式化數字，如下所示：

<f:BoundField Width="150px" DataField="Decimal1" ColumnID="Decimal1" HeaderText="Decimal1" DataFormatString="{0:N2}" />
<f:BoundField Width="150px" DataField="Decimal2" HeaderText="Decimal2" DataFormatString="{0:N2}" ColumnID="Decimal2" />
<f:BoundField Width="150px" DataField="Decimal3" HeaderText="Decimal3" DataFormatString="{0:N2}" ColumnID="Decimal3" />
<f:BoundField Width="150px" DataField="int" HeaderText="Decimal4" DataFormatString="{0:N0}" ColumnID="Decimal4" />

 

顯示效果：

　　

 

2. RenderField

RenderField可以指定 FieldType，這樣可以在客戶端格式化數字輸出：

<f:RenderField Width="150px" DataField="Decimal1" FieldType="Double" HeaderText="Decimal1" RendererFunction="renderDecimal" />
<f:RenderField Width="150px" DataField="Decimal2" FieldType="Double" HeaderText="Decimal2" RendererFunction="renderDecimal" />
<f:RenderField Width="150px" DataField="Decimal3" FieldType="Double" HeaderText="Decimal3" RendererFunction="renderDecimal" />
<f:RenderField Width="150px" DataField="int" FieldType="Int" HeaderText="Decimal4" RendererFunction="renderDecimal" />

　　

顯示效果：

<script>

	function renderDecimal2(value) {
		value += '';
		value = value.replace('.', ',');
		return F.addCommas(value, ',', '.');
	}


	function renderDecimal(value) {
		return F.addDotSeparator(value, ',', '.');
	}

</script>

　　

注：客戶端函式 F.addDotSeparator 會在 FineUIPro/Mvc/Core v6.4.0 中提供！

單元格編輯

單元格編輯必須使用RenderField，所以只能在客戶端進行格式化，頁面程式碼如下：

<f:RenderField Width="150px" ColumnID="decimal1" RendererFunction="renderDecimal" DataField="Decimal1" FieldType="Double" HeaderText="Decimal1">
	<Editor>
		<f:NumberBox EnableCommas="true" runat="server">
		</f:NumberBox>
	</Editor>
</f:RenderField>
<f:RenderField Width="150px" ColumnID="decimal2" RendererFunction="renderDecimal" DataField="Decimal2" FieldType="Double" HeaderText="Decimal2">
	<Editor>
		<f:NumberBox EnableCommas="true" runat="server">
		</f:NumberBox>
	</Editor>
</f:RenderField>
<f:RenderField Width="150px" ColumnID="decimal3" RendererFunction="renderDecimal" DataField="Decimal3" FieldType="Double" HeaderText="Decimal3">
	<Editor>
		<f:NumberBox EnableCommas="true" runat="server">
		</f:NumberBox>
	</Editor>
</f:RenderField>
<f:RenderField Width="150px" ColumnID="decimal4" RendererFunction="renderDecimal" DataField="int" FieldType="Int" HeaderText="Decimal4">
	<Editor>
		<f:NumberBox EnableCommas="true" NoDecimal="true" runat="server">
		</f:NumberBox>
	</Editor>
</f:RenderField>

　　

顯示效果：

單元格編輯時效果：

此時，在頁面上執行如下JS指令碼：

F.toJSON(F.ui.Grid1.getMergedData())

　　

得到的資料：

[{
    "index": 0,
    "values": {
        "decimal1": 123.22,
        "decimal2": 12345.6,
        "decimal3": 12.34,
        "decimal4": 123456
    },
    "status": "modified"
}, {
    "index": 1,
    "values": {
        "decimal1": 123,
        "decimal2": 123,
        "decimal3": 2312,
        "decimal4": 456
    },
    "status": "unchanged"
}, {
    "index": 2,
    "values": {
        "decimal1": 1234.56,
        "decimal2": 23456789,
        "decimal3": 0,
        "decimal4": 800600
    },
    "status": "unchanged"
}]

　

 

 三石出品，必屬精品！

相關文章