一、女神也愛玩擼碼
“在麼，親。”
“在！在！有,有事麼”(我真睡醒了麼！垂涎了好久的女神呀！高中同學,高一向她表白,"我想找個170以上的"，高二等我長到170了“我想找個175的”，高三下血本買了雙內增高“我喜歡178以上的，有安全感”）
三分鐘後....
"沒事也可找我的."擦，我TM怎麼這麼不爭氣，不是發過誓等她主動跟我講話的時候就送她一個字:滾!
"有個網頁不會做,你可不可以幫人家弄一下呀."
"弄,一定給你弄得妥妥的."
"壞死了,需求我離線發給你了,這個就靠你了啊."
"恩,靠我,靠我就對了"
QQ頭像又黑掉了...
需求還好嘛.就是寫一個採購單的錄入界面而已.
二十分鐘後收工，離線發送。
"親,你好快呀,我先看看有沒有問題哈,有問題還要麻煩你哦"
二、重溼AV之旅（此AV非彼AV詳情請見上一篇博客《大溼教我寫程序(2)之走向AV之路》）
"親,還有兩個小問題耶,採購單錄入界面的表頭上的供應商要可以自動補全,自動補全用戶體驗會好很多，客戶會感覺很人性化。那個東東我把要求用標出來的你看看哈,可能有點難哦。"
"這東西對我來說就不叫個事兒,包在我身上."
這東西以前好像用過,自動補全的,ajaxcontroltoolkit,裏面有CascadingDropDown控件.
引用一下ajaxcontroltoolkit,拉一個CascadingDropDown出來,關聯一下文本框.然後寫一個webservice,裏面提供一個方法給它調用。OK，解決了。
看一下好像不對，女神要求的下拉框裏有兩列，一列是編碼，一列是名稱。這個只能顯示一列。達不到要求呀，查了一遍屬性沒辦法。
“大雄”
“大溼”
“死了啊”
“網速有點慢，我把快播的端口號限一下啊。”
“搞什麼呀，又有什麼問題了，我這剛準備陶冶一下情操你就。。。”
“恩，需求你看下，這個下拉框怎麼搞。”
“教學視頻看了這麼多AV技術還是沒學到家呀,典型的AV技術應用嘛。”
"AV技術我知道呀,用ajax去visit後臺數據我知道怎麼去抓。關鍵是怎麼在前臺展現呢？"
“蒼老師用外語教的每一句話你都記得那麼清楚，我上週剛教你的動態加載菜單(詳情請見《大溼教我寫.net通用權限框架(1)之菜單導航篇》)不就是講的怎麼動態構造html麼？
前端說穿了其實很簡單，不管多絢麗的界面都還是由那些最基本的html元素拼起來的。”
“好啦，講半天還是得自己寫，滾吧滾吧”
經他這麼一說其實我心裏也已經有了大致思路。
1、從後臺把數據抓取出來
根據前臺傳過來的條件返回10條記錄供界面顯示
///<summary>/// 自動補全(顯示10行) ///</summary>///<param name="where">條件</param>///<param name="param">參數化</param>///<returns></returns>public DataTable autocomplete(StringBuilder where, SqlParam[] param) { StringBuilder strSql = new StringBuilder(); strSql.Append("SELECT TOP 10 Supplier_ID,Code,ShortName,ValueAddRate FROM Base_Supplier WHERE 1=1"); strSql.Append("AND DeleteMark =0 AND IsVisible = 0"); strSql.Append(where); strSql.Append(" ORDER BY CreateDate"); return DataFactory.SqlDataBase().GetDataTableBySQL(strSql, param); }
2、動態拼接要顯示的內容
確實像大溼所有的那樣,這個下拉自動填充框確實是由表格和字符組成。
在上一篇博文裏已經講了ajax如何調用後臺方法，這裏就不再重複。
抓取到供應商數據後進行一次遍歷循環地拼接<tr>
<td>內容</td>
..............
</tr>
拼接好了以後就放入到div中根據Supplier_Name這個控件的位置加載出來。
然後選定了內容的時候再將選中的內容寫入Supplier_Name控件中
Supplier_Name失去焦點時隱藏掉div.
//供應商自動補全function SupplierAutocomplete() { $("#Supplier_Name").bind("keyup", function (e) { if (e.which != 13 && e.which != 40 && e.which != 38) { var parm = "action=autocomplete&search=" + escape($(this).val()); Load_Supplier(parm); } }).focus(function () { var parm = "action=autocomplete&search=" + escape($(this).val()); Load_Supplier(parm); $(this).select(); }); function Load_Supplier(parm) { getAjax('../../WMSBase/SysSupplier/Supplier_List.aspx', parm, function (data) { var json = eval("(" + data + ")"); var html = ""; for (var i = 0; i < json.JSON.length; i++) { var list = json.JSON[i]; html += "<tr>"; html += '<td style="display: none;">' + list.SUPPLIER_ID + '</td>'; html += '<td style="width: 100px;">' + list.CODE + '</td>'; html += '<td style="width: 200px;">' + list.SHORTNAME + '</td>'; html += '<td style="display: none;">' + list.VALUEADDRATE + '</td>'; html += "</tr>"; } //點擊事件回調 autocomplete("Supplier_Name", "300px", "300px", html, function (r) { var array = new Array(); array = r.split('≌'); $("#Supplier_ID").val(array[0]); $("#Supplier_Name").val(array[2]); VALUEADDRATE = array[3]; }); }); } //上，下鍵盤迴調 autocompletekeydown("Supplier_Name", function (r) { var array = new Array(); array = r.split('≌'); $("#Supplier_ID").val(array[0]); $("#Supplier_Name").val(array[2]); VALUEADDRATE = array[3]; });}
//自動補全表格var IndetableRow_autocomplete = 0;var scrollTopheight = 0;function autocomplete(Objkey, width, height, data, callBack) { if ($('#' + Objkey).attr('readonly') == 'readonly') { returnfalse; } if ($('#' + Objkey).attr('disabled') == 'disabled') { returnfalse; } IndetableRow_autocomplete = 0; scrollTopheight = 0; var X = $("#" + Objkey).offset().top; var Y = $("#" + Objkey).offset().left; $("#div_gridshow").html(""); if ($("#div_gridshow").attr("id") == undefined) { $('body').append('<div id="div_gridshow" style="overflow: auto;z-index: 1000;border: 1px solid #A8A8A8;width:' + width + ';height:' + height + ';position: absolute; background-color: #fff; display: none;"></div>'); } else { $("#div_gridshow").height(height); $("#div_gridshow").width(width); } var sbhtml = '<table class="tableobj">'; if (data != "") { sbhtml += '<tbody>' + data + '</tbody>'; } else { sbhtml += '<tbody><tr><td style="color:red;text-align:center;width:' + width + ';">沒有找到您要的相關數據！</td></tr></tbody>'; } sbhtml += '</table>'; $("#div_gridshow").html(sbhtml); $("#div_gridshow").css("left", Y).css("top", X + 23).show(); if (data != "") { $("#div_gridshow").find('tbody tr').each(function (r) { if (r == 0) { $(this).addClass('selected'); } }); } $("#div_gridshow").find('tbody tr').click(function () { var value = ""; $(this).find('td').each(function (i) { value += $(this).text() + "≌"; }); if ($('#' + Objkey).attr('readonly') == 'readonly') { returnfalse; } if ($('#' + Objkey).attr('disabled') == 'disabled') { returnfalse; } callBack(value); $("#div_gridshow").hide(); }); $("#div_gridshow").find('tbody tr').hover(function () { $(this).addClass("selected"); }, function () { $(this).removeClass("selected"); }); //任意鍵關閉 document.onclick = function (e) { var e = e ? e : window.event; var tar = e.srcElement || e.target; if (tar.id != 'div_gridshow') { if ($(tar).attr("id") == 'div_gridshow' || $(tar).attr("id") == Objkey) { $("#div_gridshow").show(); } else { $("#div_gridshow").hide(); } } }}
寫完了我都不敢相信，我現在竟然能寫出這麼一大段JS代碼了，這就是女神的力量呀。
那妹子太粗心,供應商需要自動補全,採購員也需要自動補全的,那就一併寫了吧.
這裏以JS代碼的形式實現功能有助於大家理解原理，其實這類公用的代碼完全可以封裝成控件，就不用看這一大砣噁心的東西了。
運行一下看。。。
沒道理呀還是沒有自動補全。
“大雄，顯示不出來呀！”
“我擦，函數都寫好了，你沒有去調用它，怎麼會顯示。就像你泡妹子一樣，有了邪惡的念頭和方法，但是對具體的對象去使用。肯定不會有什麼收穫。那是YY”
好吧，我再改
//初始化$(function () { divresize_From(50); SupplierAutocomplete(); SalesmanAutocomplete();})
再次運行
搞定,編號和名稱都可以帶出來
再次發送過去.
“大雄，我越寫js就越發現js跟C#其實很像，我們這裏的初始化不就相當於C#裏的Page_Load麼，一進入頁面先執行這裏面的東西。”
“是的，寫到後面你會發現幾乎所有的語言都是相通的。就像所有的女人都一樣，都可以暖背窩、生娃、搜你私房錢。”
三、屌絲沒有春天
"親,忘了跟你講,下面表格裏的物料名稱也要下拉填充。"
“這人，話都不會一次講清楚，VS都關了，這不耍我麼？”
“2B了吧，這明顯調戲你嘛，太不上道了。”
“也是啊，雖然窮點，但是我長得帥呀，雖然帥不能拿去ATM機當卡刷，看着也舒服呀，專治各種內分泌失調、各類婦科疑難雜症。有眼光。”
“擦，你還當真。”
“不跟你說了，我要用心爲女神服務。”
原理都一樣，抓取不同的數據而已。5分鐘後搞定。
再順手幫她把導航頁也改一下風格,服務就要做全套嘛，誰讓我是服務系的。
“親，全部弄好了，你看看都可以不。”
三分鐘後...
“簡直屌爆天了，要的就是這效果，我老婆洗澡去了，我替她謝過你了，兄弟！”
擦！誰TM說屌絲也有春天。。。硬盤中的女神纔是屌絲的春天。
謹以此文獻給像我一樣的菜鳥。
附demo地址：