AngularJS+Select2实现多选框
AngularJS+Select2实现多选框
Select2是⼀款下拉框美化插件chosen的扩展，它能让丑陋的、很长的select选择框变的更好看、更⽅便，⽀持搜索，远程数据集，以及⽆限滚动的结果。效果预览
有了select2，你就可以实现这样的下拉框
引⼊资源
和所有和js插件⼀样，select2也需要引⼊⼀些资源。这⾥提供⼀份在线版的和⼀份本地版本的，⼤家根据⾃⼰的需要引⼊即可。 提取码：pzik
在线版：
<link rel="stylesheet" href="img.vantee/AngularJS%2BSelect2/bootstrap.min.css">
<script src="img.vantee/AngularJS%2BSelect2/jquery-2.2.3.min.js"></script>
<script src="img.vantee/AngularJS%2BSelect2/bootstrap.min.js"></script>
<link rel="stylesheet" href="img.vantee/AngularJS%2BSelect2/select2.css"/>
<link rel="stylesheet" href="img.vantee/AngularJS%2BSelect2/select2-bootstrap.css"/>
<script src="img.vantee/AngularJS%2BSelect2/select2.min.js" type="text/javascript"></script>
<!--引⼊AngularJS-->
<script src="img.vantee/AngularJS%2BSelect2/angular.min.js"></script>
<!--注意：这⾥需要引⼊你的ng-module⽂件-->
<script src="你的base.js"></script>
<!--select2-angularJS 这⾥⼀定要引⼊在ng-module下-->
<script src="img.vantee/AngularJS%2BSelect2/angular-select2.js"></script>
注意：select2-angular.js⽂件必须引⼊在ng-module以后，因为其使⽤了app。
在前端页⾯中使⽤select2
select是基于input的⼀个控件插件，所以在页⾯上添加⼀个input插件，在其上添加⼏个属性即可实现多选框。
<input select2  select2-model="选中的数据" config="数据源" multiple placeholder="提⽰信息" class="样式" type="text"/>
select2 表⽰该控件为select2插件
multiple 表⽰可多选
angular和angularjsConfig⽤于配置数据来源
select2-model⽤于指定⽤户选择后提交的变量
注意：这⾥的数据源的格式必须为data:[{id:"n",text:"xx"},{id:"n",text:"xx"},{id:"n",text:"xx"}]
后台数据⽀持
我们使⽤select2插件难免要从后台查询数据，那么对于前端的数据格式要求我们后台应该怎么查询呢？
向前端返回List，并转换为json
在查询数据库时将id和要指定的数据列指定别名
在mybatis中将resultType指定为"java.util.Map"
返回到前端后数据包装，例如conf= {data: response};

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。