在用到select2時，臨時抱佛腳學習了一下

標籤：

$(‘#e3‘).select2({  

    placeholder: "請輸入",  

    minimumInputLength: 1,  

    separator: ",", // 分隔字元  

    maximumSelectionSize: 5, // 限制數量  

    initSelection: function(element, callback) { // 初始化時設定預設值  

    },  

    createSearchChoice: function(term, data) { // 建立搜尋結果（使使用者可以輸入匹配值以外的其它值）  

return {  

            id: term.mid,  

            text: term.name  

        };  

    },  

    formatSelection: function(item) {  

return item.name;//注意此處的name，要和ajax返回數組的索引值一樣  

    }, // 選擇結果中的顯示  

    formatResult: function(item) {  

return item.name;//注意此處的name  

    }, // 搜尋列表中的顯示  

    ajax: {  

        url: "{:U(‘Admin/Member/getzj‘)}", // 非同步請求地址  

        dataType: "json", // 資料類型  

        data: function(term, page) { // 請求參數（GET）  

return {  

                q: term  

            };  

        },  

        results: function(data, page) {  

return data;  

        }, // 構造返回結果  

        escapeMarkup: function(m) {  

return m;  

        } // 字元轉義處理  

    }  

}); 

 

這個外掛程式是基於Select的擴充外掛程式，能夠提供更加豐富的功能和使用者體驗，它的github官網地址為:https://select2.github.io/，具體的使用案例，可以參考地址：https://select2.github.io/examples.html。

我們在整個架構裡面，用到了很多Select2控制項來處理內容的顯示，包括單選的下拉式清單（包括級聯選擇框）、複選的下拉式清單、樹形下拉式清單等方式，介面效果如下所示。

1）編輯介面下的省份、城市、所在行政區的級聯介面效果，選擇省份，會載入對應省份下的城市，選擇城市，會繼續載入城市下的行政區，從而實現多級關聯的下拉式清單效果。

 

2）編輯介面下的多項選擇下拉式清單

但我們選擇其中的內容的時候，系統自動顯示出沒有選擇的列表資料，非常直觀友好，如下所示。

 

3）樹形列表的下拉式清單

有時候，我們的一些資料可能有層次關係的，如所屬機構、上層列表等等。

 

2、Select2控制項的實際使用程式碼分析 1）基礎介面代碼及操作

使用select2控制項，一般是在常規的select控制項上，設定一下即可（設定它的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>

如果是固定列表，那麼也就是設定它的Option內容即可，如下所示。

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

一般情況下，如果允許複選多重專案，那麼設定 multiple="multiple"即可，如下代碼所示。

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

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("<option value=‘" + item.Value + "‘>&nbsp;" + item.Text + "</option>");        });    });}

這樣，綁定公用字典模組的資料，也就可以通過下面進一步封裝處理即可。

//綁定字典內容到指定的控制項function BindDictItem(ctrlName, dictTypeName) {    var url = ‘/DictData/GetDictJson?dictTypeName=‘ + encodeURI(dictTypeName);    BindSelect(ctrlName, url);}

這樣我們初始化Select2 控制項，並動態綁定對應的字典值或者其他資料，則可以通過下面初始化代碼即可實現。其中BindDictItem就是直接綁定字典內容的操作，BindSelect則是根據URL進行資料的擷取並綁定，而$("#Province").on("change", function (e) {});這樣的函數處理，就是處理選擇內容變化的聯動操作了。

        //初始化字典資訊（下拉式清單）        function InitDictItem() {            //部分賦值參考                        BindDictItem("Area","市場分區");            BindDictItem("Industry", "客戶行業");            BindDictItem("Grade","客戶層級");            BindDictItem("CustomerType", "客戶類型");            BindDictItem("Source", "客戶來源");            BindDictItem("CreditStatus", "信用等級");            BindDictItem("Stage","客戶階段");            BindDictItem("Status", "客戶狀態");            BindDictItem("Importance",  "重要層級");                             // 綁定省份、城市、行政區（聯動處理）            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控制器返回的資料，我們是返回一個JSON資料列表給前端頁面的，他們的資料格式如下所示。

[ { "Text": "", "Value": "" }, { "Text": "學術會議", "Value": "學術會議" }, { "Text": "朋友介紹", "Value": "朋友介紹" }, { "Text": "廣告媒體", "Value": "廣告媒體" } ]

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

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

控制器的實現代碼如下：

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

3）樹形列表的綁定操作

對於屬性列表，如所屬公司、所屬部門機構等有層次性的資料，它的綁定操作也是類似的，如下代碼所示。

            //綁定添加介面的公司、部門、直屬經理            BindSelect("Company_ID", "/User/GetMyCompanyDictJson?userId="[email protected]["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);            });

只是它們返回的資料，我們把它作為有縮排的顯示內容而已。

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

或者如下所示

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

綜上兩個部分，我們可以看到它們的Text的內容，是根據層次關係進行空格增加，從而實現了層次關係的顯示。

不過從這個介面效果上講，這樣的處理確實沒有EasyUI裡面，對下拉式清單樹的展示好看，也許可以利用更好的Bootstrap外掛程式進行這個樹形內容的展示。

  

4）select2控制項的賦值處理

上面介紹的方法，都是介紹select2控制項的初始化，綁定相關的資料，那麼如果初始化介面後，我們綁定編輯介面的值的時候，就需要賦值給控制項，讓它顯示真正需要顯示的項目了。

如清空控制項的方法如下所示。

            //清空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 控制項賦值，讓它顯示對應值內容的項目，那麼操作也就和上面的類似了。

                 $("#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);

如果需要級聯顯示的，那麼做法增加一個onchange的函數處理就可以了，如下級聯代碼的賦值處理如下。

                 $("#Province").select2("val", info.Province).trigger(‘change‘);//聯動                 $("#City").select2("val", info.City).trigger(‘change‘);//聯動                 $("#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);

多個清單項目資料的綁定。

我們從案例裡面可以看到，Select2支援多項值的選擇，它們儲存後會以逗號分開，如果我們需要在編輯的時候顯示儲存的多個記錄，那麼需要把字串轉換為數組列表才能進行正確綁定，如下所示。

$("#Permission").select2("val", info.Permission.split(‘,‘));

 

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

 

 

在用到select2時，臨時抱佛腳學習了一下