select2的使用步骤

最新推荐文章于 2024-07-30 11:44:31 发布

A_jungle

最新推荐文章于 2024-07-30 11:44:31 发布

阅读量851

点赞数

分类专栏：前端文章标签： select2

本文链接：https://blog.csdn.net/A_jungle/article/details/83184483

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

select2相关文件链接：

https://pan.baidu.com/s/1WemkNAsKkcY4Ozf1lwGqAw
提取码：p752

1.后端

1.1dao层 : 在xxxmapper.xml文件中添加

  <select id="selectOptionList"  resultType="java.util.Map" >

    select id,name as text from tb_brand

  </select>

在xxxMapper.java中编写接口文件

List<Map> selectOptionList();

1.2 接口层添加方法

List<Map> selectOptionList();

接口实现

      public List<Map> selectOptionList() {

             return brandMapper.selectOptionList();

       }

1.3controller层

@RequestMapping("/selectOptionList")

public List<Map> selectOptionList(){

return brandService.selectOptionList();

}

2.前端

2.1service层

app.service('brandService',function ($http) {
  this.selectOptionList = function () {
    return $http.get('../brand/selectOptionList.do') ;
});

2.2controller层

 //控制层 
app.controller('typeTemplateController' ,function($scope,$controller   ,typeTemplateService,brandService,specificationService){     //引入service层服务brandService

//定义品牌列表数据
$scope.brandList = {data : []} ;
   //查询品牌列表
   $scope.findBrandList = function () {
       brandService.selectOptionList().success(
           function (response) {
               $scope.brandList = {data : response};
           }
       );
   }

});

2.3页面引入样式文件

<link rel="stylesheet" href="../plugins/select2/select2.css" />
<link rel="stylesheet" href="../plugins/select2/select2-bootstrap.css" />
<script src="../plugins/select2/select2.min.js" type="text/javascript"></script>

2.4页面引入select2的库文件

<!--引入angular-select2.js 必须放在app模块下,因为此js文件依赖于app模块-->
<script type="text/javascript" src="../js/angular-select2.js">  </script>

2.5在页面中引入相应的service服务层

<script type="text/javascript" src="../js/service/brandService.js"> </script>

特别注意一下，JS引入的位置，要在typeTemplateController.js之前，因为该控制器要使用到它

2.6修改type_template.html ，添加初始化

<body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou" ng-controller="typeTemplateController" ng-init="findBrandList()">

2.7select2 下拉框

<!--config:用于配置数据来源   select2-model:用于指定用户选择后提交的变量   multiple:表示多选-->

<input select2 config="brandList" select2-model="entity.brandIds" multiple placeholder="选择品牌（可多选）" class="form-control" type="text" >

2.8清除新建按钮缓存

ng-click="entity={}"

A_jungle

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录