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

【新特性速递】当法语遇上FineUI（Bonjour）！

上个版本，我们为数字输入框增加了 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中：

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

在页面上，可以设置 PageManager 的相应属性，参考官网示例源代码，可以在 PageBase.cs 中设置：

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

当然，也可以直接设置 NumberBox 控件的相应属性：

1 2	`<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中，类似如下：

1	`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脚本：

1	`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"
}]