基于Metronic的Bootstrap開發(fā)框架經(jīng)驗(yàn)總結(jié)(3)--下拉列表Select2插件的使用

在上篇《基于Metronic的Bootstrap開發(fā)框架經(jīng)驗(yàn)總結(jié)(2)--列表分頁處理和插件JSTree的使用》介紹了數(shù)據(jù)的分頁處理予弧,使用了Bootstrap Paginator插件夏伊,另外對(duì)樹形列表,采用了JSTree插件邻辉,本篇繼續(xù)介紹在編輯頁面中常用到的控件Select2,這個(gè)控件可以更加豐富傳統(tǒng)的Select下拉列表控件熄守,提供更多的功能和更好的用戶體驗(yàn)励幼。

1、Select2控件介紹

這個(gè)插件是基于Select的擴(kuò)展插件雕什,能夠提供更加豐富的功能和用戶體驗(yàn)缠俺,它的github官網(wǎng)地址為:https://select2.github.io/,具體的使用案例贷岸,可以參考地址:https://select2.github.io/examples.html壹士。
我們?cè)谡麄€(gè)框架里面,用到了很多Select2控件來處理內(nèi)容的顯示偿警,包括單選的下拉列表(包括級(jí)聯(lián)選擇框)躏救、復(fù)選的下拉列表、樹形下拉列表等方式螟蒸,界面效果如下所示落剪。
1)編輯界面下的省份、城市尿庐、所在行政區(qū)的級(jí)聯(lián)界面效果忠怖,選擇省份,會(huì)加載對(duì)應(yīng)省份下的城市抄瑟,選擇城市凡泣,會(huì)繼續(xù)加載城市下的行政區(qū)枉疼,從而實(shí)現(xiàn)多級(jí)關(guān)聯(lián)的下拉列表效果。

2)編輯界面下的多項(xiàng)選擇下拉列表



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


3)樹形列表的下拉列表
有時(shí)候航闺,我們的一些數(shù)據(jù)可能有層次關(guān)系的,如所屬機(jī)構(gòu)猴誊、上層列表等等潦刃。



2、Select2控件的實(shí)際使用代碼分析

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">重要級(jí)別</label>
        <div class="col-md-8">
            <select id="Importance" name="Importance" class="form-control select2" placeholder="重要級(jí)別..."></select>
        </div>
    </div>
</div>
 <div class="col-md-6">
    <div class="form-group">
        <label class="control-label col-md-4">認(rèn)可程度</label>
        <div class="col-md-8">
            <select id="Recognition" name="Recognition" class="form-control select2" placeholder="認(rèn)可程度..."></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ù)選多個(gè)項(xiàng)目,那么設(shè)置 multiple="multiple"即可肾砂,如下代碼所示汛兜。

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

2)異步數(shù)據(jù)綁定操作
一般情況下,我們的select控件的數(shù)據(jù)通今,是從數(shù)據(jù)庫里面動(dòng)態(tài)加載的,因此一般是通過Ajax方式獲取數(shù)據(jù)并進(jìn)行綁定即可肛根。
基于代碼可重用性的考慮辫塌,我們編寫一個(gè)公用的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 + "'> " + item.Text + "</option>");
        });
    });
}

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

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

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

//初始化字典信息(下拉列表)
function InitDictItem() {
    //部分賦值參考            
    BindDictItem("Area","市場(chǎng)分區(qū)");
    BindDictItem("Industry", "客戶行業(yè)");
    BindDictItem("Grade","客戶級(jí)別");
    BindDictItem("CustomerType", "客戶類型");
    BindDictItem("Source", "客戶來源");
    BindDictItem("CreditStatus", "信用等級(jí)");
    BindDictItem("Stage","客戶階段");
    BindDictItem("Status", "客戶狀態(tài)");
    BindDictItem("Importance",  "重要級(jí)別");     
     
    // 綁定省份、城市呀狼、行政區(qū)(聯(lián)動(dòng)處理)
    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ù)裂允,我們是返回一個(gè)JSON數(shù)據(jù)列表給前端頁面的,他們的數(shù)據(jù)格式如下所示哥艇。

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

這樣前端頁面綁定Select2控件的時(shí)候绝编,就使用了JSON對(duì)象的屬性即可。

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

控制器的實(shí)現(xiàn)代碼如下:

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

3)樹形列表的綁定操作
對(duì)于屬性列表十饥,如所屬公司、所屬部門機(jī)構(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ù),我們把它作為有縮進(jìn)的顯示內(nèi)容而已隙赁。

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

或者如下所示

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

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

Paste_Image.png

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

Paste_Image.png

4)select2控件的賦值處理
上面介紹的方法冒黑,都是介紹select2控件的初始化田绑,綁定相關(guān)的數(shù)據(jù),那么如果初始化界面后抡爹,我們綁定編輯界面的值的時(shí)候掩驱,就需要賦值給控件,讓它顯示真正需要顯示的項(xiàng)目了冬竟。
如清空控件的方法如下所示欧穴。

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

如果對(duì)于多個(gè)控件,需要清除泵殴,則可以使用集合進(jìn)行處理

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

給Select2 控件賦值涮帘,讓它顯示對(duì)應(yīng)值內(nèi)容的項(xiàng)目,那么操作也就和上面的類似了笑诅。

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

如果需要級(jí)聯(lián)顯示的焚辅,那么做法增加一個(gè)onchange的函數(shù)處理就可以了映屋,如下級(jí)聯(lián)代碼的賦值處理如下。

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

多個(gè)列表項(xiàng)目數(shù)據(jù)的綁定同蜻。
我們從案例里面可以看到棚点,Select2支持多項(xiàng)值的選擇,它們保存后會(huì)以逗號(hào)分開湾蔓,如果我們需要在編輯的時(shí)候顯示存儲(chǔ)的多個(gè)記錄瘫析,那么需要把字符串轉(zhuǎn)換為數(shù)組列表才能進(jìn)行正確綁定,如下所示默责。

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

最后來兩個(gè)整體性的界面效果贬循,供參考。




最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末桃序,一起剝皮案震驚了整個(gè)濱河市杖虾,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌媒熊,老刑警劉巖奇适,帶你破解...
    沈念sama閱讀 211,817評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異芦鳍,居然都是意外死亡嚷往,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,329評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門柠衅,熙熙樓的掌柜王于貴愁眉苦臉地迎上來皮仁,“玉大人,你說我怎么就攤上這事菲宴〈恚” “怎么了?”我有些...
    開封第一講書人閱讀 157,354評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵喝峦,是天一觀的道長势誊。 經(jīng)常有香客問我,道長愈犹,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,498評(píng)論 1 284
  • 正文 為了忘掉前任闻丑,我火速辦了婚禮漩怎,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘嗦嗡。我一直安慰自己勋锤,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,600評(píng)論 6 386
  • 文/花漫 我一把揭開白布侥祭。 她就那樣靜靜地躺著叁执,像睡著了一般茄厘。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上谈宛,一...
    開封第一講書人閱讀 49,829評(píng)論 1 290
  • 那天次哈,我揣著相機(jī)與錄音,去河邊找鬼吆录。 笑死窑滞,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的恢筝。 我是一名探鬼主播哀卫,決...
    沈念sama閱讀 38,979評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼撬槽!你這毒婦竟也來了此改?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,722評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤侄柔,失蹤者是張志新(化名)和其女友劉穎共啃,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體勋拟,經(jīng)...
    沈念sama閱讀 44,189評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡勋磕,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,519評(píng)論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了敢靡。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片挂滓。...
    茶點(diǎn)故事閱讀 38,654評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖啸胧,靈堂內(nèi)的尸體忽然破棺而出赶站,到底是詐尸還是另有隱情,我是刑警寧澤纺念,帶...
    沈念sama閱讀 34,329評(píng)論 4 330
  • 正文 年R本政府宣布贝椿,位于F島的核電站,受9級(jí)特大地震影響陷谱,放射性物質(zhì)發(fā)生泄漏烙博。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,940評(píng)論 3 313
  • 文/蒙蒙 一烟逊、第九天 我趴在偏房一處隱蔽的房頂上張望渣窜。 院中可真熱鬧,春花似錦宪躯、人聲如沸乔宿。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,762評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽详瑞。三九已至掂林,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間坝橡,已是汗流浹背泻帮。 一陣腳步聲響...
    開封第一講書人閱讀 31,993評(píng)論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留驳庭,地道東北人刑顺。 一個(gè)月前我還...
    沈念sama閱讀 46,382評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像饲常,于是被迫代替她去往敵國和親蹲堂。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,543評(píng)論 2 349

推薦閱讀更多精彩內(nèi)容