我们在整个框架里面，用到了很多Select2控件来处理内容的显示，包括单选的下拉列表（包括级联选择框）、复选的下拉列表、树形下拉列表等方式，界面效果如下所示。

1）编辑界面下的省份、城市、所在行政区的级联界面效果

，选择省份，会加载对应省份下的城市，选择城市，会继续加载城市下的行政区，从而实现多级关联的下拉列表效果。

2）编辑界面下的多项选择下拉列表

但我们选择其中的内容的时候，系统自动显示出没有选择的列表数据，非常直观友好，如下所示。

3）树形列表的下拉列表

有时候，我们的一些数据可能有层次关系的，如所属机构、上层列表等等。

2、Select2控件的实际使用代码分析

1）基础界面代码及操作

使用select2控件，一般是在常规的select控件上，设置一下即可（设置它的class为select2）。

@H_403_53@ @H_403_53@ @H_403_53@

@H_403_53@ @H_403_53@ @H_403_53@ @H_403_53@

如果是固定列表，那么也就是设置它的Option内容即可，如下所示。

吸烟 @H_403_53@ @H_403_53@ @H_403_53@ @H_403_53@

简单的select2控件初始化代码如下所示。

@H_403_53@

一般情况下，如果允许复选多个项目，那么设置multiple="multiple"即可，如下代码所示。

@H_403_53@

2）异步数据绑定操作

一般情况下，我们的select控件的数据，是从数据库里面动态加载的，因此一般是通过Ajax方式获取数据并进行绑定即可。

基于代码可重用性的考虑，我们编写一个公用的JS函数，用来减少绑定操作的代码，提高代码重用性。

内容到指定的Select控件 function BindSelect(ctrlName,url) { var control = $('#' + ctrlName); //设置Select2的处理 control.select2({ allowClear: true,formatResult: formatResult,formatSelection: formatSelection,escapeMarkup: function (m) { return m; } });

//绑定Ajax的内容
$.getJSON(url,function (data) {
control.empty();//清空下拉框
$.each(data,function (i,item) {
control.append("");
});
});
}
@H_403_53@

这样，绑定公用字典模块的数据，也就可以通过下面进一步封装处理即可。

内容到指定的控件 function BindDictItem(ctrlName,dictTypeName) { var url = '/DictData/GetDictJson?dictTypeName=' + encodeURI(dictTypeName); BindSelect(ctrlName,url); } @H_403_53@

这样我们初始化Select2 控件，并动态绑定对应的字典值或者其他数据，则可以通过下面初始化代码即可实现。其中BindDictItem就是直接绑定字典内容的操作，BindSelect则是根据URL进行数据的获取并绑定，而$("#Province").on("change",function (e) {});这样的函数处理，就是处理选择内容变化的联动操作了。

403_53@

而其中MVC控制器返回的数据，我们是返回一个JSON数据列表给前端页面的，他们的数据格式如下所示。

@H_403_53@

这样前端页面绑定Select2控件的时候，就使用了JSON对象的属性即可。

内容 $.getJSON(url,item) { control.append(""); }); }); @H_403_53@

控制器的实现代码如下：

/// 根据字典类型获取对应的字典数据，方便UI控件的绑定 /// /// 名称 /// public ActionResult GetDictJson(string dictTypeName) { List treeList = new List(); CListItem pNode = new CListItem("",""); treeList.Insert(0,pNode); Dictionary dict = BLLFactory.Instance.GetDictByDictType(dictTypeName); foreach (string key in dict.Keys) { treeList.Add(new CListItem(key,dict[key])); } return ToJsonContent(treeList); } @H_403_53@

3）树形列表的绑定操作

对于属性列表，如所属公司、所属部门机构等有层次性的数据，它的绑定操作也是类似的，如下代码所示。

添加界面的公司、部门、直属经理 BindSelect("Company_ID","/User/GetMyCompanyDictJson?userId="+@Session["UserId"]); $("#Company_ID").on("change",function (e) { var companyid = $("#Company_ID").val(); BindSelect("Dept_ID","/User/GetDeptDictJson?parentId="+ companyid); }); $("#Dept_ID").on("change",function (e) { var deptid = $("#Dept_ID").val(); BindSelect("PID","/User/GetUserDictJson?deptId="+ deptid); }); @H_403_53@

只是它们返回的数据，我们把它作为有缩进的显示内容而已。

@H_403_53@

或者如下所示

@H_403_53@

综上两个部分，我们可以看到它们的Text的内容，是根据层次关系进行空格增加，从而实现了层次关系的显示。