品优购电商系统14-规格管理
1 需求及表结构分析
1.1 需求
实现规格管理功能
1.2 表结构
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 |
排序 |
2 规格列表
2.1 引入JS
修改pinyougou-manager-web工程的specification.html
<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>
2.2 放置分页组件
<!-- 分页 -->
<tm-pagination conf="paginationConf"></tm-pagination>
2.3 指令与表达式
在body元素指定模块名和控制器名
<body class="hold-transition skin-red sidebar-mini"
ng-app="pinyougou" ng-controller="specificationController" >
循环表格行
<tr ng-repeat="entity in list">
<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>