除去品牌的得以完成金沙js8331

AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了。所以我做了一些工作来让浏览器做我想要的事。

课程目标

这里用到AngularJS四大特性之二—-双向数据绑定

  • 目标1:运用AngularJS前端框架的常用指令
  • 目标2:完成品牌管理的列表功能
  • 目标3:完成品牌管理的分页列表功能
  • 目标4:完成品牌管理的增加功能
  • 目标5:完成品牌管理的修改功能
  • 目标6:完成品牌管理的删除功能
  • 目标7:完成品牌管理的条件查询功能

注意:没写一行DOM代码!这就是ng的优点,bootstrap.css为了布局,JS代码也只是简单创建ng模块和ng控制器

1. 前端框架AngularJS入门

全选/取消全选全选和取消全选选择

1.1 AngularJS简介

  AngularJS 诞生于2009年,由Misko Hevery
等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、依赖注入等等。

金沙js8331 1

姓名

1.2 AngularJS四大特征

操作

1.2.1 MVC模式

  Angular遵循软件工程的MVC模式,并鼓励展现,数据,和逻辑组件之间的松耦合,通过依赖注入(Dependency Injection),Angular为客户端的Web应用带来了传统服务端的服务,例如独立于视图的控制。因此,后端减少了许多负担,产生了更轻的Web应用

金沙js8331 2

  Model:数据,其实就是angular变量($scope.XX)
  View:数据的呈现,Html+Directive
  Controller:操作数据,就是function,数据的增删改查

Tom

1.2.2 双向绑定

  AngularJS
是建立在这样的信念上的:即声明式编程应该用于构建用户界面以及编写软件构建,而指令式编程非常适合来表示业务逻辑。框架采用并扩展了传统HTML,通过双向的数据绑定来适应动态内容,双向的数据绑定允许模型和视图之间的自动同步。因此,AngularJS使得对DOM的操作不再重要并提升了可测试性。

金沙js8331 3

删除

1.2.3 依赖注入

  依赖注入(Dependency Injection,简称DI)是一种设计模式,指某个对象依赖的其他对象无需手工创建,只需要“吼一嗓子”,则此对象在创建时,其依赖的对象由框架来自动创建并注入进来,其实就是最少知识法则,模块中所有的service和provider两类对象,都可以根据形参名称实现DI。

Mary

1.2.4 模块化设计

高内聚低耦合法则
  1) 官方提供的模块 — ng、ngRoute、ngAnimate
  2) 用户自定义的模块 — angular.module(‘模块名’,[ ])

删除

1.3 AngularJS入门小Demo

King

1.3.1 表达式指令

<html>
<head>
<title>AngularJS入门小Demo-1表达式指令</title>
<scriptsrc="angular.min.js"></script>
</head>
<bodyng-app>
{{100+100}}
</body>
</html>

执行结果如下:

金沙js8331 4

表达式的写法是{{表达式}} 表达式可以是变量或是运算式
ng-app 指令作用是告诉子元素指令是归angularJs的,angularJs会识别的。
ng-app 指令定义了 AngularJS 应用程序的根元素。
ng-app 指令在网页加载完毕时会自动引导应用程序。

删除

1.3.2 双向绑定指令

<html>
<head>
<title>AngularJS入门小Demo-2双向绑定指令</title>
<scriptsrc="angular.min.js"></script>
</head>
<bodyng-app>
请输入你的姓名:<inputng-model="myname">
<br>
请输入你的别名:<inputng-model="myname">
<br>
{{myname}},你好!
</body>
</html>

运行效果如下:

金沙js8331 5

ng-model
指令用于绑定变量,这样用户在文本框输入的内容会绑定到变量上,而表达式可以实时地输出变量。

全选取消全选

除去品牌的得以完成金沙js8331。1.3.3 初始化指令

我们如果希望有些变量具有初始值,可以使用ng-init指令来对变量初始化。

<html>
<head>
<title>AngularJS入门小Demo-3初始化指令</title>
<scriptsrc="angular.min.js"></script>
</head>
<bodyng-appng-init="myname='陈大海'">
请输入你的姓名:<inputng-model="myname">
<br>
请输入你的别名:<inputng-model="myname">
<br>
{{myname}},你好!
</body>
</html>

运行效果如下:

金沙js8331 6

ps:AngularJs 简单实现全选,多选操作

1.3.4 控制器指令

<html>
<head>
<title>AngularJS入门小Demo-4控制器指令</title>
<scriptsrc="angular.min.js"></script>
<script>
varapp=angular.module('myApp',[]);//定义了一个名叫myApp的模块
//创建控制器
app.controller('myController',function($scope){
$scope.add=function(){
returnparseInt+parseInt;
}
});
</script>
</head>
<bodyng-app="myApp"ng-controller="myController">
x:<inputng-model="x">
y:<inputng-model="y">
运算结果:{{add()}}
</body>
</html>

运行结果如下:

金沙js8331 7

ng-controller 用于指定所使用的控制器。
理解$scope$scope的使用贯穿整个 AngularJS App
应用,它与数据模型相关联,同时也是表达式执行的上下文。有了$scope就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新$scope,同样的$scope发生改变时也会立刻重新渲染视图。

很多时候我们在处理CURD的时候需要实现批量操作数据,这时候就必须使用多选操作。

1.3.5 事件指令

<html>
<head>
<title>AngularJS入门小Demo-5事件指令</title>
<scriptsrc="angular.min.js"></script>
<script>
varapp=angular.module('myApp',[]);//定义了一个名叫myApp的模块
//创建控制器$scope.z
app.controller('myController',function($scope){
$scope.add=function(){
$scope.z=parseInt+parseInt;
}
});
</script>
</head>
<bodyng-app="myApp"ng-controller="myController">
x:<inputng-model="x">
y:<inputng-model="y">
<buttonng-click="add()">运算</button>
结果:{{z}}
</body>
</html>

运行结果:

金沙js8331 8

ng-click 是最常用的单击事件指令,再点击时触发控制器的某个方法。

Angular
中实现如下(当然还有很多种比笔者写的更好的方法,这里只是简单的实现。)

1.3.6 循环数组

<html>
<head>
<title>AngularJS入门小Demo-6循环数组</title>
<scriptsrc="angular.min.js"></script>
<script>
varapp=angular.module('myApp',[]);//定义了一个名叫myApp的模块
//创建控制器$scope.z
app.controller('myController',function($scope){
$scope.list=[100,192,203,434];//定义数组
});
</script>
</head>
<bodyng-app="myApp"ng-controller="myController">
<table>
<trng-repeat="xinlist">
<td>{{x}}</td>
</tr>
</table>
</body>
</html>

运行结果如下:

金沙js8331 9

这里的ng-repeat指令用于循环数组变量。

HTML:

1.3.7 循环对象数组

<html>
<head>
<title>AngularJS入门小Demo-7循环对象数组</title>
<scriptsrc="angular.min.js"></script>
<script>
varapp=angular.module('myApp',[]);//定义了一个名叫myApp的模块
//创建控制器$scope.z
app.controller('myController',function($scope){
$scope.list=[
{name:'张三',shuxue:99,yuwen:93},
{name:'李四',shuxue:88,yuwen:87},
{name:'王五',shuxue:77,yuwen:56}
];//定义数组
});
</script>
</head>
<bodyng-app="myApp"ng-controller="myController">
<table>
<tr>
<td>姓名</td>
<td>数学</td>
<td>语文</td>
</tr>
<trng-repeat="entityinlist">
<td>{{entity.name}}</td>
<td>{{entity.shuxue}}</td>
<td>{{entity.yuwen}}</td>
</tr>
</table>
</body>
</html>

运行结果如下:

金沙js8331 10

{{choseArr}}

1.3.8 内置服务

我们的数据一般都是从后端获取的,那么如何获取数据呢?我们一般使用内置服务$http来实现。注意:以下代码需要在tomcat中运行。

<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>AngularJS入门小Demo-8内置服务</title>
<scriptsrc="angular.min.js"></script>
<script>
varapp=angular.module('myApp',[]);//定义了一个名叫myApp的模块
//定义控制器
app.controller('myController',function($scope,$http){
$scope.findAll=function(){
$http.get('data.json').success(
function(response){
$scope.list=response;
}
);
}
});
</script>
</head>
<bodyng-app="myApp"ng-controller="myController"ng-init="findAll()">
<table>
<tr>
<td>姓名</td>
<td>数学</td>
<td>语文</td>
</tr>
<trng-repeat="entityinlist">
<td>{{entity.name}}</td>
<td>{{entity.shuxue}}</td>
<td>{{entity.yuwen}}</td>
</tr>
</table>
</body>
</html>

建立文件 data.json,注意json文件格式,key必须有双引号,末尾没有逗号。

[
{"name":"张三","shuxue":99,"yuwen":93},
{"name":"李四","shuxue":88,"yuwen":87},
{"name":"王五","shuxue":77,"yuwen":56},
{"name":"赵六","shuxue":59,"yuwen":70}
]

运行结果如下:

金沙js8331 11

全选:

2. 品牌列表的实现

{{z}}

2.1 需求分析

实现品牌列表的查询(不用分页和条件查询)效果如下:

金沙js8331 12

删除

2.2 前端代码

JS代码:

2.2.1 拷贝页面资源

将“资源/静态原型/运营商管理后台”下的页面资源拷贝到pinyougou-manager-web下:

金沙js8331 13
其中plugins文件夹中包括了angularjs、bootstrap、jQuery等常用前端库,我们将在项目中用到。

$scope.tesarry=[‘1‘,‘2‘,‘3‘,‘4‘,‘5‘];//初始化数据$scope.choseArr=[];//定义数组用于存放前端显示var str="";//var flag=‘‘;//是否点击了全选,是为a$scope.x=false;//默认未选中$scope.all= function {$scope.x=true;$scope.choseArr=v;}else{$scope.x=false;$scope.choseArr=[""];}flag=‘a‘;};$scope.chk= function  {//单选或者多选if {//在全选的基础上操作str = $scope.choseArr.join + ‘,‘;}if  {//选中str = str + z + ‘,‘;} else {str = str.replace;//取消选中}$scope.choseArr=(str.substr.split;};$scope.delete= function () {// 操作CURDif($scope.choseArr[0]==""||$scope.choseArr.length==0){//没有选择一个的时候提示alertreturn;};for(var i=0;i

2.2.2 引入JS

修改brand.html ,引入JS

<!--引入angularjs文件-->
<scripttype="text/javascript"src="../plugins/angularjs/angular.min.js"></script>

2.2.3 指定模块和控制器

<bodyclass="hold-transitionskin-redsidebar-mini"ng-app="pinyougou"ng-controller="brandController">

ng-app 指令中定义的就是模块的名称。
ng-controller 指令用于为你的应用添加的控制器。
在控制器中,你可以编写代码,制作函数和变量,并使用 scope 对象来访问。

2.2.4 编写JS代码

<scripttype="text/javascript">
varapp=angular.module('pinyougou',[]);//定义品优购模块
app.controller('brandController',function($scope,$http){//定义控制器
//读取品牌列表数据绑定到表单中
$scope.finAll=function(){
$http.get('../brand/findAll.do').success(
function{
$scope.list=response;
}
);
}
});
</script>

2.2.5 循环显示表格数据

<!--数据列表-->
<tableid="dataList"class="tabletable-borderedtable-stripedtable-hoverdataTable">
<thead>
<tr>
<thclass=""style="padding-right:0px">
<inputid="selall"type="checkbox"class="icheckbox_square-blue">
</th>
<thclass="sorting_asc">品牌ID</th>
<thclass="sorting">品牌名称</th>
<thclass="sorting">品牌首字母</th>
<thclass="text-center">操作</th>
</tr>
</thead>
<tbody>
<trng-repeat="entityinlist">
<td><inputtype="checkbox"></td>
<td>{{entity.id}}</td>
<td>{{entity.name}}</td>
<td>{{entity.firstChar}}</td>
<tdclass="text-center">
<buttontype="button"class="btnbg-olivebtn-xs"data-toggle="modal"data-target="#editModal">修改</button>
</td>
</tr>
</tbody>
</table>

2.2.6 初始化调用

<bodyclass="hold-transitionskin-redsidebar-mini"ng-app="pinyougou"ng-controller="brandController"ng-init="findAll()">

3. 品牌列表分页的实现

3.1 需求分析

在品牌管理下方放置分页栏,实现品牌分页功能

金沙js8331 14

3.2 后端代码

后端给前端的数据有:
1)total:总记录数。
2)rows:当前页记录的集合。

json数据格式:{"total":100,"rows":[{"id":1,"name":"张三"},{"id":2,"name":"李四"}]}
方法一:在后端将查询到的数据封装成Map集合
Mapmap=newHashMap();
map.put("total",1000);
map.put("rows",list);
returnmap;
fastjson会自动转换Map集合数据。
方法二:创建分页查询时返回的结果类来进行接收,该类包含total和rows属性。

3.2.1 将从数据库查询的分页结果封装实体

在 pinyougou-pojo 工程中创建
entity包,用于存放通用实体类,创建类PageResult

packageentity;

importjava.io.Serializable;
importjava.util.List;

/**
*数据库分页查询时返回的结果类
*@authorchenmingjun
*@date2019年1月14日
*/
publicclassPageResultimplementsSerializable{

privateLongtotal;//总记录数

privateList<?>rows;//当前页记录的集合

privatestaticfinallongserialVersionUID=1L;

publicPageResult(){
super();
}

publicPageResult(Longtotal,List<?>rows){
super();
this.total=total;
this.rows=rows;
}

publicLonggetTotal(){
returntotal;
}

publicvoidsetTotal(Longtotal){
this.total=total;
}

publicList<?>getRows(){
returnrows;
}

publicvoidsetRows(List<?>rows){
this.rows=rows;
}

@Override
publicStringtoString(){
return"EasyUIDataGridResult[total="+total+",rows="+rows+"]";
}
}

3.2.2 服务接口层

在 pinyougou-sellergoods-interface 的 BrandService.java 增加方法定义

/**
*分页查询全部品牌列表
*@parampageNum当前页的页码
*@parampageSize每页要显示的记录数
*@returnPageResult
*/
PageResultfindPage(IntegerpageNum,IntegerpageSize);

3.2.3 服务实现层

在 pinyougou-sellergoods-service 的 BrandServiceImpl.java 中实现该方法

@Override
publicPageResultfindPage(IntegerpageNum,IntegerpageSize){
//设置分页信息,使用PageHelper分页插件
PageHelper.startPage(pageNum,pageSize);
//执行查询,不需要设置查询条件,即查询所有
TbBrandExampleexample=newTbBrandExample();
List<TbBrand>list=brandMapper.selectByExample;
//取出分页信息,分页后,实际返回的结果list类型是Page<E>,如果想取出分页信息
//方式一:需要强制转换为Page<E>后,使用Page对象进行处理
//Page<TbBrand>page=(Page<TbBrand>)list;
//returnnewPageResult(page.getTotal(),page.getResult;
//方式二:我们使用PageInfo对象对查询出来的结果进行包装,由于PageInfo中包含了非常全面的分页属性,推荐使用方式二
PageInfo<TbBrand>pageInfo=newPageInfo<>;
//创建分页查询时返回的结果类对象
PageResultresult=newPageResult();
//给返回的查询结果对象设置值
result.setTotal(pageInfo.getTotal;
result.setRows;
returnresult;
}

PageHelper为MyBatis分页插件。

3.2.4 控制层

在 pinyougou-manager-web 工程的 BrandController.java 新增方法

@RequestMapping("/findPage")
publicPageResultfindPage(intpage,introws){
PageResultresult=brandService.findPage(page,rows);
returnresult;
}

3.3 前端代码

前端给后端的数据有:
1)page:当前页的页码,从1开始。
2)rows:每页要显示的记录数。
注意:此处的rows与上处的rows的含义区别。

3.3.1 HTML

在brand.html引入分页组件

<!--分页组件开始-->
<linkrel="stylesheet"href="../plugins/angularjs/pagination.css">
<scriptsrc="../plugins/angularjs/pagination.js"></script>
<!--分页组件结束-->

引入分页模块

varapp=angular.module('pinyougou',['pagination']);//定义品优购模块、引入分页模块

页面的表格下放置分页控件

<!--分页控件-->
<tm-paginationconf="paginationConf"></tm-pagination>

3.3.2 JS代码

在控制器 brandController 中添加如下代码

//分页控件初始化配置
$scope.paginationConf={
currentPage:1,//currentPage:当前页
totalItems:10,//totalItems:总记录数
itemsPerPage:10,//itemsPerPage:每页记录数
perPageOptions:[10,20,30,40,50],//perPageOptions:分页选项
onChange:function(){//onChange:当页码变更后自动触发的方法
$scope.reloadList();
}
};

//刷新列表方法
$scope.reloadList=function(){
$scope.findPage($scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage);
}

//分页方法,作用是请求后端数据
$scope.findPage=function(page,rows){//方法名findPage可以自定义
$http.get('../brand/findPage.do?page='+page+'&rows='+rows).success(
function{//注意:请求参数中的rows与响应数据的rows的区别
$scope.list=response.rows;//显示当前页数据
$scope.paginationConf.totalItems=response.total;//更新总记录数
}
);
}

在页面的body元素上去掉ng-init指令的调用。

4. 增加品牌

4.1 需求分析

实现品牌增加功能

金沙js8331 15

4.2 后端代码

4.2.1 服务接口层

在 pinyougou-sellergoods-interface 的 BrandService.java 新增方法定义

/**
*增加品牌
*@parambrand
*/
voidadd(TbBrandbrand);

4.2.2 服务实现层

在 com.pinyougou.sellergoods.service.impl 的 BrandServiceImpl.java
实现该方法

@Override
publicvoidadd(TbBrandbrand){
//判断品牌名称是否重复:方法一:代码逻辑上判断,如下;方法二:数据库设置品牌表的name属性为唯一约束
TbBrandExampleexample=newTbBrandExample();
Criteriacriteria=example.createCriteria();
criteria.andNameEqualTo(brand.getName;
List<TbBrand>list=brandMapper.selectByExample;
//判断查询结果
if(list==null||list.size()==0){
//品牌不存在,则新增品牌
brandMapper.insert;
}else{
//品牌已存在,则抛出自定义异常信息“品牌已存在”
}
}

4.2.3 将控制层执行的结果封装实体

在 pinyougou-pojo 的 entity包下创建类Result.java

/**
*自定义的返回结果
*@authorchenmingjun
*@date2019年1月15日
*/
publicclassResultimplementsSerializable{

privatestaticfinallongserialVersionUID=1L;

privateBooleansuccess;//是否成功

privateStringmessage;//返回信息

publicResult(Booleansuccess,Stringmessage){
super();
this.success=success;
this.message=message;
}

publicBooleangetSuccess(){
returnsuccess;
}

publicvoidsetSuccess(Booleansuccess){
this.success=success;
}

publicStringgetMessage(){
returnmessage;
}

publicvoidsetMessage(Stringmessage){
this.message=message;
}

@Override
publicStringtoString(){
return"Result[success="+success+",message="+message+"]";
}
}

4.2.4 控制层

在 pinyougou-manager-web 的 BrandController.java 中新增方法

@RequestMapping("/add")
publicResultadd(@RequestBodyTbBrandbrand){
try{
brandService.add;
returnnewResult(true,"增加品牌成功");
}catch(Exceptione){
e.printStackTrace();
returnnewResult(false,"增加品牌失败");
}
}

4.3 前端代码

4.3.1 JS代码

//新增品牌方法
$scope.save=function(){
$http.post('../brand/add.do',$scope.entity).success(
function{
if(response.success){
$scope.reloadList();//刷新列表方法
}else{
alert(response.message);
}
}
);
}

4.3.2 HTML

绑定表单元素,我们用ng-model指令,绑定按钮的单击事件我们用ng-click指令

<divclass="modal-content">
<divclass="modal-header">
<buttontype="button"class="close"data-dismiss="modal"aria-hidden="true">×</button>
<h3id="myModalLabel">品牌编辑</h3>
</div>
<divclass="modal-body">
<tableclass="tabletable-borderedtable-striped"width="800px">
<tr>
<td>品牌名称</td>
<td><inputclass="form-control"placeholder="品牌名称"ng-model="entity.name"></td>
</tr>
<tr>
<td>首字母</td>
<td><inputclass="form-control"placeholder="首字母"ng-model="entity.firstChar"></td>
</tr>
</table>
</div>
<divclass="modal-footer">
<buttonclass="btnbtn-success"data-dismiss="modal"aria-hidden="true"ng-click="save()">保存</button>
<buttonclass="btnbtn-default"data-dismiss="modal"aria-hidden="true">关闭</button>
</div>
</div>

为了每次打开窗口没有遗留上次的数据,我们可以修改新建按钮,对entity变量进行清空操作

<buttontype="button"class="btnbtn-default"title="新建"data-toggle="modal"data-target="#editModal"ng-click="entity={}">
<iclass="fafa-file-o"></i>新建
</button>

5. 修改品牌

5.1 需求分析

点击列表的修改按钮,弹出窗口,修改数据后点“保存”执行保存操作

金沙js8331 16

5.2 后端代码

5.2.1 服务接口层

在 pinyougou-sellergoods-interface 的 BrandService.java 新增方法定义

/**
*根据品牌ID查询品牌实体
*@paramid
*@return
*/
TbBrandfindOne;

/**
*修改品牌
*@parambrand
*/
voidupdate(TbBrandbrand);

5.2.2 服务实现层

在 pinyougou-sellergoods-service 的 BrandServiceImpl.java 新增方法实现

@Override
publicTbBrandfindOne{
TbBrandbrand=brandMapper.selectByPrimaryKey;
returnbrand;
}

@Override
publicvoidupdate(TbBrandbrand){
brandMapper.updateByPrimaryKey;
}

5.2.3 控制层

在 pinyougou-manager-web 的 BrandController.java 新增方法

@RequestMapping("/findOne")
publicTbBrandfindOne{
TbBrandbrand=brandService.findOne;
returnbrand;
}

@RequestMapping("/update")
publicResultupdate(@RequestBodyTbBrandbrand){
try{
brandService.update;
returnnewResult(true,"修改品牌成功");
}catch(Exceptione){
e.printStackTrace();
returnnewResult(false,"修改品牌失败");
}
}

5.3 前端代码

5.3.1 实现数据查询

增加JS代码

//根据品牌ID查找某一个品牌实体方法,用于回显数据
$scope.findOne=function{
$http.get('../brand/findOne.do?id='+id).success(
function{
$scope.entity=response;
}
);
}

修改列表中的“修改”按钮,调用此方法执行查询实体的操作

<tdclass="text-center">
<buttontype="button"class="btnbg-olivebtn-xs"data-toggle="modal"data-target="#editModal"ng-click="findOne(entity.id)">修改</button>
</td>

5.3.2 保存数据

修改JS的save方法

//新增/修改品牌方法
$scope.save=function(){
//方式一:可以在前端判断是新增方法还是修改方法,方式二:可以在后端判断是新增方法还是修改方法
varmethodName='add';
if($scope.entity.id!=null){//如果有ID
methodName='update';//则执行修改方法
}
$http.post('../brand/'+methodName+'.do',$scope.entity).success(
function{
if(response.success){
$scope.reloadList();//刷新列表方法
}else{
alert(response.message);
}
}
);
}

6. 删除品牌

6.1 需求分析

点击列表前的复选框,点击删除按钮,删除选中的品牌。

6.2 后端代码

6.2.1 服务接口层

在 pinyougou-sellergoods-interface 的 BrandService.java 接口定义方法

/**
*根据品牌ID批量删除品牌
*@paramids
*/
voiddelete(Long[]ids);

6.2.2 服务实现层

在 pinyougou-sellergoods-service 的 BrandServiceImpl.java 实现该方法

@Override
publicvoiddelete(Long[]ids){
for(Longid:ids){
brandMapper.deleteByPrimaryKey;
}
}

6.2.3 控制层

在 pinyougou-manager-web 的 BrandController.java 中增加方法

@RequestMapping("/delete")
publicResultdelete(Long[]ids){
try{
brandService.delete;
returnnewResult(true,"删除品牌成功");
}catch(Exceptione){
e.printStackTrace();
returnnewResult(false,"删除品牌失败");
}
}

6.3 前端代码

6.3.1 JS代码

主要思路:我们需要定义一个用于存储选中ID的数组,当我们点击复选框后判断是选择还是取消选择,如果是选择就加到数组中,如果是取消选择就从数组中移除。再点击删除按钮时需要用到这个存储了ID的数组。
这里我们补充一下JS的关于数组操作的知识
  数组的push方法:向数组中添加元素
  数组的splice方法:从数组的指定位置移除指定个数的元素
,参数1为移除元素的开始位置,参数2为移除的个数
  复选框的checked属性:用于判断是否被选中

//获取用户点击品牌ID的方法
$scope.selectIds=[];//用户勾选的ID集合
$scope.updateSelection=function($event,id){
if($event.target.checked){//被勾选的元素
$scope.selectIds.push;//才向数组中添加
}else{
varindex=$scope.selectIds.indexOf;//查找数组中元素的指定位置,索引从0开始
$scope.selectIds.splice(index,1);//参数1为移除元素的开始位置,参数2为移除的个数
}
}

//删除品牌的方法
$scope.dele=function(){
$http.get('../brand/delete.do?ids='+$scope.selectIds).success(
function{
if(response.success){
$scope.reloadList();//刷新列表方法
}else{
alert(response.message);
}
}
);
}

6.3.2 HTML

修改列表的复选框

<td><inputtype="checkbox"ng-click="updateSelection($event,entity.id)"></td>

修改删除按钮

<buttontype="button"class="btnbtn-default"title="删除"ng-click="dele()">
<iclass="fafa-trash-o"></i>删除
</button>

7. 品牌分页条件查询的实现

7.1 需求分析

实现品牌条件查询功能,输入品牌名称、首字母后查询,并分页。

金沙js8331 17

7.2 后端代码

7.2.1 服务接口层

在 pinyougou-sellergoods-interface 工程的 BrandService.java
方法增加方法定义

/**
*分页条件查询全部品牌列表
*@parambrand品牌实体类
*@parampageNum当前页的页码
*@parampageSize每页要显示的记录数
*@returnPageResult
*/
PageResultfindPage(TbBrandbrand,IntegerpageNum,IntegerpageSize);

7.2.2 服务实现层

在pinyougou-sellergoods-service工程BrandServiceImpl.java实现该方法

@Override
publicPageResultfindPage(TbBrandbrand,IntegerpageNum,IntegerpageSize){
//设置分页信息,使用PageHelper分页插件
PageHelper.startPage(pageNum,pageSize);
//执行查询,需要设置查询条件,即条件查询
TbBrandExampleexample=newTbBrandExample();
Criteriacriteria=example.createCriteria();
if(brand!=null){
if(brand.getName()!=null&&brand.getName().length()>0){
criteria.andNameLike("%"+brand.getName()+"%");
}
if(brand.getFirstChar()!=null&&brand.getFirstChar().length()>0){
criteria.andFirstCharLike("%"+brand.getFirstChar()+"%");
}
}
List<TbBrand>list=brandMapper.selectByExample;
//取出分页信息,分页后,实际返回的结果list类型是Page<E>,如果想取出分页信息
//方式一:需要强制转换为Page<E>后,使用Page对象进行处理
//Page<TbBrand>page=(Page<TbBrand>)list;
//returnnewPageResult(page.getTotal(),page.getResult;
//方式二:我们使用PageInfo对象对查询出来的结果进行包装,由于PageInfo中包含了非常全面的分页属性,推荐使用方式二
PageInfo<TbBrand>pageInfo=newPageInfo<>;
//创建分页查询时返回的结果类对象
PageResultresult=newPageResult();
//给返回的查询结果对象设置值
result.setTotal(pageInfo.getTotal;
result.setRows;
returnresult;
}

7.2.3 控制层

在 pinyougou-manager-web 的 BrandController.java 增加方法

@RequestMapping("/search")
publicPageResultsearch(@RequestBodyTbBrandbrand,Integerpage,Integerrows){
PageResultresult=brandService.findPage(brand,page,rows);
returnresult;
}

7.3 前端代码

JS中添加品牌条件查询的方法

$scope.searchEntity={};//初始化搜索对象
//品牌条件查询的方法
$scope.search=function(page,rows){
$http.post('../brand/search.do?page='+page+'&rows='+rows,$scope.searchEntity).success(
function{//注意:请求参数中的rows与响应数据的rows的区别
$scope.list=response.rows;//显示当前页数据
$scope.paginationConf.totalItems=response.total;//更新总记录数
}
);
}

修改 reloadList() 方法

//刷新列表方法
$scope.reloadList=function(){
$scope.search($scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage);
}

将查询按钮绑定的方法search()修改为reloadList()方法

<divclass="has-feedback">
品牌名称:<inputng-model="searchEntity.name">&emsp;品牌首字母:<inputng-model="searchEntity.firstChar">
<buttonclass="btnbtn-default"ng-click="reloadList()">查询</button>
</div>

8. 附录

完整的前端JS代码 brand.html
文件位置:/pinyougou-manager-web/src/main/webapp/admin/brand.html

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<title>品牌管理</title>
<metacontent="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"name="viewport">
<linkrel="stylesheet"href="../plugins/bootstrap/css/bootstrap.min.css">
<linkrel="stylesheet"href="../plugins/adminLTE/css/AdminLTE.css">
<linkrel="stylesheet"href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<linkrel="stylesheet"href="../css/style.css">
<scriptsrc="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<scriptsrc="../plugins/bootstrap/js/bootstrap.min.js"></script>
<!--引入angularjs文件-->
<scripttype="text/javascript"src="../plugins/angularjs/angular.min.js"></script>
<!--分页组件开始-->
<linkrel="stylesheet"href="../plugins/angularjs/pagination.css">
<scriptsrc="../plugins/angularjs/pagination.js"></script>
<!--分页组件结束-->
<scripttype="text/javascript">
varapp=angular.module('pinyougou',[]);//定义品优购模块
app.controller('brandController',function($scope,$http){//定义控制器
//读取品牌列表数据绑定到表单中
$scope.finAll=function(){
$http.get('../brand/findAll.do').success(
function(response){
$scope.list=response;
}
);
}
});
//分页控件初始化配置
$scope.paginationConf={
currentPage:1,//currentPage:当前页
totalItems:10,//totalItems:总记录数
itemsPerPage:10,//itemsPerPage:每页记录数
perPageOptions:[10,20,30,40,50],//perPageOptions:分页选项
onChange:function(){//onChange:当页码变更后自动触发的方法
$scope.reloadList();
}
};

//刷新列表方法
$scope.reloadList=function(){
$scope.search($scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage);
}

//分页方法,作用是请求后端数据
$scope.findPage=function(page,rows){//方法名findPage可以自定义
$http.get('../brand/findPage.do?page='+page+'&rows='+rows).success(
function(response){//注意:请求参数中的rows与响应数据的rows的区别
$scope.list=response.rows;//显示当前页数据
$scope.paginationConf.totalItems=response.total;//更新总记录数
}
);
}

//新增/修改品牌方法
$scope.save=function(){
//方式一:可以在前端判断是新增方法还是修改方法,方式二:可以在后端判断是新增方法还是修改方法
varmethodName='add';
if($scope.entity.id!=null){//如果有ID
methodName='update';//则执行修改方法
}
$http.post('../brand/'+methodName+'.do',$scope.entity).success(
function(response){
if(response.success){
$scope.reloadList();//刷新列表方法
}else{
alert(response.message);
}
}
);
}

//根据品牌ID查找某一个品牌实体方法,用于回显数据
$scope.findOne=function(id){
$http.get('../brand/findOne.do?id='+id).success(
function(response){
$scope.entity=response;
}
);
}

//获取用户点击品牌ID的方法
$scope.selectIds=[];//用户勾选的ID集合
$scope.updateSelection=function($event,id){
if($event.target.checked){//被勾选的元素
$scope.selectIds.push;//才向数组中添加
}else{
varindex=$scope.selectIds.indexOf;//查找数组中元素的指定位置,索引从0开始
$scope.selectIds.splice(index,1);//参数1为移除元素的开始位置,参数2为移除的个数
}
}

//删除品牌的方法
$scope.dele=function(){
$http.get('../brand/delete.do?ids='+$scope.selectIds).success(
function(response){
if(response.success){
$scope.reloadList();//刷新列表方法
}else{
alert(response.message);
}
}
);
}

$scope.searchEntity={};//初始化搜索对象
//品牌条件查询的方法
$scope.search=function(page,rows){
$http.post('../brand/search.do?page='+page+'&rows='+rows,$scope.searchEntity).success(
function(response){//注意:请求参数中的rows与响应数据的rows的区别
$scope.list=response.rows;//显示当前页数据
$scope.paginationConf.totalItems=response.total;//更新总记录数
}
);
}
</script>
</head>
<bodyclass="hold-transitionskin-redsidebar-mini"ng-app="pinyougou"ng-controller="brandController">
<!--.box-body-->
<divclass="box-headerwith-border">
<h3class="box-title">品牌管理</h3>
</div>

<divclass="box-body">
<!--数据表格-->
<divclass="table-box">

<!--工具栏-->
<divclass="pull-left">
<divclass="form-groupform-inline">
<divclass="btn-group">
<buttontype="button"class="btnbtn-default"title="新建"data-toggle="modal"data-target="#editModal"ng-click="entity={}">
<iclass="fafa-file-o"></i>新建
</button>
<buttontype="button"class="btnbtn-default"title="删除"ng-click="dele()">
<iclass="fafa-trash-o"></i>删除
</button>
<buttontype="button"class="btnbtn-default"title="刷新"onclick="window.location.reload();">
<iclass="fafa-refresh"></i>刷新
</button>
</div>
</div>
</div>
<divclass="box-toolspull-right">
<divclass="has-feedback">
品牌名称:<inputng-model="searchEntity.name">&emsp;品牌首字母:<inputng-model="searchEntity.firstChar">
<buttonclass="btnbtn-default"ng-click="reloadList()">查询</button>
</div>
</div>
<!--工具栏/-->

<!--数据列表-->
<tableid="dataList"class="tabletable-borderedtable-stripedtable-hoverdataTable">
<thead>
<tr>
<thclass=""style="padding-right:0px">
<inputid="selall"type="checkbox"class="icheckbox_square-blue"></th>
<thclass="sorting_asc">品牌ID</th>
<thclass="sorting">品牌名称</th>
<thclass="sorting">品牌首字母</th>
<thclass="text-center">操作</th>
</tr>
</thead>
<tbody>
<trng-repeat="entityinlist">
<td><inputtype="checkbox"ng-click="updateSelection($event,entity.id)"></td>
<td>{{entity.id}}</td>
<td>{{entity.name}}</td>
<td>{{entity.firstChar}}</td>
<tdclass="text-center">
<buttontype="button"class="btnbg-olivebtn-xs"data-toggle="modal"data-target="#editModal"ng-click="findOne(entity.id)">修改</button>
</td>
</tr>
</tbody>
</table>
<!--数据列表/-->
<!--{{selectIds}}-->
<!--分页控件-->
<tm-paginationconf="paginationConf"></tm-pagination>
</div>
<!--数据表格/-->

</div>
<!--/.box-body-->
<!--编辑窗口-->
<divclass="modalfade"id="editModal"tabindex="-1"role="dialog"aria-labelledby="myModalLabel"aria-hidden="true">
<divclass="modal-dialog">
<divclass="modal-content">
<divclass="modal-header">
<buttontype="button"class="close"data-dismiss="modal"aria-hidden="true">×</button>
<h3id="myModalLabel">品牌编辑</h3>
</div>
<divclass="modal-body">
<tableclass="tabletable-borderedtable-striped"width="800px">
<tr>
<td>品牌名称</td>
<td><inputclass="form-control"placeholder="品牌名称"ng-model="entity.name"></td>
</tr>
<tr>
<td>首字母</td>
<td><inputclass="form-control"placeholder="首字母"ng-model="entity.firstChar"></td>
</tr>
</table>
</div>
<divclass="modal-footer">
<buttonclass="btnbtn-success"data-dismiss="modal"aria-hidden="true"ng-click="save()">保存</button>
<buttonclass="btnbtn-default"data-dismiss="modal"aria-hidden="true">关闭</button>
</div>
</div>
</div>
</div>
</body>
</html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注