A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

规格管理
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>



0 个回复

您需要登录后才可以回帖 登录 | 加入黑马