當產品發布給客戶使用時,客戶總會有這樣要求“我們需要所有的數據,都要三位用逗號隔開”。這樣的要求一點也不過分,因為當數字達到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附上了。