品优购电商系统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>