4.select2的应用

1 代码生成器
Pojo+mapper接口+mapper映射文件
能帮我们生成service接口+service实现类+controller+JS+html
只限于单表的CRUD
 

1.1 代码生成器的使用

第一步：把压缩包放到一个没有中文和空格的位置，并且解压

!

第二步：双击

!

第三步：

!

第四步：

!

 

2.模板CRUD
互联网行业中做合理的表设计：
1、 不做主外键约束 2、尽量避免多表联查
 

1.2模板表的分析：

1.2 模板的列表展示

第一步：把代码生成器生成的service和实现类和Controller都放到相应的模块中

第二步：修改typeTemplateService.js的代码

1.3 新增

1.3.1 Select2的应用

在弹出窗口中有个品牌下拉列表，要求品牌是可以选择多个，这与我们之前的单选的下拉列表是不同的。我们要想实现这个功能，需要使用select2 组件来完成

效果：

!

 

如何使用：
第一步：添加相应的css和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 src="../plugins/select2/angular-select2.js" type="text/javascript"></script>
<script src="../plugins/select2/select2_locale_zh-CN.js" type="text/javascript"></script>

 

第二步：html中select2的使用

1.4 使用select2动态显示品牌数据

第一步：修改html中的config

!

第二步：在页面加载时查询品牌数据

!

$scope.findBrandList=function () {
 brandService.findBrandList().success(function (response) {
 // response:[{"id":1,"text":"联想"},{"id":2,"text":"华为"}]
 $scope.brandList={data:response};
 })
 }

第三步：完成后台的方法

Service：
 @Override
 public List<Map> findBrandList() {
 return brandMapper.findBrandList();
 }

 

Mapper的代码：

<select id="findBrandList" resultType="map">
 select id ,name as text from tb_brand
 </select>

 

1.5 使用select2动态显示规格数据

1.6 扩展属性

参考规格小项的效果

1.7 修改

注意：通过findOne获取的数据格式需要和保存的数据格式保持一致

目前没有保持一致：

使用JSON.parse方法把字符串变成json对象

1.8 列表显示优化

创建一个方法

// 把数组变成字符串 [{"id":32,"text":"希乐"},{"id":33,"text":"富光"}]---->希乐,富光

 $scope.arrayToString=function (array) {
 array = JSON.parse(array);
 var str="";
 for (var i = 0; i < array.length; i++) {
 if(i==array.length-1){
 str+= array[i].text;
 }else{
 str+= array[i].text+",";
 }
 }
 return str;
 }

 修改表格中的代码

最终的效果：

2 分类管理

2.1 分类的表设计

![在这里插入图