基于MVC+EasyUI的Web開發(fā)框架經(jīng)驗(yàn)總結(jié)（6）--在頁面中應(yīng)用下拉列表的處理

在很多Web界面中，我們都可以看到很多下拉列表的元素，有些是固定的，有些是動(dòng)態(tài)的；有些是字典內(nèi)容，有些是其他表里面的名稱字段；有時(shí)候引用的是外鍵ID，有時(shí)候引用的是名稱文本內(nèi)容；正確快速使用下拉列表的處理，可以提高我們程序界面的美觀性和友好型，本文主要介紹在我的Web開發(fā)框架以及相關(guān)的擴(kuò)展Web應(yīng)用中用到的一些代表性下拉列表的處理場(chǎng)景，希望給大家做個(gè)參考學(xué)習(xí)。

1、固定下拉列表的處理

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

而它們的頁面代碼也很簡(jiǎn)單，如下所示。

<select class="easyui-combobox" id="Sex" name="Sex" >
       <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);

而獲取控件的值我們就不再贅述了，一般通過JS代碼把它們統(tǒng)一處理就可以了，如下代碼所示。

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

固定列表還有一種方式就是顯示的是文本，存儲(chǔ)的是數(shù)值，如0，1這樣的方式。如我的微信框架里面，有對(duì)用戶信息修改界面里面，是否訂閱公眾號(hào)的信息，它后面存儲(chǔ)的值是數(shù)值，顯示的是文本。

界面代碼如下所示，這種存儲(chǔ)也是固定列表，不過它們顯示和后臺(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" >
			<option value="1">訂閱</option>
			<option value="0">取消</option>
		</select>&nbsp;&nbsp;&nbsp;
	</td>
</tr>

而對(duì)于這樣控件，綁定的代碼也是和上面一樣，只是綁定的內(nèi)容是數(shù)值而已。

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

而如果我們需要在View視圖里面，通過Lable控件進(jìn)行顯示這個(gè)數(shù)值為文本，那么只需要對(duì)它進(jìn)行簡(jiǎn)單處理就可以了。

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

2、動(dòng)態(tài)下拉列表的處理

剛才說到，固定列表在對(duì)于一些常規(guī)簡(jiǎn)單的選項(xiàng)尚可，但是對(duì)于需要變化或者較多選項(xiàng)的情況下，需要用到動(dòng)態(tài)的下拉列表，動(dòng)態(tà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ù)，用來返回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ù)士長",
      Value: "護(hù)士長"
    }
]

上面說明了控制器的處理邏輯和數(shù)據(jù)格式，那么視圖代碼里面，如何通過JS代碼進(jìn)行綁定動(dòng)態(tài)列表呢？

由于多次使用了綁定字典列表的操作，我們先定義一個(gè)通用的JS函數(shù)，用來減少代碼重復(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ù)的問題了，但是有時(shí)候我們可能有這樣的需求，在一個(gè)表里面需要引用另外一個(gè)表的ID，但是我們需要在界面編輯的時(shí)候，直觀一些，也就是通過名稱來代替ID的顯示，后臺(tái)存儲(chǔ)的時(shí)候，存儲(chǔ)這個(gè)控件的ID值就可以了。例如我在創(chuàng)建客戶聯(lián)系人的時(shí)候，我可能需要選擇客戶，因此需要設(shè)計(jì)一個(gè)功能按鈕，彈出一個(gè)界面供我從列表中選擇客戶，選擇好后在主界面中顯示客戶的名稱；如果已經(jīng)保存過進(jìn)行編輯的，直接顯示客戶名稱就可以了，需求效果如下所示。

 選擇客戶后，效果如下所示。

了解了上面的界面效果，具體代碼是如何實(shí)現(xiàn)的呢？

其實(shí)就是需要定義一個(gè)ID的隱藏字段用于存儲(chǔ)數(shù)據(jù)庫，一個(gè)是顯示的只讀的文本框用來顯示名稱，還有一個(gè)按鈕就可以了，部分代碼如下所示。

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

選擇客戶的時(shí)候，我們通過調(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' //此方法在彈出頁面中
			}, {
				text: '取消',
				iconCls: 'icon-cancel',
				handler: function (win) {
					win.close();
				}
			}],
			onLoad: function (win, content) {
				//window打開時(shí)調(diào)用，初始化form內(nèi)容
				if (content) {
					content.doInit(win);
				}
			}
		});
	});
}

在用戶已有數(shù)據(jù)的情況下如果打開界面我們把客戶的名稱轉(zhuǎn)義過來賦值給對(duì)應(yīng)名稱的控件就可以了，ID隱藏的控件按正常賦值就可以了，如下所示

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