大濕教我寫程序(3)之自動補全（屌絲沒有春天）篇

安若婧年 2015-06-13

展開全文

一、女神也愛玩擼碼

“在么,，親?！?/p>

“在,！在！有,有事么”(我真睡醒了么,！垂涎了好久的女神呀,！高中同學,高一向她表白,"我想找個170以上的"，高二等我長到170了“我想找個175的”,，高三下血本買了雙內(nèi)增高“我喜歡178以上的,，有安全感”）

三分鐘后....

"沒事也可找我的."擦，我TM怎么這么不爭氣,，不是發(fā)過誓等她主動跟我講話的時候就送她一個字:滾!

"有個網(wǎng)頁不會做,你可不可以幫人家弄一下呀."

"弄,一定給你弄得妥妥的."

"壞死了,需求我離線發(fā)給你了,這個就靠你了啊."

"恩,靠我,靠我就對了"

QQ頭像又黑掉了...

需求還好嘛.就是寫一個采購單的錄入界面而已.

二十分鐘后收工,，離線發(fā)送。

"親,你好快呀,我先看看有沒有問題哈,有問題還要麻煩你哦"

二,、重濕AV之旅（此AV非彼AV詳情請見上一篇博客《大濕教我寫程序(2)之走向AV之路》）

"親,還有兩個小問題耶,采購單錄入界面的表頭上的供應商要可以自動補全,自動補全用戶體驗會好很多,，客戶會感覺很人性化。那個東東我把要求用標出來的你看看哈,可能有點難哦,。"

"這東西對我來說就不叫個事兒,包在我身上."

這東西以前好像用過,自動補全的,ajaxcontroltoolkit,里面有CascadingDropDown控件.

引用一下ajaxcontroltoolkit,拉一個CascadingDropDown出來,關(guān)聯(lián)一下文本框.然后寫一個webservice,里面提供一個方法給它調(diào)用,。OK，解決了,。

看一下好像不對,，女神要求的下拉框里有兩列，一列是編碼,，一列是名稱,。這個只能顯示一列。達不到要求呀，查了一遍屬性沒辦法,。

“大雄”

“大濕”

“死了啊”

“網(wǎng)速有點慢,，我把快播的端口號限一下啊?！?/p>

“搞什么呀,，又有什么問題了，我這剛準備陶冶一下情操你就,。,。?！?/p>

“恩,，需求你看下，這個下拉框怎么搞,?！?/p>

“教學視頻看了這么多AV技術(shù)還是沒學到家呀,典型的AV技術(shù)應用嘛?！?/p>

"AV技術(shù)我知道呀,用ajax去visit后臺數(shù)據(jù)我知道怎么去抓,。關(guān)鍵是怎么在前臺展現(xiàn)呢？"

“蒼老師用外語教的每一句話你都記得那么清楚,，我上周剛教你的動態(tài)加載菜單(詳情請見《大濕教我寫.net通用權(quán)限框架(1)之菜單導航篇》)不就是講的怎么動態(tài)構(gòu)造html么,？

前端說穿了其實很簡單，不管多絢麗的界面都還是由那些最基本的html元素拼起來的,?！?/p>

“好啦，講半天還是得自己寫,，滾吧滾吧”

經(jīng)他這么一說其實我心里也已經(jīng)有了大致思路,。

1、從后臺把數(shù)據(jù)抓取出來

根據(jù)前臺傳過來的條件返回10條記錄供界面顯示

  /// <summary>        /// 自動補全(顯示10行)        /// </summary>        /// <param name="where">條件</param>        /// <param name="param">參數(shù)化</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,、動態(tài)拼接要顯示的內(nèi)容

確實像大濕所有的那樣,這個下拉自動填充框確實是由表格和字符組成,。

在上一篇博文里已經(jīng)講了ajax如何調(diào)用后臺方法，這里就不再重復,。

抓取到供應商數(shù)據(jù)后進行一次遍歷循環(huán)地拼接<tr>

..............

</tr>

拼接好了以后就放入到p中根據(jù)Supplier_Name這個控件的位置加載出來,。

然后選定了內(nèi)容的時候再將選中的內(nèi)容寫入Supplier_Name控件中

Supplier_Name失去焦點時隱藏掉p.

//供應商自動補全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>";            }            //點擊事件回調(diào)            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];            });        });    }    //上，下鍵盤回調(diào)    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') {        return false;    }    if ($('#' + Objkey).attr('disabled') == 'disabled') {        return false;    }    IndetableRow_autocomplete = 0;    scrollTopheight = 0;    var X = $("#" + Objkey).offset().top;    var Y = $("#" + Objkey).offset().left;    $("#p_gridshow").html("");    if ($("#p_gridshow").attr("id") == undefined) {        $('body').append('<p id="p_gridshow" style="overflow: auto;z-index: 1000;border: 1px solid #A8A8A8;width:' + width + ';height:' + height + ';position: absolute; background-color: #fff; display: none;"></p>');    } else {        $("#p_gridshow").height(height);        $("#p_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 + ';">沒有找到您要的相關(guān)數(shù)據(jù),！</td></tr></tbody>';    }    sbhtml += '</table>';    $("#p_gridshow").html(sbhtml);    $("#p_gridshow").css("left", Y).css("top", X + 23).show();    if (data != "") {        $("#p_gridshow").find('tbody tr').each(function (r) {            if (r == 0) {                $(this).addClass('selected');            }        });    }    $("#p_gridshow").find('tbody tr').click(function () {        var value = "";        $(this).find('td').each(function (i) {            value += $(this).text() + "≌";        });        if ($('#' + Objkey).attr('readonly') == 'readonly') {            return false;        }        if ($('#' + Objkey).attr('disabled') == 'disabled') {            return false;        }        callBack(value);        $("#p_gridshow").hide();    });    $("#p_gridshow").find('tbody tr').hover(function () {        $(this).addClass("selected");    }, function () {        $(this).removeClass("selected");    });    //任意鍵關(guān)閉    document.onclick = function (e) {        var e = e ? e : window.event;        var tar = e.srcElement || e.target;        if (tar.id != 'p_gridshow') {            if ($(tar).attr("id") == 'p_gridshow' || $(tar).attr("id") == Objkey) {                $("#p_gridshow").show();            } else {                $("#p_gridshow").hide();            }        }    }}

寫完了我都不敢相信,，我現(xiàn)在竟然能寫出這么一大段JS代碼了，這就是女神的力量呀,。

那妹子太粗心,供應商需要自動補全,采購員也需要自動補全的,那就一并寫了吧.
這里以JS代碼的形式實現(xiàn)功能有助于大家理解原理,，其實這類公用的代碼完全可以封裝成控件,，就不用看這一大砣惡心的東西了。

運行一下看,。,。。

沒道理呀還是沒有自動補全,。

“大雄,，顯示不出來呀！”

“我擦,，函數(shù)都寫好了,，你沒有去調(diào)用它，怎么會顯示,。就像你泡妹子一樣,，有了邪惡的念頭和方法，但是對具體的對象去使用,?？隙ú粫惺裁词斋@。那是YY”

好吧,，我再改

//初始化$(function () {    presize_From(50);    SupplierAutocomplete();    SalesmanAutocomplete();})

再次運行

搞定,編號和名稱都可以帶出來

再次發(fā)送過去.

“大雄,，我越寫js就越發(fā)現(xiàn)js跟C#其實很像，我們這里的初始化不就相當于C#里的Page_Load么,，一進入頁面先執(zhí)行這里面的東西?！?br>“是的,，寫到后面你會發(fā)現(xiàn)幾乎所有的語言都是相通的。就像所有的女人都一樣,，都可以暖背窩,、生娃、搜你私房錢,?！?/p>

三、屌絲沒有春天

"親,忘了跟你講,下面表格里的物料名稱也要下拉填充,。"

“這人,，話都不會一次講清楚，VS都關(guān)了,，這不耍我么,？”

“2B了吧，這明顯調(diào)戲你嘛,，太不上道了,?！?/p>

“也是啊，雖然窮點,，但是我長得帥呀,，雖然帥不能拿去ATM機當卡刷，看著也舒服呀,，專治各種內(nèi)分泌失調(diào),、各類婦科疑難雜癥。有眼光,?！?/p>

“擦，你還當真,?！?/p>

“不跟你說了，我要用心為女神服務,?！?/p>

原理都一樣，抓取不同的數(shù)據(jù)而已,。5分鐘后搞定,。

再順手幫她把導航頁也改一下風格,服務就要做全套嘛，誰讓我是服務系的,。