1.需求及表结构分析
1.需求分析
首选我们需要理解模板的作用。模板主要有两个：
1.是用于关联品牌与规格
2.定义扩充属性
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.模板列表
1.引入JS
修改 type_template.html ，引入 JS
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"> </script> <script src="../plugins/angularjs/pagination.js"></script> <link rel="stylesheet" href="../plugins/angularjs/pagination.css"> <script type="text/javascript" src="../js/base_pagination.js"> </script> <script type="text/javascript" src="../js/service/typeTemplateService.js"> </script> <script type="text/javascript" src="../js/controller/baseController.js"> </script> <script type="text/javascript" src="../js/controller/typeTemplateController.js"> </script>
2.放置分页组件
<tm-pagination conf="paginationConf"></tm-pagination>
3.指令与表达式
<body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou" ng-controller="typeTemplateController" > <tr ng-repeat="entity in list"> <td><input type="checkbox"></td> <td>{{entity.id}}</td> <td>{{entity.name}}</td> <td>{{entity.brandIds}}</td> <td>{{entity.specIds}}</td> <td>{{entity.customAttributeItems}}</td> <td class="text-center"> <button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" >修改</button> </td> </tr>
4.优化模板列表的显示
我们现在完成的列表中都是以 JSON 格式显示的，不利于用户的查询。
我们需要将信息以更友好的方式展现出来,如下图形式
我们需要将一个 json 字符串中某个属性的值提取出来，用逗号拼接成一个新的字符串。这样的功能比较常用，所以我们将方法写到 baseController.js
//提取 json 字符串数据中某个属性，返回拼接字符串 逗号分隔 $scope.jsonToString=function(jsonString,key){ var json=JSON.parse(jsonString);//将 json 字符串转换为 json 对象 var value=""; for(var i=0;i<json.length;i++){ if(i>0){ value+="," } value+=json[i][key]; } return value; }
页面上使用该函数进行转换
<tr ng-repeat="entity in list"> <td><input type="checkbox" ng-click="updateSelection($event,entity.id)"></td> <td>{{entity.id}}</td> <td>{{entity.name}}</td> <td>{{jsonToString(entity.brandIds,'text')}}</td> <td>{{jsonToString(entity.specIds,'text')}}</td> <td>{{jsonToString(entity.customAttributeItems,'text')}}</td> <td class="text-center"> <button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" ng-click="findOne(entity.id)">修改</button> </td> </tr>
3.品牌下拉列表
在弹出窗口中有个品牌下拉列表，要求品牌是可以选择多个，这与我们之前的单选的下拉列表是不同的。我们要想实现这个功能，需要使用 select2 组件来完成。
1.认识select2
我们来看例子：我们需要的就是这样可以多选的下拉框
2.显示品牌下拉列表（静态）
（1）修改 type_template.html 引入 JS
<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 type="text/javascript" src="../js/angular-select2.js"> </script>
（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 用于指定用户选择后提交的变量
最终实现效果如下：
3. 后端数据支撑
我们现在让这个下拉列表的数据从数据库中提取，修改后端代码
（1）pinyougou-dao 工程 ，在 TbBrandMapper.xml 中添加 SQL 语句配置
<select id="selectOptionList" resultType="java.util.Map" > select id,name as text from tb_brand </select>
（2）在 pinyougou-dao 的 TbBrandMapper 中添加方法定义
List<Map> selectOptionList();
（3）修改 pinyougou-sellergoods-interface 的 BrandService.java，增加方法定义
/** * 品牌下拉框数据 */ List<Map> selectOptionList();
（4）修改 pinyougou-sellergoods-service 的BrandServiceImpl.java，增加方法。
/** * 列表数据 */ public List<Map> selectOptionList() { return brandMapper.selectOptionList(); }
（5）修改 pinyougou-manager-web 的BrandController.java
@RequestMapping("/selectOptionList") public List<Map> selectOptionList(){ return brandService.selectOptionList(); }
（6）修改 pinyougou-manager-web 的 brandService.js
//下拉列表数据 this.selectOptionList=function(){ return $http.get('../brand/selectOptionList.do'); }
（7）修改 pinyougou-manager-web 的typeTemplateController.js
因为我们在模板控制层中需要使用品牌服务层的方法，所以需要添加依赖注入
//控制层 app.controller('typeTemplateController' ,function($scope,$controller ,typeTemplate Service ,brandService){
使用品牌服务方法实现查询，结果赋给变量
$scope.brandList={data:[]};//品牌列表 //读取品牌列表 $scope.findBrandList=function(){ brandService.selectOptionList().success( function(response){ $scope.brandList={data:response}; } ); }
（8）修改 type_template.html ，添加 JS 引入
<script type="text/javascript" src="../js/base_pagination.js"> </script> <script type="text/javascript" src="../js/service/typeTemplateService.js"> </script> <script type="text/javascript" src="../js/service/brandService.js"> </script> <script type="text/javascript" src="../js/controller/baseController.js"> </script> <script type="text/javascript" src="../js/controller/typeTemplateController.js"> </script>
特别注意一下，JS 引入的位置，要在typeTemplateController.js 之前，因为该控制器要使用到它
4.规格下拉列表
（代码略，参照品牌下拉列表的实现步骤 ）
