使用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:

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();
}

猜你喜欢

转载自blog.csdn.net/Bird_King/article/details/93011305