A-A+

WEB插件-Select2

2017年08月15日 技术 暂无评论 阅读 447 次

Select2是一款基于JQuery的前端插件,用来代替原生的Select,可以实现模糊查询、异步加载、多选等功能,官网是http://select2.github.io/

使用方法如下:

  1. <html>
  2.     <head>
  3.          //引入css样式
  4.         <link href="/res/plugins/select2/select2.min.css" rel="stylesheet" type="text/css" />
  5.         //视需求引入扩展样式
  6.         <link href="/res/plugins/select2/select2-bootstrap.css" rel="stylesheet" type="text/css" />
  7.     </head>
  8.     <body>
  9.         <select id="test1">
  10.         </select>
  11.         //引入js文件
  12.         <script src="/res/js/jquery-2.1.1.js"></script>
  13.         <script type="text/javascript" src="/res/plugins/select2/select2.full.min.js"></script>
  14.         <script type="text/javascript" src="/res/plugins/select2/zh-CN.js"></script>
  15.         <script>
  16.             $("#test1").select2({
  17.                 placeholder : "--",
  18.                 language: "zh-CN",
  19.                 allowClear: true,
  20.                 theme: "bootstrap",
  21.                 multiple : false
  22.             });
  23.         </script>
  24.     </body>
  25. </html>

此插件的基本用法没什么难度,但是使用过程中也许还是会遇到一些坑的,比如:

1. 格式化远程异步加载数据

如果使用templateSelection和templateResult格式化选中项和结果项时,返回的数据是HTML格式,比如:

  1. templateSelection : function(repo){
  2.     var markup = "<div>"+repo.name+"</div>";
  3.     return markup;
  4. }

那么必须搭配escapeMarkup使用,否则的话,“<div>”和“</div>”就会显示出来,escapeMarkup其实是固定的写法:

  1. escapeMarkup: function (markup) { return markup; },

2. 加载初始数据

一般在修改页面,都需要在页面第一次加载的时候填充当前已经存在的数据,这时候就需要用到

  1. initSelection: function (element, callback){
  2. }

建议在后台返回数据时,返回{id : "", text : ""}这种格式的数据,这样的话Select2会自动识别其中的数据,否则的话就需要按下面这样写:

  1. escapeMarkup: function (markup) { return markup; },
  2. templateSelection : function(repo){
  3.     if (repo.loading){
  4.         return repo.text;
  5.     }
  6.     repo.id = repo.id;
  7.     repo.text = repo.name;
  8.     var markup = "<div>"+repo.name+"</div>";
  9.     return markup;
  10. },
  11. templateResult: function(repo){
  12.     if (repo.loading){
  13.         return repo.text;
  14.     }
  15.     repo.id = repo.id;
  16.     repo.text = repo.name;
  17.     var markup = "<div>"+repo.name+"</div>";
  18.     return markup;
  19. },
  20. initSelection: function (element, callback){
  21.     var data = {id : '${id}', name : '${name}'};
  22.     callback(data);
  23. }

3. 赋值

有的需求需要某些操作完成后再赋值,比如某个控件填写或选择完成后,将值带入或根据值查找结果后改变目标Select2的值,这时候是相当麻烦的一件事,因为已经错过了initSelection里面的callback,所以建议结果集是{id : "", text : ""}这样的数据,否则只能按下面代码写了:

  1. //为目标Select2赋值
  2. var $option = $("<option>"+e.data.recruiter+"</option>").val(e.data.recruiterid);
  3. $("#test").append($option).trigger("change");
  4. //目标使用Select2
  5. $("#test").select2({
  6.             placeholder : "--",
  7.             language: "zh-CN",
  8.             allowClear: true,
  9.             theme: "bootstrap",
  10.             multiple : false,
  11.             ajax: {
  12.                 //此处为ajax代码
  13.             },
  14.             minimumInputLength: 1,
  15.             escapeMarkup: function (markup) { return markup; },
  16.             templateResult: function(repo){
  17.                 if (typeof(repo.name) == "undefined"){
  18.                     repo.name = repo.text;
  19.                 } else {
  20.                     repo.text = repo.name;
  21.                 }
  22.                 repo.id = repo.id;
  23.                 if (repo.loading){
  24.                     return repo.text;
  25.                 }
  26.                 var markup = "<div>"+repo.name+"</div>";
  27.                 return markup;
  28.             },
  29.             templateSelection: function(repo){
  30.                 if (typeof(repo.name) == "undefined"){
  31.                     repo.name = repo.text;
  32.                 } else {
  33.                     repo.text = repo.name;
  34.                 }
  35.                 repo.id = repo.id;
  36.                 if (repo.loading){
  37.                     return repo.text;
  38.                 }
  39.                 var markup = "<div>"+repo.name+"</div>";
  40.                 return markup;
  41.             }
  42. });
哼哼的泰迪熊

给我留言

Copyright © 字痕随行 保留所有权利.   Theme  Ality 京ICP备14039894号

用户登录

分享到: