当产品发布给客户使用时,客户总会有这样要求“我们需要所有的数据,都要三位用逗号隔开”。这样的要求一点也不过分,因为当数字达到10万以上时,真心不能一眼看出这个数据是多少。
所以我们需要一个友好的数字显示方式,我们需要做
一,需要将普通的数字转换为三位表示
1>我们需要在所有的列表中的数据;
2>文本框中的数据都要用三位表示;
3>在前台,输入文本框的值时,自动转换为三位一节的显示方式;
二, 需要将三位显示的数据转换为普通的无逗号的数据(因为,如我们需要根据现有的文本框数值去计算)。
1>在后台将三位显示的数字转换为无逗号的数字;
2>在前台将三位显示的数字转换为无逗号的数字;
一,需要将普通的数字转换为三位表示
1>我们需要在所有的列表中的数据;
GridView:在需要的列上加上DataFormatString="{0:N}"
Repeater:<%# string.Format("{0:N}",Eval("expense_amount")) %>
2>文本框中的数据都要用三位表示;
下面的方法需要放在一个类型转换的公共类中(在项目中最好有一个类型转换类,因为从数据库检索出来的数据,你无法确定它是否有 值)。其实只将double转换为三位一节表示只需要一句表示: string.Format("{0:N}", doubleValue),但是很多情况都是从数据库,所以加了很多的判断;
/// <summary>
/// 将数字型的字符串,转换为格式化字符串
/// </summary>
/// <param name="strValue">要转换的字符串</param>
/// <returns>格式化后的字符串</returns>
public static string DoubleStrToFormat(string strValue)
{
return string.Format("{0:N}", StrToDouble(strValue));
}
/// <summary>
/// string型转换为double型
/// </summary>
/// <param name="strValue">要转换的字符串</param>
/// <returns>转换后的int类型结果</returns>
public static double StrToDouble(string strValue)
{
if ((strValue == null))
return 0;
return StrToDouble(strValue.ToString(), 0);
}
/// <summary>
/// string型转换为double型
/// </summary>
/// <param name="strValue">要转换的字符串</param>
/// <param name="defValue">缺省值</param>
/// <returns>转换后的int类型结果</returns>
public static double StrToDouble(string strValue, double defValue)
{
if (strValue == null)
return defValue;
double intValue = defValue;
if (strValue != null)
{
bool IsFloat = Regex.IsMatch(strValue, @"^([-]|[0-9])[0-9]*(\.\w*)?$");
if (IsFloat)
double.TryParse(strValue, out intValue);
}
return intValue;
}
3>在前台,输入文本框的值时,自动转换为三位一节的显示方式,以下JS可以放在一个公共的文件中;
//当文本框值变化时,格式化数字
$("input.formatNum").live("keyup", function() {
var objThis = $(this);
var orginLength = objThis.val().length; //原来的字符长度
var carePos = getCursortPosition(objThis[0]);
var ret = formatNumber($.trim(objThis.val()), 2);
objThis.val(ret);
var newLength = objThis.val().length; //新的字符长度
if (orginLength - newLength > 0) {//在删除数据时,如果格式化后少一个逗号,将光标减1
carePos--;
}
if (newLength - orginLength > 0) {//在输入数据时,如果格式化后加入新的逗号,将光标加1
carePos++;
}
setCaretPosition(objThis[0], carePos);
});
//将数字转换为三位表示(此方法来源于pcajax博客园http://www.cnblogs.com/pcajax/archive/2011/03/07/1973369.html)
function formatNumber(s, n) {
if (s == "" || s == undefined || s == null) {
return "";
}
n = n > 0 && n <= 20 ? n : 2;
s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
var l = s.split(".")[0].split("").reverse(),
r = s.split(".")[1];
t = "";
for (i = 0; i < l.length; i++) {
t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
}
return t.split("").reverse().join("") + "." + r;
}
//获取光标位置函数(此方法来源于网上,找不到原作者,抱歉了)
function getCursortPosition(ctrl) {
var CaretPos = 0; // IE Support
if (document.selection) {
ctrl.focus();
var Sel = document.selection.createRange();
Sel.moveStart('character', -ctrl.value.length);
CaretPos = Sel.text.length;
}
// Firefox support
else if (ctrl.selectionStart || ctrl.selectionStart == '0')
CaretPos = ctrl.selectionStart;
return (CaretPos);
}
//设置光标位置函数(此方法来源于网上,找不到原作者,抱歉了)
function setCaretPosition(ctrl, pos) {
if (ctrl.setSelectionRange) {
ctrl.focus();
ctrl.setSelectionRange(pos, pos);
}
else if (ctrl.createTextRange) {
var range = ctrl.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}
二, 需要将三位显示的数据转换为普通的无逗号的数据(因为,如我们需要根据现有的文本框数值去计算)。
1>在后台将三位显示的数字转换为无逗号的数字;
/// <summary>
/// 去掉字符串中的逗号,并转换为double类型
/// </summary>
/// <param name="strValue">要转换的字符串</param>
/// <returns></returns>
public static double FormatStrToDouble(string strValue)
{
if ((strValue == null))
return 0;
return StrToDouble(strValue.Replace(",",""), 0);
}
调用的其它方法,参考(一,1>)中的代码
2>在前台将三位显示的数字转换为无逗号的数字;
将下面的js放在公共的js文件中
String.prototype.ReplaceComma = function() {
return this.replace(",", "")*1;
}
eg:var ret="123,222.21".ReplaceComma();
最后,本来想做个demo,但VS挂了,重装中,过段时间再把demo附上了。