黑马程序员技术交流社区

标题: 【郑州校区】Java之品优购课程讲义_day03（4） [打印本页]

作者: 谷粒姐姐 时间: 2018-8-3 11:32
标题: 【郑州校区】Java之品优购课程讲义_day03（4）

规格管理

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] 纯文本查看 复制代码

<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] 纯文本查看 复制代码

<!-- 分 页 -->



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

4.2.1 指令与表达式

在 body 元素指定模块名和控制器名

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

<body  class="hold-transition  skin-red  sidebar-mini"



ng-app="pinyougou"    ng-controller="specificationController"  >

循环表格行

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

<tr  ng-repeat="entity  in  list">

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

<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] 纯文本查看 复制代码

//新增选项行



$scope.addTableRow=function(){



$scope.entity.specificationOptionList.push({});



}

specification.html “新建选项”按钮

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

<button  type="button"  class="btn  btn-default"  title="新建"

ng-click="addTableRow()"><i  class="fa  fa-file-o"></i>  新建</button>

循环列表行，绑定表格内的编辑框

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

<tr  ng-repeat="pojo  in  entity.specificationOptionList">



<td><input    type="checkbox"></td>

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

<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] 纯文本查看 复制代码

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

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2