基於MVC4+EasyUI的Web開發框架經驗總結（6）--在頁面中應用下拉列表的處理

時間 2019-11-16

標籤基於 mvc4+easyui mvc easyui web 開發框架經驗總結頁面應用下拉列表處理欄目 HTML 简体版

原文原文鏈接

在不少Web界面中，咱們均可以看到不少下拉列表的元素，有些是固定的，有些是動態的；有些是字典內容，有些是其餘表裏面的名稱字段；有時候引用的是外鍵ID，有時候引用的是名稱文本內容；正確快速使用下拉列表的處理，能夠提升咱們程序界面的美觀性和友好型，本文主要介紹在個人Web開發框架以及相關的擴展Web應用中用到的一些表明性下拉列表的處理場景，但願給你們作個參考學習。javascript

一、固定下拉列表的處理

表明性的固定列表有人員性別的處理，通常爲男、女兩種，並且爲了方便，通常用文本直接使用，以下效果所示。html

而它們的頁面代碼也很簡單，以下所示。java

<select class="easyui-combobox" id="Sex" name="Sex" style="width:120px;">
       <option>男</option>
       <option>女</option>  
 </select>

這種方式是比較簡單，須要幾個選項就添加，不須要額外的JS代碼進行綁定處理，也不須要後臺代碼。可是這種硬編碼的方式建議少用，除非不須要擴展，只有固定幾項的狀況下。數據庫

這種方式，在EasyUI的處理方式中，comboBox的控件綁定代碼以下所示。微信

$("#Sex").combobox('setValue', info.Sex);

而獲取控件的值咱們就再也不贅述了，通常經過JS代碼把它們統一處理就能夠了，以下代碼所示。框架

var postData = $("#ffAdd").serializeArray();

固定列表還有一種方式就是顯示的是文本，存儲的是數值，如0，1這樣的方式。如個人微信框架裏面，有對用戶信息修改界面裏面，是否訂閱公衆號的信息，它後面存儲的值是數值，顯示的是文本。函數

界面代碼以下所示，這種存儲也是固定列表，不過它們顯示和後臺存儲的內容不一樣。post

                    <tr>
                        <th>
                            <label for="Subscribe">是否訂閱該公衆號：</label>
                        </th>
                        <td colspan="3">
                            <select  id="Subscribe" name="Subscribe" class="easyui-combobox" style="width:150px">
                                <option value="1">訂閱</option>
                                <option value="0">取消</option>
                            </select>&nbsp;&nbsp;&nbsp;
                        </td>
                    </tr>

而對於這樣控件，綁定的代碼也是和上面同樣，只是綁定的內容是數值而已。學習

$("#Subscribe1").combobox('setValue', info.Subscribe);

而若是咱們須要在View視圖裏面，經過Lable控件進行顯示這個數值爲文本，那麼只須要對它進行簡單處理就能夠了。ui

$("#Subscribe2").text(info.Subscribe == "1" ? "訂閱": "取消");

二、動態下拉列表的處理

剛纔說到，固定列表在對於一些常規簡單的選項尚可，可是對於須要變化或者較多選項的狀況下，須要用到動態的下拉列表，動態下拉列表有好幾種方式，一種是相似字典的綁定文本方式處理，一種是綁定外鍵引用的名稱方式等等。

下面咱們來介紹一下兩個不一樣的處理方式。

1）字典文本內容的下拉列表

在不少狀況下，咱們須要用到不少字典內容，多數狀況下是引用字典的值（通常狀況爲文本內容）進行存儲就能夠了。字典列表在不少狀況很方便，咱們能夠在後臺進行字典項的動態管理，這樣可以及時反饋到界面元素上，實現列表內容的動態展現了。

例如我在聯繫人編輯的Web界面裏面，須要使用不少字典項的內容，界面效果以下所示。

上面紅色框選的都是動態的下拉列表項目，那咱們如何動態綁定它的內容在Web界面上的呢？

首先咱們須要在字典視圖的控制器上定義一個字典函數，用來返回Json信息給界面使用的，具體後臺代碼以下所示。

        /// <summary>
        /// 根據字典類型獲取對應的字典數據，方便UI控件的綁定
        /// </summary>
        /// <param name="dictTypeName">字典類型名稱</param>
        /// <returns></returns>
        public ActionResult GetDictJson(string dictTypeName)
        {
            List<CListItem> treeList = new List<CListItem>();
            CListItem pNode = new CListItem("", "");
            treeList.Insert(0, pNode);

            Dictionary<string, string> dict = BLLFactory<DictData>.Instance.GetDictByDictType(dictTypeName);
            foreach (string key in dict.Keys)
            {
                treeList.Add(new CListItem(key, dict[key]));
            }
            return ToJsonContent(treeList);
        }

上面的CListItem是一個自定義類，包含了Text和Value兩個屬性。

上面的控制器函數，返回的內容多是下面的相似格式（Json格式）

[
    {
      Text: "",
      Value: ""
    },
    {
      Text: "教授",
      Value: "教授"
    },
    {
      Text: "護士長",
      Value: "護士長"
    }
]

上面說明了控制器的處理邏輯和數據格式，那麼視圖代碼裏面，如何經過JS代碼進行綁定動態列表呢？

因爲屢次使用了綁定字典列表的操做，咱們先定義一個通用的JS函數，用來減小代碼重複，以下所示

        function BindDictItem(control, dictTypeName) {
            $('#' + control).combobox({
                url: '/DictData/GetDictJson?dictTypeName='+ dictTypeName,
                valueField: 'Value',
                textField: 'Text'
            });
        }

而後在須要初始化界面的字典列表的時候，調用這個JS函數就能夠了，以下代碼所示。

        //初始化字典信息
        function InitDictItem() {
            BindDictItem("Titles", "職稱");
            BindDictItem("Rank", "職務");
            BindDictItem("Importance", "重要級別");
            BindDictItem("Recognition", "對公司承認程度");
            BindDictItem("InterestDemand", "客戶利益訴求");
            BindDictItem("CareFocus", "客戶關心重點");
            BindDictItem("ResponseDemand", "負責需求");
            BindDictItem("RelationShip", "與公司關係");
            BindDictItem("Nationality", "民族");
            BindDictItem("Political", "政治面貌");
            BindDictItem("JobType", "職業類型");
            BindDictItem("Eduction", "學歷");
            BindDictItem("Animal", "屬相");
            BindDictItem("Constellation", "星座");
            BindDictItem("MarriageStatus", "婚姻情況");
            BindDictItem("HealthCondition", "健康情況");
            BindDictItem("BodyType", "體型");
        }

2）綁定外鍵引用名稱

看完上面的動態列表處理，也許已經解決你大多數的問題了，可是有時候咱們可能有這樣的需求，在一個表裏面須要引用另一個表的ID，可是咱們須要在界面編輯的時候，直觀一些，也就是經過名稱來代替ID的顯示，後臺存儲的時候，存儲這個控件的ID值就能夠了。例如我在建立客戶聯繫人的時候，我可能須要選擇客戶，所以須要設計一個功能按鈕，彈出一個界面供我從列表中選擇客戶，選擇好後在主界面中顯示客戶的名稱；若是已經保存過進行編輯的，直接顯示客戶名稱就能夠了，需求效果以下所示。

選擇客戶後，效果以下所示。

瞭解了上面的界面效果，具體代碼是如何實現的呢？

其實就是須要定義一個ID的隱藏字段用於存儲數據庫，一個是顯示的只讀的文本框用來顯示名稱，還有一個按鈕就能夠了，部分代碼以下所示。

  <tr> 
          <th>
             <label for="Customer_ID">客戶名稱：</label>
           </th>
           <td colspan="3">
              <input class="easyui-validatebox" style="width:300px;background-color:peachpuff" readonly="readonly" type="text" id="Customer_Name" name="Customer_Name" data-options="required:true,validType:'length[1,50]'"/>
               <input type="hidden" style="width:300px" id="Customer_ID" name="Customer_ID" />
               <a href="javascript:void(0)" class="easyui-linkbutton" id="btnSelectCustomer" iconcls="icon-search">選擇客戶</a>
            </td>
     </tr>

選擇客戶的時候，咱們經過調用一個窗口進行客戶信息的展現，而後客戶選擇後，把主界面的內容更新一下就能夠，具體JS界面代碼以下所示。

        //綁定選擇客戶按鈕的事件
        function BindSelectCustomerEvent() {
            $("#btnSelectCustomer").click(function () {
                $.showWindow({
                    title: '選擇客戶',
                    useiframe: true,
                    width: 900,
                    height: 700,
                    content: 'url:/Customer/SelectCustomer',
                    data: { id: $('#Customer_ID'), name: $('#Customer_Name') },
                    buttons: [{
                        text: '確認',
                        iconCls: 'icon-ok',
                        handler: 'doOK' //此方法在彈出頁面中
                    }, {
                        text: '取消',
                        iconCls: 'icon-cancel',
                        handler: function (win) {
                            win.close();
                        }
                    }],
                    onLoad: function (win, content) {
                        //window打開時調用，初始化form內容
                        if (content) {
                            content.doInit(win);
                        }
                    }
                });
            });
        }

在用戶已有數據的狀況下若是打開界面咱們把客戶的名稱轉義過來賦值給對應名稱的控件就能夠了，ID隱藏的控件按正常賦值就能夠了，以下所示

                $.getJSON("/Customer/GetCustomerName?id=" + info.Customer_ID, function (result) {
                    $("#Customer_Name").val(result);
                });