5.模板管理

5.1 需求及表结构分析5.1.1 需求分析

首选我们需要理解模板的作用。模板主要有两个：

1 是用于关联品牌与规格

2 定义扩充属性

5.1.2 表结构分析

tb_type_template模板表

字段	类型	长度	含义
Id	Bigint		主键
name	Varchar	80	模板名称
Spec_ids	Varchar	1000	关联规格（json 格式）
brand_ids	Varchar	1000	关联品牌（json 格式）
custom_attribute_ite ms	Varchar	2000	扩展属性

5.2 模板列表

5.2.1 引入 JS

修改 type_template.html ，引入 JS

[AppleScript] 纯文本查看 复制代码

<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>

5.2.1 放置分页组件

[AppleScript] 纯文本查看 复制代码

<tm-pagination  conf="paginationConf"></tm-pagination>

5.2.1 指令与表达式

[AppleScript] 纯文本查看 复制代码

<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>

[AppleScript] 纯文本查看 复制代码

<td  class="text-center">

<button  type="button"  class="btn  bg-olive  btn-xs"  data-toggle="modal" data-target="#editModal"  >修改</button>

</td>

</tr>

品牌下拉列表

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

5.2.1 认识 select2

我们来看例子：我们需要的就是这样可以多选的下拉框

5.模板管理

5.1 需求及表结构分析5.1.1 需求分析

首选我们需要理解模板的作用。模板主要有两个：

1 是用于关联品牌与规格

2 定义扩充属性

5.1.2 表结构分析

tb_type_template模板表

字段	类型	长度	含义
Id	Bigint		主键
name	Varchar	80	模板名称
Spec_ids	Varchar	1000	关联规格（json 格式）
brand_ids	Varchar	1000	关联品牌（json 格式）
custom_attribute_ite ms	Varchar	2000	扩展属性

5.2 模板列表

5.2.1 引入 JS

修改 type_template.html ，引入 JS

[AppleScript] 纯文本查看 复制代码

<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>

5.2.1 放置分页组件

[AppleScript] 纯文本查看 复制代码

<tm-pagination  conf="paginationConf"></tm-pagination>

5.2.1 指令与表达式

[AppleScript] 纯文本查看 复制代码

<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>

[AppleScript] 纯文本查看 复制代码

<td  class="text-center">

<button  type="button"  class="btn  bg-olive  btn-xs"  data-toggle="modal" data-target="#editModal"  >修改</button>

</td>

</tr>

品牌下拉列表

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

5.2.1 认识 select2

我们来看例子：我们需要的就是这样可以多选的下拉框