（转）基于MVC4+EasyUI的Web开发框架经验总结（6）--在页面中应用下拉列表的处理
http://www.cnblogs.com/wuhuacong/p/3840321.html
在很多Web界面中，我們都可以看到很多下拉列表的元素，有些是固定的，有些是動(dòng)態(tài)的；有些是字典內(nèi)容，有些是其他表里面的名稱字段；有時(shí)候引用的是外鍵ID，有時(shí)候引用的是名稱文本內(nèi)容；正確快速使用下拉列表的處理，可以提高我們程序界面的美觀性和友好型，本文主要介紹在我的Web開(kāi)發(fā)框架以及相關(guān)的擴(kuò)展Web應(yīng)用中用到的一些代表性下拉列表的處理場(chǎng)景，希望給大家做個(gè)參考學(xué)習(xí)。
1、固定下拉列表的處理
代表性的固定列表有人員性別的處理，一般為男、女兩種，而且為了方便，一般用文本直接使用，如下效果所示。
而它們的頁(yè)面代碼也很簡(jiǎn)單，如下所示。
<select class="easyui-combobox" id="Sex" name="Sex" style="width:120px;">
<option>男</option>
<option>女</option>
</select>
這種方式是比較簡(jiǎn)單，需要幾個(gè)選項(xiàng)就添加，不需要額外的JS代碼進(jìn)行綁定處理，也不需要后臺(tái)代碼。但是這種硬編碼的方式建議少用，除非不需要擴(kuò)展，只有固定幾項(xiàng)的情況下。
這種方式，在EasyUI的處理方式中，comboBox的控件綁定代碼如下所示。
$("#Sex").combobox('setValue', info.Sex);
而獲取控件的值我們就不再贅述了，一般通過(guò)JS代碼把它們統(tǒng)一處理就可以了，如下代碼所示。
var postData = $("#ffAdd").serializeArray();
固定列表還有一種方式就是顯示的是文本，存儲(chǔ)的是數(shù)值，如0，1這樣的方式。如我的微信框架里面，有對(duì)用戶信息修改界面里面，是否訂閱公眾號(hào)的信息，它后面存儲(chǔ)的值是數(shù)值，顯示的是文本。
界面代碼如下所示，這種存儲(chǔ)也是固定列表，不過(guò)它們顯示和后臺(tái)存儲(chǔ)的內(nèi)容不同。
<tr>
<th>
<label for="Subscribe">是否訂閱該公眾號(hào)：</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>
</td>
</tr>
而對(duì)于這樣控件，綁定的代碼也是和上面一樣，只是綁定的內(nèi)容是數(shù)值而已。
$("#Subscribe1").combobox('setValue', info.Subscribe);
而如果我們需要在View視圖里面，通過(guò)Lable控件進(jìn)行顯示這個(gè)數(shù)值為文本，那么只需要對(duì)它進(jìn)行簡(jiǎn)單處理就可以了。
$("#Subscribe2").text(info.Subscribe == "1" ? "訂閱": "取消");
2、動(dòng)態(tài)下拉列表的處理
剛才說(shuō)到，固定列表在對(duì)于一些常規(guī)簡(jiǎn)單的選項(xiàng)尚可，但是對(duì)于需要變化或者較多選項(xiàng)的情況下，需要用到動(dòng)態(tài)的下拉列表，動(dòng)態(tài)下拉列表有好幾種方式，一種是類似字典的綁定文本方式處理，一種是綁定外鍵引用的名稱方式等等。
下面我們來(lái)介紹一下兩個(gè)不同的處理方式。
1）字典文本內(nèi)容的下拉列表
在很多情況下，我們需要用到很多字典內(nèi)容，多數(shù)情況下是引用字典的值（一般情況為文本內(nèi)容）進(jìn)行存儲(chǔ)就可以了。字典列表在很多情況很方便，我們可以在后臺(tái)進(jìn)行字典項(xiàng)的動(dòng)態(tài)管理，這樣能夠及時(shí)反饋到界面元素上，實(shí)現(xiàn)列表內(nèi)容的動(dòng)態(tài)展示了。
例如我在聯(lián)系人編輯的Web界面里面，需要使用很多字典項(xiàng)的內(nèi)容，界面效果如下所示。
上面紅色框選的都是動(dòng)態(tài)的下拉列表項(xiàng)目，那我們?nèi)绾蝿?dòng)態(tài)綁定它的內(nèi)容在Web界面上的呢？
首先我們需要在字典視圖的控制器上定義一個(gè)字典函數(shù)，用來(lái)返回Json信息給界面使用的，具體后臺(tái)代碼如下所示。
/// <summary>
/// 根據(jù)字典類型獲取對(duì)應(yīng)的字典數(shù)據(jù)，方便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是一個(gè)自定義類，包含了Text和Value兩個(gè)屬性。
上面的控制器函數(shù)，返回的內(nèi)容可能是下面的類似格式（Json格式）
[
{
Text: "",
Value: ""
},
{
Text: "教授",
Value: "教授"
},
{
Text: "護(hù)士長(zhǎng)",
Value: "護(hù)士長(zhǎng)"
}
]
上面說(shuō)明了控制器的處理邏輯和數(shù)據(jù)格式，那么視圖代碼里面，如何通過(guò)JS代碼進(jìn)行綁定動(dòng)態(tài)列表呢？
由于多次使用了綁定字典列表的操作，我們先定義一個(gè)通用的JS函數(shù)，用來(lái)減少代碼重復(fù)，如下所示
function BindDictItem(control, dictTypeName) {
$('#' + control).combobox({
url: '/DictData/GetDictJson?dictTypeName='+ dictTypeName,
valueField: 'Value',
textField: 'Text'
});
}
然后在需要初始化界面的字典列表的時(shí)候，調(diào)用這個(gè)JS函數(shù)就可以了，如下代碼所示。
//初始化字典信息
function InitDictItem() {
BindDictItem("Titles", "職稱");
BindDictItem("Rank", "職務(wù)");
BindDictItem("Importance", "重要級(jí)別");
BindDictItem("Recognition", "對(duì)公司認(rèn)可程度");
BindDictItem("InterestDemand", "客戶利益訴求");
BindDictItem("CareFocus", "客戶關(guān)心重點(diǎn)");
BindDictItem("ResponseDemand", "負(fù)責(zé)需求");
BindDictItem("RelationShip", "與公司關(guān)系");
BindDictItem("Nationality", "民族");
BindDictItem("Political", "政治面貌");
BindDictItem("JobType", "職業(yè)類型");
BindDictItem("Eduction", "學(xué)歷");
BindDictItem("Animal", "屬相");
BindDictItem("Constellation", "星座");
BindDictItem("MarriageStatus", "婚姻狀況");
BindDictItem("HealthCondition", "健康狀況");
BindDictItem("BodyType", "體型");
}
2）綁定外鍵引用名稱
看完上面的動(dòng)態(tài)列表處理，也許已經(jīng)解決你大多數(shù)的問(wèn)題了，但是有時(shí)候我們可能有這樣的需求，在一個(gè)表里面需要引用另外一個(gè)表的ID，但是我們需要在界面編輯的時(shí)候，直觀一些，也就是通過(guò)名稱來(lái)代替ID的顯示，后臺(tái)存儲(chǔ)的時(shí)候，存儲(chǔ)這個(gè)控件的ID值就可以了。例如我在創(chuàng)建客戶聯(lián)系人的時(shí)候，我可能需要選擇客戶，因此需要設(shè)計(jì)一個(gè)功能按鈕，彈出一個(gè)界面供我從列表中選擇客戶，選擇好后在主界面中顯示客戶的名稱；如果已經(jīng)保存過(guò)進(jìn)行編輯的，直接顯示客戶名稱就可以了，需求效果如下所示。
選擇客戶后，效果如下所示。
了解了上面的界面效果，具體代碼是如何實(shí)現(xiàn)的呢？
其實(shí)就是需要定義一個(gè)ID的隱藏字段用于存儲(chǔ)數(shù)據(jù)庫(kù)，一個(gè)是顯示的只讀的文本框用來(lái)顯示名稱，還有一個(gè)按鈕就可以了，部分代碼如下所示。
<tr>
<th>
<label for="Customer_ID">客戶名稱：</label>
</th>
<td colspan="3">
<input class="easyui-validatebox" style="width:300px; line-height: 1.5 !important;"> 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>
選擇客戶的時(shí)候，我們通過(guò)調(diào)用一個(gè)窗口進(jìn)行客戶信息的展示，然后客戶選擇后，把主界面的內(nèi)容更新一下就可以，具體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: '確認(rèn)',
iconCls: 'icon-ok',
handler: 'doOK' //此方法在彈出頁(yè)面中
}, {
text: '取消',
iconCls: 'icon-cancel',
handler: function (win) {
win.close();
}
}],
onLoad: function (win, content) {
//window打開(kāi)時(shí)調(diào)用，初始化form內(nèi)容
if (content) {
content.doInit(win);
}
}
});
});
}
在用戶已有數(shù)據(jù)的情況下如果打開(kāi)界面我們把客戶的名稱轉(zhuǎn)義過(guò)來(lái)賦值給對(duì)應(yīng)名稱的控件就可以了，ID隱藏的控件按正常賦值就可以了，如下所示
$.getJSON("/Customer/GetCustomerName?id=" + info.Customer_ID, function (result) {
$("#Customer_Name").val(result);
});
總結(jié)
以上是生活随笔為你收集整理的（转）基于MVC4+EasyUI的Web开发框架经验总结（6）--在页面中应用下拉列表的处理的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 猪肉上盖的蓝章可以洗掉吗？
- 下一篇： 大啥吃啥成语大全四个字？