Jquery+Ajax實現Select動態定資料

來源:互聯網
上載者:User
接著上次的進階查詢。下拉框中的欄位都是在前台寫好的。這對於系統的靈活性來說,是很大的一個弊端。

解決思路:

在資料庫中建立類型字典式表。將下拉框需要添加的項,在資料庫表裡中文、英文名稱對應起來。

下拉框動態綁定資料庫表中需要欄位。

<div id="bgDiv" style="display:none;"></div>                <a  class="btn-lit" href="javascript:"  onclick="bgDiv.style.display='inline';advancedQuery.style.display='';addItems()"><span>進階查詢</span></a>

在進階查詢單擊事件中,除了顯示查詢方塊外,添加下拉框綁定欄位的函數。此處為addItems().

實現代碼:

<script type="text/javascript">//動態綁定下拉框項        function addItems() {            $.ajax({                url: "addItem.ashx/GetItem",    //後台webservice裡的方法名稱                type: "post",                dataType: "json",                contentType: "application/json",                traditional: true,                success: function (data) {                    for (var i in data) {                        var jsonObj =data[i];                        var optionstring = "";                        for (var j = 0; j < jsonObj.length; j++) {                            optionstring += "<option value=\"" + jsonObj[j].ID + "\" >" + jsonObj[j].chinesename + "</option>";                        }                        $("#dpdField1").html("<option value='請選擇'>請選擇...</option> "+optionstring);                    }                },                error: function (msg) {                    alert("出錯了。");                }            });                  };           </script> 


後台代碼:

 public void ProcessRequest(HttpContext context)        {            //context.Response.ContentType = "text/plain";            //context.Response.Write("Hello World");            GetItem(context);        }        public void GetItem(HttpContext context)        {            string ReturnValue = string.Empty;            BasicInformationFacade basicInformationFacade = new BasicInformationFacade();   //執行個體化基礎資訊外觀            DataTable dt = new DataTable();            dt = basicInformationFacade.itemsQuery(); //根據查詢條件擷取結果            ReturnValue = DataTableJson(dt);            context.Response.ContentType = "text/plain";            context.Response.Write(ReturnValue);            //return ReturnValue;        }
#region dataTable轉換成Json格式        /// <summary>             /// dataTable轉換成Json格式             /// </summary>             /// <param name="dt"></param>             /// <returns></returns>             public string DataTableJson(DataTable dt)        {            StringBuilder jsonBuilder = new StringBuilder();            jsonBuilder.Append("{\"");            jsonBuilder.Append(dt.TableName.ToString());            jsonBuilder.Append("\":[");            for (int i = 0; i < dt.Rows.Count; i++)            {                jsonBuilder.Append("{");                for (int j = 0; j < dt.Columns.Count; j++)                {                    jsonBuilder.Append("\"");                    jsonBuilder.Append(dt.Columns[j].ColumnName);                    jsonBuilder.Append("\":\"");                    jsonBuilder.Append(dt.Rows[i][j].ToString());                    jsonBuilder.Append("\",");                }                jsonBuilder.Remove(jsonBuilder.Length - 1, 1);                jsonBuilder.Append("},");            }            jsonBuilder.Remove(jsonBuilder.Length - 1, 1);            jsonBuilder.Append("]");            jsonBuilder.Append("}");            return jsonBuilder.ToString();        }#endregion

利用Ajax、json給前台頁面中的select綁定資料來源。後台通過兩個函數,分別獲得資料庫表的資料,將資料轉為Json格式返回給前台。前台在接收資料後,將資料進行解析,獲得下拉框中需要綁定的欄位。在綁定時,下拉框的每一項都分別綁定一個文本、value值。文本用於顯示,供使用者選擇。value值,是使用者選擇了某個欄位,取得這個欄位的value值,進行背景查詢欄位。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.