基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用


Posted in Javascript onMay 12, 2016

在上篇基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用,介绍了数据的分页处理,使用了Bootstrap Paginator插件,另外对树形列表,采用了JSTree插件,本篇继续介绍在编辑页面中常用到的控件Select2,这个控件可以更加丰富传统的Select下拉列表控件,提供更多的功能和更好的用户体验。

1、Select2控件介绍

这个插件是基于Select的扩展插件,能够提供更加丰富的功能和用户体验,它的github官网地址为:https://select2.github.io/,具体的使用案例,可以参考地址:https://select2.github.io/examples.html。

我们在整个框架里面,用到了很多Select2控件来处理内容的显示,包括单选的下拉列表(包括级联选择框)、复选的下拉列表、树形下拉列表等方式,界面效果如下所示。

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

基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用

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

基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用

但我们选择其中的内容的时候,系统自动显示出没有选择的列表数据,非常直观友好,如下所示。

基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用

3)树形列表的下拉列表

有时候,我们的一些数据可能有层次关系的,如所属机构、上层列表等等。

基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用

基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用

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 + "'> " + 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 + "'> " + 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的内容,是根据层次关系进行空格增加,从而实现了层次关系的显示。

基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用

不过从这个界面效果上讲,这样的处理确实没有EasyUI里面,对下拉列表树的展示好看,也许可以利用更好的Bootstrap插件进行这个树形内容的展示。

基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用基于BootStrap Metronic开发框架经验小结【三】下拉列表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).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);

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

基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用

基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用

基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用

以上所述是小编给大家介绍的基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用的相关内容,希望对大家有所帮助,如果大家想了解更多资讯敬请关注三水点靠木网站!

Javascript 相关文章推荐
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
Oct 23 Javascript
jQuery Flash/MP3/Video多媒体插件
Jan 18 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
Sep 05 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
Mar 04 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
May 07 Javascript
利用div+jquery自定义滚动条样式的2种方法
Jul 18 Javascript
jquery 实现上下滚动效果示例代码
Aug 09 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
Sep 12 Javascript
JavaScrip数组删除特定元素的几种方法总结
Sep 06 Javascript
JS插件clipboard.js实现一键复制粘贴功能
Dec 04 Javascript
vue 中Virtual Dom被创建的方法
Apr 15 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
Sep 21 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
May 12 #Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
May 12 #Javascript
去除字符串左右两边的空格(实现代码)
May 12 #Javascript
20分钟轻松创建自己的Bootstrap站点
May 12 #Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
May 12 #Javascript
设置点击文本框或图片弹出日历控件的实现代码
May 12 #Javascript
Bootstrap3制作图片轮播效果
May 12 #Javascript
You might like
php mssql 日期出现中文字符的解决方法
2009/03/10 PHP
PHP下通过exec获得计算机的唯一标识[CPU,网卡 MAC地址]
2011/06/09 PHP
PHP-Java-Bridge使用笔记
2014/09/22 PHP
PHP将二维数组某一个字段相同的数组合并起来的方法
2016/02/26 PHP
jquery URL参数判断,确定菜单样式
2010/05/31 Javascript
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
自己封装的javascript事件队列函数版
2014/06/12 Javascript
js和jquery如何获取图片真实的宽度和高度
2014/09/28 Javascript
JQuery表单验证插件EasyValidator用法分析
2014/11/15 Javascript
javascript数组遍历for与for in区别详解
2014/12/04 Javascript
浅析JS运动
2015/12/28 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
2016/04/15 Javascript
js编写当天简单日历效果【实现代码】
2016/05/03 Javascript
BootStrap Validator使用注意事项(必看篇)
2016/09/28 Javascript
JS弹出窗口的运用与技巧大全
2016/11/01 Javascript
Vue Element使用icon图标教程详解(第三方)
2018/02/07 Javascript
QRCode.js二维码生成并能长按识别
2018/10/16 Javascript
Vue.js中的组件系统
2019/05/30 Javascript
Ant Design Pro 下实现文件下载的实现代码
2019/12/03 Javascript
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
python根据日期返回星期几的方法
2015/07/06 Python
简单谈谈Python中的json与pickle
2017/07/19 Python
python中使用xlrd读excel使用xlwt写excel的实例代码
2018/01/31 Python
Python 创建空的list,以及append用法讲解
2018/05/04 Python
python pexpect ssh 远程登录服务器的方法
2019/02/14 Python
python输出数学符号实例
2020/05/11 Python
Python Tkinter图形工具使用方法及实例解析
2020/06/15 Python
pandas 数据类型转换的实现
2020/12/29 Python
CSS3实现多背景模拟动态边框的效果
2016/11/08 HTML / CSS
澳大利亚领先的在线美容商店:Facial Co
2017/10/22 全球购物
德国价格合理的品牌商品购物网站:averdo
2019/03/21 全球购物
高中运动会广播稿
2014/01/21 职场文书
30年同学聚会邀请函
2014/01/25 职场文书
俄罗斯商务邀请函
2014/01/26 职场文书
优化经济发展环境工作总结
2015/08/11 职场文书
Mysql 一主多从的部署
2022/05/20 MySQL