品优购电商系统18-模板管理
1 需求及表结构分析
1.1 需求分析
首选我们需要理解模板的作用。模板主要有两个：
1是用于关联品牌与规格。
2定义扩充属性。
1.2 表结构分析
tb_type_template 模板表
| 字段 |
类型 |
长度 |
含义 |
| Id |
Bigint |
|
主键 |
| name |
Varchar |
80 |
模板名称 |
| Spec_ids |
Varchar |
1000 |
关联规格（json格式） |
| brand_ids |
Varchar |
1000 |
关联品牌（json格式） |
| custom_attribute_items |
Varchar |
2000 |
扩展属性 |
2 模板列表
2.1 引入JS
修改type_template.html ，引入JS
2.2 放置分页组件
2.3 指令与表达式
{{entity.id}}
{{entity.name}}
{{entity.brandIds}}
{{entity.specIds}}
{{entity.customAttributeItems}}
3 品牌下拉列表
在弹出窗口中有个品牌下拉列表，要求品牌是可以选择多个，这与我们之前的单选的下拉列表是不同的。我们要想实现这个功能，需要使用select2 组件来完成。
3.1 认识select2
我们来看例子：我们需要的就是这样可以多选的下拉框
3.2 显示品牌下拉列表（静态）
（1）修改 type_template.html 引入JS
（2）修改typeTemplateController.js ，定义品牌列表数据
$scope.brandList={data:[{id:1,text:'联想'},{id:2,text:'华为'},{id:3,text:'小米'}]};//品牌列表（3）在type_template.html 用select2组件实现多选下拉框
关联品牌
multiple 表示可多选
Config用于配置数据来源
select2-model用于指定用户选择后提交的变量
最终实现效果如下：
3.3 后端数据支撑
我们现在让这个下拉列表的数据从数据库中提取，修改后端代码
（1）pinyougou-dao 工程 ，在TbBrandMapper.xml中添加SQL语句配置
（2）在pinyougou-dao 的TbBrandMapper中添加方法定义
List<Map> selectOptionList();
（3）修改pinyougou-sellergoods-interface 的BrandService.java，增加方法定义
/**
* 品牌下拉框数据
*/
List（4）修改pinyougou-sellergoods-service的BrandServiceImpl.java，增加方法
/**
* 列表数据
*/
public List（5）修改pinyougou-manager-web的BrandController.java
@RequestMapping("/selectOptionList")
public List（6）修改pinyougou-manager-web的brandService.js
//下拉列表数据
this.selectOptionList=function(){
return $http.get('../brand/selectOptionList.do');
}
（7）修改pinyougou-manager-web的typeTemplateController.js
因为我们在模板控制层中需要使用品牌服务层的方法，所以需要添加依赖注入brandService
记得要在页面上也引入对应的brandService.js
//控制层
app.controller('typeTemplateController' ,function($scope,$controller ,typeTemplateService ,brandService){
使用品牌服务方法实现查询，结果赋给变量
$scope.brandList={data:[]};//品牌列表
//读取品牌列表
$scope.findBrandList=function(){
brandService.selectOptionList().success(
function(response){
$scope.brandList={data:response};
}
);
}
（8）修改type_template.html ，添加JS引入
特别注意一下，JS引入的位置，要在typeTemplateController.js之前，因为该控制器要使用到它
（9）修改type_template.html ，添加初始化
4 规格下拉列表
（1）pinyougou-dao 工程 ，在TbSpecificationMapper.xml中添加SQL语句配置
（2）在pinyougou-dao 的TbSpecificationMapper中添加方法定义
List<Map> selectOptionList();
（3）修改pinyougou-sellergoods-interface 的SpecificationService.java，增加方法定义
/**
* 品牌下拉框数据
*/
List（4）修改pinyougou-sellergoods-service的SpecificationServiceImpl.java，增加方法
/**
* 列表数据
*/
public List（5）修改pinyougou-manager-web的SpecificationController.java
@RequestMapping("/selectOptionList")
public List（6）修改pinyougou-manager-web的specificationService.js
//下拉列表数据
this.selectOptionList=function(){
return $http.get('../specification/selectOptionList.do');
}
（7）修改pinyougou-manager-web的typeTemplateController.js
因为我们在模板控制层中需要使用服务层的方法，所以需要添加依赖注入specificationService
记得要在页面上也引入对应的specificationService.js
//控制层
app.controller('typeTemplateController' ,function($scope,$controller ,typeTemplateService ,brandService,specificationService){
使用服务方法实现查询，结果赋给变量
$scope.specList={data:[]};//规格列表
//读取规格列表
$scope.findSpecList=function(){
specificationService.selectOptionList().success(
function(response){
$scope.specList={data:response};
}
);
}
（8）修改type_template.html ，添加JS引入
特别注意一下，JS引入的位置，要在typeTemplateController.js之前，因为该控制器要使用到它
（9）修改type_template.html ，添加初始化
关联规格
5 扩展属性
5.1 增加行
在typeTemplateController.js中新增代码
//新增扩展属性行
$scope.addTableRow=function(){
$scope.entity.customAttributeItems.push({});
}
在type_template.html中的“新建”按钮，执行实体的初始化操作
修改“新增扩展属性按钮”
循环表格
5.2 删除行
实现思路：在每一行将索引值传递给集合，在集合中删除。
修改typeTemplateController.js新增以下代码
//删除扩展属性行
$scope.deleTableRow=function(index){
$scope.entity.customAttributeItems.splice(index,1);//删除
}
修改每行的删除按钮
$index 用于获取ng-repeat指令循环中的索引。