基于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 相关文章推荐
js跨域和ajax 跨域问题的实现思路
Sep 05 Javascript
jquery 层次选择器siblings与nextAll的区别介绍
Aug 02 Javascript
使用Javascript写的2048小游戏
Nov 25 Javascript
JavaScript数据结构与算法之链表
Jan 29 Javascript
JavaScript简单实现鼠标移动切换图片的方法
Feb 23 Javascript
Bootstrap风格的WPF样式
Dec 07 Javascript
JS实战篇之收缩菜单表单布局
Dec 10 Javascript
JavaScript调试之console.log调试的一个小技巧分享
Aug 07 Javascript
原生JavaScript之es6中Class的用法分析
Feb 23 Javascript
JavaScript实现移动端弹窗后禁止滚动
May 25 Javascript
结合axios对项目中的api请求进行封装操作
Sep 21 Javascript
react 路由Link配置详解
Nov 11 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下检测字符串是否是utf8编码的代码
2008/06/28 PHP
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
php从数据库中获取数据用ajax传送到前台的方法
2018/08/20 PHP
Smarty模板语法详解
2019/07/20 PHP
用js实现手把手教你月入万刀(转贴)
2007/11/07 Javascript
自动完成JS类(纯JS, Ajax模式)
2009/03/12 Javascript
JavaScript 构造函数 面相对象学习必备知识
2010/06/09 Javascript
基于jquery可配置循环左右滚动例子
2011/09/09 Javascript
动态加载js和css(外部文件)
2013/04/17 Javascript
JQuery中对Select的option项的添加、删除、取值
2013/08/25 Javascript
浅谈js的setInterval事件
2014/12/05 Javascript
IE浏览器下PNG相关功能
2015/07/05 Javascript
基于Javascript实现二级联动菜单效果
2016/03/04 Javascript
浅析jquery unbind()方法移除元素绑定的事件
2016/05/24 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
2017/02/17 Javascript
nodejs中sleep功能实现暂停几秒的方法
2017/07/12 NodeJs
使用jQuery实现简单的tab框实例
2017/08/22 jQuery
基于js中document.cookie全面解析
2017/09/14 Javascript
vue2.0 elementUI制作面包屑导航栏
2018/02/22 Javascript
Vue加载json文件的方法简单示例
2019/01/28 Javascript
详解基于node.js的脚手架工具开发经历
2019/01/28 Javascript
微信小程序mpvue点击按钮获取button值的方法
2019/05/29 Javascript
小程序实现简单语音聊天的示例代码
2020/07/24 Javascript
vue实现两个区域滚动条同步滚动
2020/12/13 Vue.js
[01:46]2018完美盛典章节片——坚守
2018/12/17 DOTA
python3 pandas 读取MySQL数据和插入的实例
2018/04/20 Python
详解centos7+django+python3+mysql+阿里云部署项目全流程
2019/11/15 Python
纯CSS3发光分享按钮的实现教程
2014/09/06 HTML / CSS
使用HTML5技术开发一个属于自己的超酷颜色选择器
2013/09/22 HTML / CSS
Reformation官网:美国女装品牌
2018/09/14 全球购物
德国婴儿服装和婴儿用品购买网站:Baby Sweets
2019/12/08 全球购物
《厄运打不垮的信念》教学反思
2014/04/13 职场文书
社团活动总结模板
2014/06/30 职场文书
学校读书活动总结
2014/06/30 职场文书
行政助理岗位职责
2015/02/10 职场文书
工程质检员岗位职责
2015/04/08 职场文书