做爲開發,你是否常常碰到下面須要轉換用戶ID成用戶名稱的狀況:javascript
惋惜你的這些業務表出於最少冗餘設計要求,只有UserId,而沒有UserName,這時你不得不破壞你一個類封裝一個表的美好想法,html
在你的查詢寫上html5
SELECT a.*,b.Name FROM OrderInfo a LEFT JOIN UserInfo b ON a.UserID=b.ID
你若是用linq的話,可能代碼更多一下:java
var query = from A in db.OrderInfo join B in db.UserInfo on A.UserId equals B.ID select new { A.UserId, .......... B.Name };
更麻煩的是,你對這個表寫的Model沒法再適用這個查詢,你不得不從新建立和維護一個新的數據ViewModel(前臺展現)與查詢對應。jquery
我在一個歷史項目中查找到上百行的LEFT JOIN UserInfo b ON a.UserID=b.ID,增長了大量新的ViewModel,並使單個表查詢的封裝類看起來十分很差維護。web
你可能須要下面這個更簡潔的方法:查詢再也不left jion,查詢到的UserId直接顯示在前臺,經過Ajax查詢用戶列表來更新成UserName。ajax
具體的步驟:sql
1.查詢用戶ID,Name數據(這裏是WebForm的.asmx查詢,MVC天然更簡單了)json
webservice: [System.Web.Script.Services.ScriptService] public class CommonAjax : System.Web.Services.WebService { public CommonAjax() { //若是使用設計的組件,請取消註釋如下行 //InitializeComponent(); } [WebMethod] public string GetUserNameList(string ids) { return new PublicUseBLL().GetNameList_Json(ids); } } BLL: 省略,調用DAL便可 DAL: public string GetNameList_Json(string ids) { StringBuilder sBuilder = new StringBuilder(); string sql = "select ID,Name FROM PublicUser where Del=0 order by ID"; if ( !string.IsNullOrEmpty(ids) ) { sql = string.Format("select ID,Name FROM PublicUser where Del=0 and ID in({0}) order by ID",ids); } var ds = DbHelperSQL.Query(sql); int rows = ds.Tables[0].Rows.Count; DataRow dr; sBuilder.Append("["); if (rows > 0) { for (int i = 0; i < rows-1; i++) { dr = ds.Tables[0].Rows[i]; sBuilder.Append(string.Format("[{0},\"{1}\"],", dr[0], dr[1])); } dr = ds.Tables[0].Rows[rows-1]; sBuilder.Append(string.Format("[{0},\"{1}\"]", dr[0], dr[1])); } sBuilder.Append("]"); return sBuilder.ToString(); }
封裝查詢和替換函數,把這個函數放在你的公共js函數文件Common.js裏:瀏覽器
function replaceUserName() { var arr = []; var rel; //獲取須要轉換的id,拼成ids
$('.re_name').each(function () { rel = $(this).attr('rel'); if (typeof rel != 'undefined' && checkInteger(rel)) { var bFind = false;//這裏固然要過濾重複了 for (var i = 0; i < arr.length; i++) { if (arr[i] == rel) { bFind = true; break; } } if (bFind == false) { arr.push(rel); } } }); if (arr.length == 0) { return false; } $.ajax({ type: "POST", contentType: "application/json", url: '/Ajax/CommonAjax.asmx/GetUserNameList', data: '{"ids":"' + arr.join(',') + '"}',//data: '{"ids":""}',// dataType: "json", async: false, success: function (res, status) { if (res.d.indexOf('[') == 0 && res.d.lastIndexOf(']') == res.d.length - 1) { var data = jQuery.parseJSON(res.d); //替換id
$('.re_name').each(function () { rel = $(this).attr('rel');
//判斷id有效性 if (typeof rel != 'undefined' && checkInteger(rel) ) { rel = parseInt(rel); for (var i = 0; i < data.length; i++) { if (data[i][0] == rel) { $(this).text(data[i][1]); break; } } } }); } else { alert(res.d); } } }); }
如今,封裝完成了。在你替換ID的頁面,顯示ID的地方須要加上替換標誌
'<td class="center re_name" rel="' + row['UserId'] + '">' + row['UserId'] + '</td>'
重點是有class: re_name 且rel的值是UserID
替換:若是你的數據展現是異步的(固然你這裏確定是一次查詢整張數據表)
$.ajax({ ........ dataType: "json", async: false, success: function (res, status) { ..... //所有數據轉html後調用 replaceUserName(); } });
若是是綁定.net控件的方式更簡單了,直接在jquery中實現
$(function() { replaceUserName(); });
只須要改動兩行代碼,你就能夠看到:
徹底沒有感受不到有替換過程。固然以上事例恰好全部ID相同,可是與代碼沒有半點關係。
更進一步,你能夠用html5的localstorage來保存數據,若是瀏覽器不支持或者數據不在裏面,再進行查詢。
很簡單,幾乎一勞永逸了吧!