使用angularjs完成可多选下拉列表功能:select2

		tb_type_template  模板表
		字段								类型					长度					含义
		Id	Bigint							主键
		name								Varchar				80						模板名称
		Spec_ids							Varchar				1000					关联规格(json格式)
		brand_ids						Varchar				1000					关联品牌(json格式)
		custom_attribute_items	Varchar				2000					扩展属性

在这里插入图片描述

前端:

select2组件在官网下载!

HTML:

<input select2  select2-model="entity.brandIds" config="brandList" multiple placeholder="选择品牌(可多选)" class="form-control" type="text"/>		
	multiple作为单个属性 表示可多选
	Config用于配置数据来源
	select2-model用于指定用户选择后提交的变量

js:

				$scope.brandList={data:[]};//此为数据来源,创建关联品牌对象,对象中的对象为品牌数据		
			
				$scope.findBrandList=function(){
	$http.get(url).success(function(response){
			$scope.brandList={data:response};	
		}
	);		
}

后端:因为select2的config数据来源固定格式为[{id:2,text:联想},…]
所以后端需要查询id与name并返回修改属性名字后的json数据,所以
DAO:
xml:
select id,name as text
from tb_brand

dao:
List selectOptionList();

Service:
List selectOptionList();

		public List<Map> selectOptionList() {
				return brandMapper.selectOptionList();

}

Controller:
@RequestMapping("/selectOptionList")
public List selectOptionList(){
return brandService.selectOptionList();
}

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值