A-A+
WEB插件-Select2
Select2是一款基于JQuery的前端插件，用来代替原生的Select，可以实现模糊查询、异步加载、多选等功能，官网是http://select2.github.io/。
使用方法如下：
- <html>
- <head>
- //引入css样式
- <link href="/res/plugins/select2/select2.min.css" rel="stylesheet" type="text/css" />
- //视需求引入扩展样式
- <link href="/res/plugins/select2/select2-bootstrap.css" rel="stylesheet" type="text/css" />
- </head>
- <body>
- <select id="test1">
- </select>
- //引入js文件
- <script src="/res/js/jquery-2.1.1.js"></script>
- <script type="text/javascript" src="/res/plugins/select2/select2.full.min.js"></script>
- <script type="text/javascript" src="/res/plugins/select2/zh-CN.js"></script>
- <script>
- $("#test1").select2({
- placeholder : "--",
- language: "zh-CN",
- allowClear: true,
- theme: "bootstrap",
- multiple : false
- });
- </script>
- </body>
- </html>
此插件的基本用法没什么难度，但是使用过程中也许还是会遇到一些坑的，比如：
1. 格式化远程异步加载数据
如果使用templateSelection和templateResult格式化选中项和结果项时，返回的数据是HTML格式，比如：
- templateSelection : function(repo){
- var markup = "<div>"+repo.name+"</div>";
- return markup;
- }
那么必须搭配escapeMarkup使用，否则的话，“<div>”和“</div>”就会显示出来，escapeMarkup其实是固定的写法：
- escapeMarkup: function (markup) { return markup; },
2. 加载初始数据
一般在修改页面，都需要在页面第一次加载的时候填充当前已经存在的数据，这时候就需要用到
- initSelection: function (element, callback){
- }
建议在后台返回数据时，返回{id : "", text : ""}这种格式的数据，这样的话Select2会自动识别其中的数据，否则的话就需要按下面这样写：
- escapeMarkup: function (markup) { return markup; },
- templateSelection : function(repo){
- if (repo.loading){
- return repo.text;
- }
- repo.id = repo.id;
- repo.text = repo.name;
- var markup = "<div>"+repo.name+"</div>";
- return markup;
- },
- templateResult: function(repo){
- if (repo.loading){
- return repo.text;
- }
- repo.id = repo.id;
- repo.text = repo.name;
- var markup = "<div>"+repo.name+"</div>";
- return markup;
- },
- initSelection: function (element, callback){
- var data = {id : '${id}', name : '${name}'};
- callback(data);
- }
3. 赋值
有的需求需要某些操作完成后再赋值，比如某个控件填写或选择完成后，将值带入或根据值查找结果后改变目标Select2的值，这时候是相当麻烦的一件事，因为已经错过了initSelection里面的callback，所以建议结果集是{id : "", text : ""}这样的数据，否则只能按下面代码写了：
- //为目标Select2赋值
- var $option = $("<option>"+e.data.recruiter+"</option>").val(e.data.recruiterid);
- $("#test").append($option).trigger("change");
- //目标使用Select2
- $("#test").select2({
- placeholder : "--",
- language: "zh-CN",
- allowClear: true,
- theme: "bootstrap",
- multiple : false,
- ajax: {
- //此处为ajax代码
- },
- minimumInputLength: 1,
- escapeMarkup: function (markup) { return markup; },
- templateResult: function(repo){
- if (typeof(repo.name) == "undefined"){
- repo.name = repo.text;
- } else {
- repo.text = repo.name;
- }
- repo.id = repo.id;
- if (repo.loading){
- return repo.text;
- }
- var markup = "<div>"+repo.name+"</div>";
- return markup;
- },
- templateSelection: function(repo){
- if (typeof(repo.name) == "undefined"){
- repo.name = repo.text;
- } else {
- repo.text = repo.name;
- }
- repo.id = repo.id;
- if (repo.loading){
- return repo.text;
- }
- var markup = "<div>"+repo.name+"</div>";
- return markup;
- }
- });
