基于BootStrap Metronic開發(fā)框架經(jīng)驗小結(jié)【三】下拉列表Select2插件的使用

更新時間：2016年05月12日 11:04:24 作者：伍華聰

本文主要給大家介紹在編輯頁面中常用到的控件Select2，這個控件可以更加豐富傳統(tǒng)的Select下拉列表控件，提供更多的功能和更好的用戶體驗，

在上篇基于BootStrap Metronic開發(fā)框架經(jīng)驗小結(jié)【二】列表分頁處理和插件JSTree的使用，介紹了數(shù)據(jù)的分頁處理，使用了Bootstrap Paginator插件，另外對樹形列表，采用了JSTree插件，本篇繼續(xù)介紹在編輯頁面中常用到的控件Select2，這個控件可以更加豐富傳統(tǒng)的Select下拉列表控件，提供更多的功能和更好的用戶體驗。

1、Select2控件介紹

這個插件是基于Select的擴展插件，能夠提供更加豐富的功能和用戶體驗，它的github官網(wǎng)地址為:https://select2.github.io/，具體的使用案例，可以參考地址：https://select2.github.io/examples.html。

我們在整個框架里面，用到了很多Select2控件來處理內(nèi)容的顯示，包括單選的下拉列表（包括級聯(lián)選擇框）、復(fù)選的下拉列表、樹形下拉列表等方式，界面效果如下所示。

1）編輯界面下的省份、城市、所在行政區(qū)的級聯(lián)界面效果，選擇省份，會加載對應(yīng)省份下的城市，選擇城市，會繼續(xù)加載城市下的行政區(qū)，從而實現(xiàn)多級關(guān)聯(lián)的下拉列表效果。

2）編輯界面下的多項選擇下拉列表

但我們選擇其中的內(nèi)容的時候，系統(tǒng)自動顯示出沒有選擇的列表數(shù)據(jù)，非常直觀友好，如下所示。

3）樹形列表的下拉列表

有時候，我們的一些數(shù)據(jù)可能有層次關(guān)系的，如所屬機構(gòu)、上層列表等等。

2、Select2控件的實際使用代碼分析

1）基礎(chǔ)界面代碼及操作

使用select2控件，一般是在常規(guī)的select控件上，設(shè)置一下即可（設(shè)置它的class為select2）。

<div class="col-md-6">
  <div class="form-group">
    <label class="control-label col-md-4">重要級別</label>
    <div class="col-md-8">
      <select id="Importance" name="Importance" class="form-control select2" placeholder="重要級別..."></select>
    </div>
  </div>
</div>
 <div class="col-md-6">
  <div class="form-group">
    <label class="control-label col-md-4">認可程度</label>
    <div class="col-md-8">
      <select id="Recognition" name="Recognition" class="form-control select2" placeholder="認可程度..."></select>
    </div>
  </div>
</div>

如果是固定列表，那么也就是設(shè)置它的Option內(nèi)容即可，如下所示。

<div class="col-md-6">
  <div class="form-group">
    <label class="control-label col-md-4">吸煙</label>
    <div class="col-md-8">
      <select id="Smoking" name="Smoking" type="text" class="form-control select2" placeholder="吸煙...">
        <option>吸煙</option>
        <option>不吸煙</option>
      </select>
    </div>
  </div>
</div>

簡單的select2控件初始化代碼如下所示。

$(document).ready(function() {
 $(".js-example-basic-single").select2();
});

一般情況下，如果允許復(fù)選多個項目，那么設(shè)置multiple="multiple"即可，如下代碼所示。

<select id="ResponseDemand" name="ResponseDemand" multiple="multiple" class="form-control select2"></select>

2）異步數(shù)據(jù)綁定操作

一般情況下，我們的select控件的數(shù)據(jù)，是從數(shù)據(jù)庫里面動態(tài)加載的，因此一般是通過Ajax方式獲取數(shù)據(jù)并進行綁定即可。

基于代碼可重用性的考慮，我們編寫一個公用的JS函數(shù)，用來減少綁定操作的代碼，提高代碼重用性。

//綁定字典內(nèi)容到指定的Select控件
function BindSelect(ctrlName, url) {
  var control = $('#' + ctrlName);
  //設(shè)置Select2的處理
  control.select2({
    allowClear: true,
    formatResult: formatResult,
    formatSelection: formatSelection,
    escapeMarkup: function (m) {
      return m;
    }
  });

  //綁定Ajax的內(nèi)容
  $.getJSON(url, function (data) {
    control.empty();//清空下拉框
    $.each(data, function (i, item) {
      control.append("<option value='" + item.Value + "'>&nbsp;" + item.Text + "</option>");
    });
  });
}

這樣，綁定公用字典模塊的數(shù)據(jù)，也就可以通過下面進一步封裝處理即可。

//綁定字典內(nèi)容到指定的控件
function BindDictItem(ctrlName, dictTypeName) {
  var url = '/DictData/GetDictJson?dictTypeName=' + encodeURI(dictTypeName);
  BindSelect(ctrlName, url);
}

這樣我們初始化Select2 控件，并動態(tài)綁定對應(yīng)的字典值或者其他數(shù)據(jù)，則可以通過下面初始化代碼即可實現(xiàn)。其中BindDictItem就是直接綁定字典內(nèi)容的操作，BindSelect則是根據(jù)URL進行數(shù)據(jù)的獲取并綁定，而$("#Province").on("change", function (e) {});這樣的函數(shù)處理，就是處理選擇內(nèi)容變化的聯(lián)動操作了。

 //初始化字典信息（下拉列表）
    function InitDictItem() {
      //部分賦值參考      
      BindDictItem("Area","市場分區(qū)");
      BindDictItem("Industry", "客戶行業(yè)");
      BindDictItem("Grade","客戶級別");
      BindDictItem("CustomerType", "客戶類型");
      BindDictItem("Source", "客戶來源");
      BindDictItem("CreditStatus", "信用等級");
      BindDictItem("Stage","客戶階段");
      BindDictItem("Status", "客戶狀態(tài)");
      BindDictItem("Importance", "重要級別");   
      // 綁定省份、城市、行政區(qū)（聯(lián)動處理）
      BindSelect("Province", "/Province/GetAllProvinceNameDictJson");
      $("#Province").on("change", function (e) {
        var provinceName = $("#Province").val();
        BindSelect("City", "/City/GetCitysByProvinceNameDictJson?provinceName="+ provinceName);
      });
      $("#City").on("change", function (e) {
        var cityName = $("#City").val();
        BindSelect("District", "/District/GetDistrictByCityNameDictJson?cityName="+ cityName);
      });
    }

而其中MVC控制器返回的數(shù)據(jù)，我們是返回一個JSON數(shù)據(jù)列表給前端頁面的，他們的數(shù)據(jù)格式如下所示。

[ { "Text": "", "Value": "" }, { "Text": "學(xué)術(shù)會議", "Value": "學(xué)術(shù)會議" }, { "Text": "朋友介紹", "Value": "朋友介紹" }, { "Text": "廣告媒體", "Value": "廣告媒體" } ]

這樣前端頁面綁定Select2控件的時候，就使用了JSON對象的屬性即可。

//綁定Ajax的內(nèi)容
  $.getJSON(url, function (data) {
    control.empty();//清空下拉框
    $.each(data, function (i, item) {
      control.append("<option value='" + item.Value + "'>&nbsp;" + item.Text + "</option>");
    });
  });

控制器的實現(xiàn)代碼如下：

 /// <summary>
    /// 根據(jù)字典類型獲取對應(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);
    }

3）樹形列表的綁定操作

對于屬性列表，如所屬公司、所屬部門機構(gòu)等有層次性的數(shù)據(jù)，它的綁定操作也是類似的，如下代碼所示。

 //綁定添加界面的公司、部門、直屬經(jīng)理
      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);
      });

只是它們返回的數(shù)據(jù)，我們把它作為有縮進的顯示內(nèi)容而已。

[ { "Text": "愛奇迪集團", "Value": "1" }, { "Text": " 廣州分公司", "Value": "3" }, { "Text": " 上海分公司", "Value": "4" }, { "Text": " 北京分公司", "Value": "5" } ]

或者如下所示

[ { "Text": "廣州分公司", "Value": "3" }, { "Text": "總經(jīng)辦", "Value": "6" }, { "Text": "財務(wù)部", "Value": "7" }, { "Text": "工程部", "Value": "8" }, { "Text": "產(chǎn)品研發(fā)部", "Value": "9" }, { "Text": "　　開發(fā)一組", "Value": "14" }, { "Text": "　　開發(fā)二組", "Value": "15" }, { "Text": "　　測試組", "Value": "16" }, { "Text": "市場部", "Value": "10" }, { "Text": "　　市場一部", "Value": "23" }, { "Text": "　　市場二部", "Value": "24" }, { "Text": "綜合部", "Value": "11" }, { "Text": "生產(chǎn)部", "Value": "12" }, { "Text": "人力資源部", "Value": "13" } ]

綜上兩個部分，我們可以看到它們的Text的內(nèi)容，是根據(jù)層次關(guān)系進行空格增加，從而實現(xiàn)了層次關(guān)系的顯示。

不過從這個界面效果上講，這樣的處理確實沒有EasyUI里面，對下拉列表樹的展示好看，也許可以利用更好的Bootstrap插件進行這個樹形內(nèi)容的展示。

4）select2控件的賦值處理

上面介紹的方法，都是介紹select2控件的初始化，綁定相關(guān)的數(shù)據(jù)，那么如果初始化界面后，我們綁定編輯界面的值的時候，就需要賦值給控件，讓它顯示真正需要顯示的項目了。

如清空控件的方法如下所示。

//清空Select2控件的值
      $("#PID").select2("val", "");
      $("#Company_ID").select2("val", "");
      $("#Dept_ID").select2("val", "");

如果對于多個控件，需要清除，則可以使用集合進行處理

 var select2Ctrl = ["Area","Industry","Grade","CustomerType","Source","CreditStatus","Stage","Status","Importance"];
      $.each(select2Ctrl, function (i, item) {
        var ctrl = $("#" + item);
        ctrl.select2("val", "");
      });

給Select2 控件賦值，讓它顯示對應(yīng)值內(nèi)容的項目，那么操作也就和上面的類似了。

 $("#CustomerType").select2("val", info.CustomerType);
         $("#Grade").select2("val", info.Grade);
         $("#CreditStatus").select2("val", info.CreditStatus);
         $("#Importance").select2("val", info.Importance);
         $("#IsPublic").select2("val", info.IsPublic);

如果需要級聯(lián)顯示的，那么做法增加一個onchange的函數(shù)處理就可以了，如下級聯(lián)代碼的賦值處理如下。

 $("#Province").select2("val", info.Province).trigger('change');//聯(lián)動
         $("#City").select2("val", info.City).trigger('change');//聯(lián)動
         $("#District").select2("val", info.District); 
        $("#Company_ID1").select2("val", info.Company_ID).trigger('change');
        $("#Dept_ID1").select2("val", info.Dept_ID).trigger('change');
        $("#PID1").select2("val", info.PID);

最后來兩個整體性的界面效果，供參考。