认识select2

我们需要的就是这样可以多选的下拉框
在这里插入图片描述

1.显示品牌下拉列表(静态)

(1) 修改 type_template.html 引入JS

<!-- 引入slect2插件-->
   <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>

<script src="../plugins/angularjs/angular.min.js"></script>
<script src="../js/base_pagination.js"></script>
<!-- 导入select2-angula整合-->
<script src="../plugins/select2/angular-select2.js"></script>
<script src="../plugins/angularjs/pagination.js"></script>
<link rel="stylesheet" href="../plugins/angularjs/pagination.css">

<script src="../js/service/typeTemplateService.js"></script>
<script src="../js/controller/baseController.js"></script>
<script src="../js/service/brandService.js"></script>
<script src="../js/controller/typeTemplateController.js"></script>

注意:base_pagination.js一定要在angular-select2.js之前导入,不然报app not define!

(2)修改typeTemplateController.js ,定义品牌列表数据

$scope.brandList={data:[{id:1,text:'联想'},{id:2,text:'华为'},{id:3,text:'小米'}]};//品牌列表

(3)在type_template.html 用select2组件实现多选下拉框

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

multiple 表示可多选
Config用于配置数据来源
select2-model用于指定用户选择后提交的变量
最终实现效果如下:
在这里插入图片描述

后端数据支撑

我们现在让这个下拉列表的数据从数据库中提取,修改后端代码
(1)dongyimai-dao 工程 ,在TbBrandMapper.xml中添加SQL语句配置


  <select id="selectOptionList"  resultType="java.util.Map" >
    select id,name as text from tb_brand
  </select>

(2)在dongyimai-dao 的TbBrandMapper中添加方法定义

List<Map> selectOptionList();

(3)修改dongyimai-sellergoods-interface 的BrandService.java,增加方法定义

/**
	 * 品牌下拉框数据
	 */
	List<Map> selectOptionList();

(4)修改dongyimai-sellergoods-service的BrandServiceImpl.java,增加方法

/**
	 * 列表数据
	 */
	public List<Map> selectOptionList() {
		return brandMapper.selectOptionList();
	}

(5)修改dongyimai-manager-web的BrandController.java

@RequestMapping("/selectOptionList")
	public List<Map> selectOptionList(){
		return brandService.selectOptionList();
	}

(6)修改dongyimai-manager-web的brandService.js

//下拉列表数据
	this.selectOptionList=function(){
		return $http.get('../brand/selectOptionList.do');
	}

(7)修改dongyimai-manager-web的typeTemplateController.js
因为我们在模板控制层中需要使用品牌服务层的方法,所以需要添加依赖注入

//控制层 
app.controller('typeTemplateController' ,function($scope,$controller   ,typeTemplateService ,brandService){	

使用品牌服务方法实现查询,结果赋给变量

$scope.brandList={data:[]};//品牌列表
	//读取品牌列表
	$scope.findBrandList=function(){
		brandService.selectOptionList().success(
			function(response){
				$scope.brandList={data:response};	
			}
		);		
	}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值