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

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

2、Select2控件的实在应用代码分析

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

图片 1

图片 2

 

最后来六个全体性的界面效果,供参考。

图片 3

图片 4

 图片 5

 

倘若有趣味,可以延续参照多重著作:

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

 

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

在上篇《按照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)编辑界面下的省区、城市、所在行政区的级联界面效果,采纳省份,会加载对应省份下的都会,采取城市,会延续加载城市下的行政区,从而实现多元关联的下拉列表效果。

图片 9

 

2)编辑界面下的多项采纳下拉列表

图片 10

但我们挑选其中的内容的时候,系统活动展现出从未采取的列表数据,非凡直观友好,如下所示。

图片 11

 

3)树形列表的下拉列表

有时,大家的部分数码也许有层次关系的,如所属机构、上层列表等等。

图片 12

图片 13

 

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>

相关文章