据悉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)编辑界面下的省区、城市、所在行政区的级联界面效果,选择省份,会加载对应省份下的都市,采纳城市,会一连加载城市下的行政区,从而达成多元关联的下拉列表效果。

图片 1

 

2)编辑界面下的多项选用下拉列表

图片 2

但大家挑选其中的内容的时候,系统活动显示出从未拔取的列表数据,非凡直观友好,如下所示。

图片 3

 

3)树形列表的下拉列表

偶尔,大家的一对数码或者有层次关系的,如所属机构、上层列表等等。

图片 4

图片 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的情节,是基于层次关系展开空格伸张,从而完成了层次关系的突显。

图片 6

只是从这几个界面效果上讲,这样的拍卖真的并未EasyUI里面,对下拉列表树的显得美观,也许可以动用更好的Bootstrap插件进行那些树形内容的突显。

图片 7  图片 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(','));

图片 9

图片 10

 

说到底来三个全体性的界面效果,供参考。

图片 11

图片 12

 图片 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页面内容的打印预览和封存操作

 

相关文章