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

一、女神也愛玩擼碼

“在么，親。”

“在！在！有,有事么”(我真睡醒了么！垂涎了好久的女神呀！高中同學,高一向她表白,"我想找個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') {
        return false;
    }
    if ($('#' + Objkey).attr('disabled') == 'disabled') {
        return false;
    }
    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') {
            return false;
        }
        if ($('#' + Objkey).attr('disabled') == 'disabled') {
            return false;
        }
        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地址：

http://www.learun.cn  力軟官網

http://www.learun.cn:8080  在線demo

 

---

---