17分布式电商项目 - 模板管理功能(二)

简介: 17分布式电商项目 - 模板管理功能(二)

1. 扩展属性

1.增加行

在 typeTemplateController.js 中新增代码

//新增扩展属性行
$scope.addTableRow=function(){
  $scope.entity.customAttributeItems.push({});
}

在 type_template.html 中的“新建”按钮,执行实体的初始化操作

<button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#editModal" ng-click="entity={customAttributeItems:[]}">
  <i class="fa fa-file-o"></i>
 新建</button>

修改“新增扩展属性按钮”

<button type="button" class="btn btn-default" title="新增扩展属性" ng-click="addTableRow()">
  <i class="fa fa-file-o"></i> 新增扩展属性
 </button>

循环表格

<tr ng-repeat="pojo in entity.customAttributeItems">
<td><input class="form-control" ng-model="pojo.text" placeholder="属性名称" ></td>
<td>
<button type="button" class="btn btn-default" title="删除">        <i class="fa fa-trash-o"></i> 删除
</button> 
</td>
</tr>

2.删除行

实现思路:在每一行将索引值传递给集合,在集合中删除。

修改 typeTemplateController.js 新增以下代码

//删除扩展属性行
$scope.deleTableRow=function(index){
  $scope.entity.customAttributeItems.splice(index,1);//删除
}

修改每行的删除按钮

<button type="button" ng-click="deleTableRow($index)" class="btn btn-default" title=" 删除">
  <i class="fa fa-trash-o"></i> 删除
</button>

$index 用于获取 ng-repeat 指令循环中的索引。

2.新增模板

修改 type_template.html ,绑定文本框

<tr>
  <td>模板名称</td>
  <td><input ng-model="entity.name" class="form-control" placeholder="模板名称"> </td>
</tr>

保存按钮

<button class="btn btn-success" data-dismiss="modal" aria-hidden="true" ng-click="save()">
  保存
</button>

3.修改模板

修改 typeTemplateController.js 的 findOne 方法

//查询实体
$scope.findOne=function(id){
  typeTemplateService.findOne(id).success(
    function(response){
      $scope.entity= response;
      $scope.entity.brandIds=         JSON.parse($scope.entity.brandIds);//转换品牌列表
            $scope.entity.specIds=JSON.parse($scope.entity.specIds);//转换规格列表
            $scope.entity.customAttributeItems=JSON.parse($scope.entity.customAttributeItems);//转换扩展属性
    }
  );
}

从数据库中查询出来的是字符串,我们必须将其转换为 json 对象才能实现信息的回显。

4.删除模板

修改 type_template.html

表格中的复选框

<input type="checkbox" ng-click="updateSelection($event,entity.id)">

删除按钮

<button type="button" class="btn btn-default" title="删除" ng-click="dele()">
  <i class="fa fa-trash-o"></i> 删除
</button>



目录
相关文章
|
6月前
|
NoSQL 调度 Redis
19- 你的项目中哪里用到了分布式锁
在一个项目中,为解决集群环境下SpringTask定时任务的重复执行问题,采用了Redis实现分布式锁来管理任务调度,防止资源浪费。后来因任务量和执行规则增加,以及单节点效率限制,系统改用XXL-JOB,分布式锁不再使用。
68 2
|
6月前
|
NoSQL Java Redis
【分布式技术专题】「分布式技术架构」手把手教你如何开发一个属于自己的分布式锁的功能组件(一)
【分布式技术专题】「分布式技术架构」手把手教你如何开发一个属于自己的分布式锁的功能组件
84 0
|
3月前
|
资源调度 Java 调度
Spring Cloud Alibaba 集成分布式定时任务调度功能
定时任务在企业应用中至关重要,常用于异步数据处理、自动化运维等场景。在单体应用中,利用Java的`java.util.Timer`或Spring的`@Scheduled`即可轻松实现。然而,进入微服务架构后,任务可能因多节点并发执行而重复。Spring Cloud Alibaba为此发布了Scheduling模块,提供轻量级、高可用的分布式定时任务解决方案,支持防重复执行、分片运行等功能,并可通过`spring-cloud-starter-alibaba-schedulerx`快速集成。用户可选择基于阿里云SchedulerX托管服务或采用本地开源方案(如ShedLock)
111 1
|
5月前
|
NoSQL Java 应用服务中间件
大厂面试必备:如何轻松实现分布式Session管理?
这篇文章介绍三种分布式Session的实现方案:基于JWT的Token、基于Tomcat的Redis和基于Spring的Redis。JWT方案通过生成Token存储用户信息,实现无状态、可扩展的会话管理,但可能增加请求负载且数据安全性较低。Tomcat与Redis结合,通过配置Tomcat和Redis,实现Session集中管理和高性能存储,但配置相对复杂。Spring整合Redis适用于SpringBoot和SpringCloud项目,集成方便,扩展性强,但同样依赖外部Redis服务。每种方法有其优缺点,适用场景不同。作者小米是一个技术爱好者,欢迎关注其微信公众号“软件求生”获取更多技术内容
233 4
|
2月前
|
NoSQL Java Redis
面试官:项目中如何实现分布式锁?
面试官:项目中如何实现分布式锁?
83 6
面试官:项目中如何实现分布式锁?
|
5月前
|
消息中间件 NoSQL Java
Redis系列学习文章分享---第六篇(Redis实战篇--Redis分布式锁+实现思路+误删问题+原子性+lua脚本+Redisson功能介绍+可重入锁+WatchDog机制+multiLock)
Redis系列学习文章分享---第六篇(Redis实战篇--Redis分布式锁+实现思路+误删问题+原子性+lua脚本+Redisson功能介绍+可重入锁+WatchDog机制+multiLock)
224 0
|
4月前
|
资源调度 Java 调度
Spring Cloud Alibaba 集成分布式定时任务调度功能
Spring Cloud Alibaba 发布了 Scheduling 任务调度模块 [#3732]提供了一套开源、轻量级、高可用的定时任务解决方案,帮助您快速开发微服务体系下的分布式定时任务。
14865 27
|
3月前
|
监控 Cloud Native 容灾
核心系统转型问题之API网关在云原生分布式核心系统中的功能如何解决
核心系统转型问题之API网关在云原生分布式核心系统中的功能如何解决
|
3月前
|
资源调度 Java 调度
项目环境测试问题之Schedulerx2.0通过分布式分片任务解决单机计算瓶颈如何解决
项目环境测试问题之Schedulerx2.0通过分布式分片任务解决单机计算瓶颈如何解决
项目环境测试问题之Schedulerx2.0通过分布式分片任务解决单机计算瓶颈如何解决
|
6月前
|
NoSQL Java Redis
【分布式技术专题】「分布式技术架构」手把手教你如何开发一个属于自己的分布式锁的功能组件(二)
【分布式技术专题】「分布式技术架构」手把手教你如何开发一个属于自己的分布式锁的功能组件
45 0

热门文章

最新文章