规格管理
4.1 需求及表结构分析4.1.1 需求
实现规格管理功能
4.1.1 表结构
tb_specification 规格表
|
字段
|
类型
|
长度
|
含义
|
|
Id
|
Bigint
|
|
主键
|
|
Spec_name
|
Varchar
|
255
|
规格名称
|
tb_specification_option 规格选项表
|
字段
|
类型
|
长度
|
含义
|
|
Id
|
Bigint
|
|
主键
|
|
Option_name
|
Varchar
|
200
|
规格选项名称
|
|
Spec_id
|
Bigint
|
30
|
规格 ID
|
|
Orders
|
Int
|
11
|
排序
|
4.2 规格列表
4.2.1 引入 JS
修改 pinyougou-manager-web 工程的 specification.html
[AppleScript] 纯文本查看 复制代码
?
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
<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/specificationService.js">
</script>
<script type="text/javascript" src="../js/controller/baseController.js"></script>
<script type="text/javascript" src="../js/controller/specificationController.js">
</script>
|
4.2.1 放置分页组件
[AppleScript] 纯文本查看 复制代码
?
|
1
2
3
|
<!-- 分 页 -->
<tm-pagination conf="paginationConf"></tm-pagination>
|
4.2.1 指令与表达式
在 body 元素指定模块名和控制器名
[AppleScript] 纯文本查看 复制代码
?
|
1
2
3
|
<body class="hold-transition skin-red sidebar-mini"
ng-app="pinyougou" ng-controller="specificationController" >
|
循环表格行
[AppleScript] 纯文本查看 复制代码
?
|
1
|
<tr ng-repeat="entity in list">
|
[AppleScript] 纯文本查看 复制代码
?
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
<td><input type="checkbox" ></td>
<td>{{entity.id}}</td>
<td>{{entity.specName}}</td>
<td class="text-center">
<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal">修改</button>
</td>
</tr>
|
4.3 新增规格
4.3.1 新增行的实现
修改 specificationController.js 新增以下代码
[AppleScript] 纯文本查看 复制代码
?
|
1
2
3
4
5
6
7
|
//新增选项行
$scope.addTableRow=function(){
$scope.entity.specificationOptionList.push({});
}
|
specification.html “新建选项”按钮
[AppleScript] 纯文本查看 复制代码
?
|
1
2
|
<button type="button" class="btn btn-default" title="新建"
ng-click="addTableRow()"><i class="fa fa-file-o"></i> 新建</button>
|
循环列表行，绑定表格内的编辑框
[AppleScript] 纯文本查看 复制代码
?
|
1
2
3
|
<tr ng-repeat="pojo in entity.specificationOptionList">
<td><input type="checkbox"></td>
|
[AppleScript] 纯文本查看 复制代码
?
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
<td>
<input ng-model="pojo.optionName" class="form-control" placeholder="规格选项">
</td>
<td>
<input ng-model="pojo.orders" class="form-control" placeholder="排序">
</td>
</tr>
|
注意：要修改 specification.html “新建”按钮，弹出窗口时对 entity 进行初始化，否则向集合添加数据时会报错！
[AppleScript] 纯文本查看 复制代码
?
|
1
2
|
< button type="button" class="btn btn-default" title=" 新 建 " data-toggle="modal"
data-target="#editModal" ng-click="entity={'specificationOptionList':[]}"><i class="fa fa-file-o"></i> 新建</button>
|