[置頂]基於MVC4+EasyUI的Web開發架構經驗總結（6）在頁面中應用下拉式清單的處理(轉載)

標籤：style   blog   http   color   io   os   使用   java   ar   

[置頂]基於MVC4+EasyUI的Web開發架構經驗總結（6）在頁面中應用下拉式清單的處理

在很多Web介面中，我們都可以看到很多下拉式清單的元素，有些是固定的，有些是動態；有些是字典內容，有些是其他表裡面的名稱欄位；有時候引用的是外鍵ID，有時候引用的是名稱常值內容；正確快速使用下拉式清單的處理，可以提高我們程式介面的美觀性和友好型，本文主要介紹在我的Web開發架構以及相關的擴充Web應用中用到的一些代表性下拉式清單的處理情境，希望給大家做個參考學習。

1、固定下拉式清單的處理

代表性的固定列表有人員性別的處理，一般為男、女兩種，而且為了方便，一般用文本直接使用，如下效果所示。

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

<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這樣的方式。如我的架構裡面，有對使用者資訊修改介面裡面，是否訂閱公眾號的資訊，它後面儲存的值是數值，顯示的是文本。

介面代碼如下所示，這種儲存也是固定列表，不過它們顯示和後台儲存的內容不同。

                    <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控制項進行顯示這個數值為文本，那麼只需要對它進行簡單處理就可以了。

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

 

2、動態下拉式清單的處理

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

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

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);                });

 

原文連結本文由豆約翰部落格備份專家遠程一鍵發布

[置頂]基於MVC4+EasyUI的Web開發架構經驗總結（6）在頁面中應用下拉式清單的處理(轉載)