Ajax基于Metronic的Bootstrap开发框架经验总结(3)–下拉列表Select2插件的使用

在上篇《据悉Metronic的Bootstrap开发框架经验总结(2)–列表分页处理及插件JSTree的施用》介绍了数据的分页处理,使用了Bootstrap
Paginator插件,另外对树形列表,采用了JSTree插件,本篇继续介绍于编制页面被时因此到之控件Select2,这个控件可以更加助长传统的Select下拉列表控件,提供再多之效益跟再好的用户体验。

1、Select2控件介绍

以此插件是基于Select的壮大插件,能够提供更助长的功能和用户体验,它的github官网地址也:https://select2.github.io/,具体的使用案例,可以参见地址:https://select2.github.io/examples.html。

咱当满框架内,用到了累累Select2控件来拍卖内容之展示,包括单选的下拉列表(包括级联选择框)、复选的下拉列表、树形下拉列表等艺术,界面效果如下所示。

1)编辑界面下的省份、城市、所在行政区之级联界面效果,选择省份,会加载对诺省产卵的都会,选择都,会连续加载城市下的行政区,从而实现多元关联的下拉列表效果。

Ajax 1

 

2)编辑界面下的大半宗选下拉列表

Ajax 2

而是我们捎中间的情节之时,系统自动显示出从未选的列表数据,非常直观友好,如下所示。

Ajax 3

 

3)树形列表的下拉列表

突发性,我们的一对数量或许产生层次关系的,如所属机构、上层列表等等。

Ajax 4

Ajax 5

 

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="+@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);
            });

只是其返回的多寡,我们拿它们看做有缩进的显示内容而已。

[ { "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的情,是基于层次关系进展空格增加,从而实现了层次关系之展示。

Ajax 6

不过起之界面效果达到谈,这样的处理真的并未EasyUI里面,对下拉列表树的来得好看,也许得采用还好的Bootstrap插件进行这树形内容之显示。

Ajax 7  Ajax 8

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

 

大多只列表项目数目的绑定。

俺们由案例中可以看,Select2支持多项值的抉择,它们保存后会见为逗号分开,如果我们要在编制的当儿显得存储的大半个记录,那么需要将字符串转换为数组列表才能够展开科学绑定,如下所示。

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

Ajax 9

Ajax 10

 

末尾来片单整体性的界面效果,供参考。

Ajax 11

Ajax 12

 Ajax 13

 

假若起趣味,可以继承参照多重文章:

因Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的拍卖

依据Metronic的Bootstrap开发框架经验总结(2)–列表分页处理同插件JSTree的动

冲Metronic的Bootstrap开发框架经验总结(3)–下拉列表Select2插件的应用

基于Metronic的Bootstrap开发框架经验总结(4)–Bootstrap图标的领及行使 

据悉Metronic的Bootstrap开发框架经验总结(5)–Bootstrap文件及传插件File
Input的用

因Metronic的Bootstrap开发框架经验总结(6)–对话框及提示框的处理同优化

依据Metronic的Bootstrap开发框架经验总结(7)–数据的导入、导出及附件的查处理

据悉Metronic的Bootstrap开发框架经验总结(8)–框架功能一体化界面介绍

因Metronic的Bootstrap开发框架经验总结(9)–实现Web页面内容之打印预览和保存操作

 

相关文章