angularJS 条件查询 品优购条件查询品牌（条件查询和列表展示公用方法解决思路 及 post请求混合参数提交方式）
Brand.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>品牌管理</title>
<meta
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
name="viewport">
<link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet" href="../css/style.css">
<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- 引入angularJS -->
<script 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">
var app = angular.module("pingyougou", [ "pagination" ]);
app.controller("brandController", function($scope, $http) {
//分页查询品牌列表
//【其实在分页插件内部就有当页面一加载就执行一遍请求的方法调用，所以我们在这块代码中不用再显示的写一遍$scope.reloadList()】 //分页控件配置
/*
currentPage: 当前页
totalItems: 总记录数
itemsPerPage: 每页记录数
perPageOptions: [10, 20, 30, 40, 50], 分页选项【就是每页显示几条记录的备选下拉】
onChange: 当页面变更后自动触发的方法 */ $scope.paginationConf = {
currentPage : 1,
totalItems : 10,
itemsPerPage : 10,
perPageOptions : [ 10, 20, 30, 40, 50 ],
onChange : function() {
$scope.reloadList();//重新加载
}
}; //有关reloadFlag的所有额外代码都是为了解决分页插件自动刷新两次问题
$scope.reloadFlag = true;
//刷新列表【因为要频繁使用，避免写很长代码，这里封装成一个方法】
$scope.reloadList = function() { if(!$scope.reloadFlag){
return;
}
//调用分页请求方法
$scope.search($scope.paginationConf.currentPage,
$scope.paginationConf.itemsPerPage); $scope.reloadFlag=false;
setTimeout(function(){
$scope.reloadFlag=true;
}, 200)
}
//定义默认值，因为前台post请求提交，后台用@RequestBody注解时，被注解的对象一定要从前台传递，即使其值为空也要写出来
$scope.searchEntity = {};
//定义搜索方法
$scope.search=function(page,size){
//注意：可以这样传参数 就是变量和对象一起放在post请求中（因为后台brand参数上加了@RequestBody注解所以这里必须用post）
$http.post("../brand/search.do?page="+page+"&size="+size,$scope.searchEntity).success(
function(response){
$scope.list = response.rows; //显示当前页数据
$scope.paginationConf.totalItems = response.total;//更新总记录数
}
);
} //分页请求方法(现在加载页面和条件查询改为都用search方法，原findpage方法就可以不用了)
$scope.findPage = function(page, size) {
$http.get("../brand/findPage.do?page=" + page + "&size=" + size)
.success(function(response) {
$scope.list = response.rows; //显示当前页数据
$scope.paginationConf.totalItems = response.total;//更新总记录数
});
} //新增方法（为了新增和修改都用同一个方法，将此方法改名为save）
$scope.save = function(){ //entity是我们在$scope中自定义的一个ang变量
//默认是新增
var methodName="add";
//不为空说明是修改
if($scope.entity.id != null){
methodName="update";
}
$http.post("../brand/"+methodName+".do?",$scope.entity).success(
function(response){
if(response.success){
$scope.reloadList();//刷新
}else{
alert(response.message);
}
}
);
} //查询实体
$scope.findOne=function(id){
$http.get("../brand/findOne.do?id="+id).success(
function(response){
//利用ang的双向绑定特性，实现前台取值的更新
$scope.entity = response;
}
);
} //用户勾选复选框
$scope.selectIds=[]; //定义一个用户勾选的id集合
//定义一个向集合中添加、删除元素的方法
$scope.updateSelection=function($event,id){
//$event.target代表当前input框的js对象,如果当前input是checkbox则其有checked属性
if($event.target.checked){
//如果点击完是选中状态则添加到集合
$scope.selectIds.push(id); //向集合中添加元素
}else{
//点击 完是未选中状态则从集中中删除当前元素
var index = $scope.selectIds.indexOf(id);//查找值的位置
$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();
}
}
);
} });
</script> </head>
<body class="hold-transition skin-red sidebar-mini" ng-app="pingyougou"
ng-controller="brandController">
<!-- .box-body -->
<div class="box-header with-border">
<h3 class="box-title">品牌管理</h3>
</div> <div class="box-body"> <!-- 数据表格 -->
<div class="table-box"> <!--工具栏-->
<div class="pull-left">
<div class="form-group form-inline">
<div class="btn-group">
<!-- ng-click="entity={}" 用于清空上次数据使每次点新建打开的都是干净的表单；因为逻辑简单所以不用封装方法，若逻辑复杂可以封装方法-->
<button type="button" class="btn btn-default" title="新建"
data-toggle="modal" data-target="#editModal" ng-click="entity={}">
<i class="fa fa-file-o"></i> 新建
</button>
<button type="button" class="btn btn-default" title="删除" ng-click="dele()">
<i class="fa fa-trash-o"></i> 删除
</button>
<button type="button" class="btn btn-default" title="刷新"
onclick="window.location.reload();">
<i class="fa fa-refresh"></i> 刷新
</button>
</div>
</div>
</div>
<div class="box-tools pull-right">
<div class="has-feedback">
品牌名称：<input ng-model="searchEntity.name"> 品牌首字母：<input ng-model="searchEntity.firstChar">
<button class="btn btn-default" ng-click="reloadList()">查询</button>
</div>
</div>
<!--工具栏/--> <!--数据列表-->
<table id="dataList"
class="table table-bordered table-striped table-hover dataTable">
<thead>
<tr>
<th class="" style="padding-right: 0px">
<input id="selall" type="checkbox" class="icheckbox_square-blue">
</th>
<th class="sorting_asc">品牌ID</th>
<th class="sorting">品牌名称</th>
<th class="sorting">品牌首字母</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="entity in list">
<!-- 为了获取当前复选框的状态，需要再加入一个参数 $event代表源，这里指当前input框 -->
<td><input type="checkbox" ng-click="updateSelection($event,entity.id)"></td>
<td>{{entity.id}}</td>
<td>{{entity.name}}</td>
<td>{{entity.firstChar}}</td>
<td class="text-center">
<!-- ng-click="findOne(entity.id) 注意：方法的参数中直接写ang变量及其属性即可不用加任何大括号 -->
<button type="button" class="btn bg-olive btn-xs"
data-toggle="modal" data-target="#editModal" ng-click="findOne(entity.id)">修改</button>
</td>
</tr> </tbody>
</table>
<!-- 分页 -->
<tm-pagination conf="paginationConf"></tm-pagination> </div>
<!-- 方便测试观察，这里打印出数组变量的内容，代码调试时使用 --> </div>
<!-- /.box-body --> <!-- 编辑窗口 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h3 id="myModalLabel">品牌编辑</h3>
</div>
<div class="modal-body">
<table class="table table-bordered table-striped" width="800px">
<tr><!-- 只要你在当前文本框中填值，那么它就会自动封装到entity变量中的name属性中，这样entity变量就自动产生了 -->
<td>品牌名称</td>
<td><input class="form-control" placeholder="品牌名称" ng-model="entity.name">
</td>
</tr>
<tr>
<td>首字母</td>
<td><input class="form-control" placeholder="首字母" ng-model="entity.firstChar"></td>
</tr>
</table>
</div>
<div class="modal-footer"><!-- 用ng-click指令绑定点击时执行ang中定义的方法 -->
<button class="btn btn-success" data-dismiss="modal"
aria-hidden="true" ng-click="save()">保存</button>
<button class="btn btn-default" data-dismiss="modal"
aria-hidden="true">关闭</button>
</div>
</div>
</div>
</div> </body>
</html>
前台思路解析：
首先在页面上添加 搜索文本框
品牌名称：<input ng-model="searchEntity.name"> 品牌首字母：<input ng-model="searchEntity.firstChar">
<button class="btn btn-default" ng-click="reloadList()">查询</button>
同时用ang的 ng-model 指令定义并绑定变量 searchEntity 及其两个属性 name 和 firstChar，
同时在 查询 按钮 上 用 ng-click 指令绑定 点击按钮触发 reloadList 方法。
然后在 控制层，修改 reloadList方法，使其调用 search 方法
//刷新列表【因为要频繁使用，避免写很长代码，这里封装成一个方法】
$scope.reloadList = function() {
//调用分页请求方法
$scope.search($scope.paginationConf.currentPage,
$scope.paginationConf.itemsPerPage);
}
//定义默认值，因为前台post请求提交，后台用@RequestBody注解时，被注解的对象一定要从前台传递，即使其值为空也要写出来
$scope.searchEntity = {};
//定义搜索方法
$scope.search=function(page,size){
//注意：可以这样传参数 就是变量和对象一起放在post请求中（因为后台brand参数上加了@RequestBody注解所以这里必须用post）
$http.post("../brand/search.do?page="+page+"&size="+size,$scope.searchEntity).success(
function(response){
$scope.list = response.rows; //显示当前页数据
$scope.paginationConf.totalItems = response.total;//更新总记录数
}
);
}
要注意，post方法提交参数时的这种混合提交方式。
Controller：
//条件查询
@RequestMapping("/search")
public PageResult search(@RequestBody TbBrand brand, int page,int size){
PageResult result = brandService.findPage(brand, page, size);
return result;
}
Service：
@Override
public PageResult findPage(TbBrand brand, int pageNum, int pageSize) {
TbBrandExample example = new TbBrandExample();
Criteria criteria = 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()+"%");
}
}
PageHelper.startPage(pageNum, pageSize);//分页
Page<TbBrand> page = (Page<TbBrand>) brandMapper.selectByExample(example);
return new PageResult(page.getTotal(), page.getResult());
}
angularJS 条件查询 品优购条件查询品牌（条件查询和列表展示公用方法解决思路 及 post请求混合参数提交方式）的更多相关文章
- angularJS批量删除 品优购删除品牌（通用复选框批量选中删除解决思路）
思路: 一步:在点击复选框时维护变量数组 在js中定义一个数组变量, 给复选框添加点击动作, 在动作中判断当前复选框是否为选中状态(即点击后复选框的是否选中状态), 若为选中状态,则向数组中添加选中的 ...
- 项目二:品优购 第二天 AngularJS使用 brand商品页面的增删改查
品优购电商系统开发 第2章 品牌管理 传智播客.黑马程序员 1.前端框架AngularJS入门 1.1 AngularJS简介 AngularJS 诞生于2009年,由Misko Hevery 等人 ...
- 品优购商城项目（二）AngularJS、自动代码生成器、select2下拉多选框
品优购商城想项目第二阶段 AngularJS.自动代码生成器.select2下拉多选框 完成了课程第三天.第四天的的任务. 1.学习了AngularJs前端的mvc分层思想,js部分分成control ...
- angularJS新增 品优购新增品牌
前台代码 brand.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...
- 品优购(IDEA版)-第二天
品优购-第2天 学习目标 目标1:运用AngularJS前端框架的常用指令 目标2:完成品牌管理的列表功能 目标3:完成品牌管理的分页列表功能 目标4:完成品牌管理的增加功能 目标5:完成品牌管理的修 ...
- 品优购商城项目（二）mybatis分页插件
品优购商城项目第二天,使用mybatis分页插件实现分页.主要实现的是 SSM整合mybatis分页. 一.引用mybatis分页插件 SqlMapConfig.xml <?xml versio ...
- 品优购(IDEA版)-第一天
# 品优购(IDEA版)-第一天 品优购IDEA版应该是2019年的新项目.目前只有视频.资料其他都还是旧的. ## 1.学习目标 1:了解电商行业特点以及理解电商的模式 2:了解整体品优购的架构特点 ...
- 品优购商城项目（六）CAS客户端与SpringSecurity集成
cas单点登录旨在解决传统登录模式session在分布式项目中共享登录信息的问题. 本文cas服务器使用 4.0版本,仅供学习参考.把 cas.war 直接部署在tomcat即可,这里有个固定的用户名 ...
- 品优购商城项目（三）安全框架SpringSecurity
品优购商城项目第三阶段 1.springSecurity的基本用法与shiro类似. 2.BCrypt加密算法比MD5更加智能和安全,能自动加盐再加密,生成的密码是60位比md5的32位更占空间(可以 ...
随机推荐
- 详解Jedis连接池报错处理
在使用Jedis连接池模式下,比较常见的报错如下: redis.clients.jedis.exceptions.JedisConnectionException:Could not get a re ...
- LeetCode 107 ——二叉树的层次遍历 II
1. 题目 2. 解答 与 LeetCode 102 --二叉树的层次遍历 类似,我们只需要将每一层的数据倒序输出即可. 定义一个存放树中数据的向量 data,一个存放树的每一层数据的向量 level ...
- 2.重新安装CM服务
步骤1.停止CM服务2.删除CM服务3.添加CM服务4.测试数据库 步骤 1.停止CM服务 2.删除CM服务 没有发现可以单独删除某一项CM服务,必须全部删除 3.添加CM服务 4.测试数据库 如果报 ...
- vue移动音乐app开发学习（二）：页面骨架的开发
本系列文章是为了记录学习中的知识点,便于后期自己观看.如果有需要的同学请登录慕课网,找到Vue 2.0 高级实战-开发移动端音乐WebApp进行观看,传送门. 完成后的页面状态以及项目结构如下: 一: ...
- 动态规划——最长上升子序列LIS及模板
LIS定义 一个数的序列bi,当b1 < b2 < … < bS的时候,我们称这个序列是上升的.对于给定的一个序列(a1, a2, …, aN),我们可以得到一些上升的子序列(ai1 ...
- UML设计（团队作业）
UML设计 一.团队信息 1.队名 读完文章再睡觉 2.团队成员的学号与姓名 学号 姓名 211606381 吴伟华(队长) 211606369 蔺皓雯 211606340 杨池宇 211606372 ...
- autoCAD 2008 Win7 64位, win8 64位 安装 燕秀工具箱 yanxiu.cui 文件下载
Win7 64位, win8 64位 安装 燕秀工具箱 , 提示没有权限. 网站上下载燕秀工具箱, 安装后. 提示权限不够. 解决办法如下; 1. CAD, 权限修改. 2. 下载 yanxiu.cu ...
- server2003 必要的系统优化和安全设置
修改远程桌面端口: Windows 2003系统中的远程终端服务是一项功能非常强大的服务,同时也成了入侵者长驻主机的通道,入侵者可以利用一些手段得到管理员账号和密码并入侵主机.下面,我们来看看如何通过 ...
- lucene 学习之基础篇
一.什么是全文索引 全文检索首先将要查询的目标文档中的词提取出来,组册索引(类似书的目录),通过查询索引达到搜索目标文档的目的,这种先建立索引,再对索引进行搜索的过程就叫全文索引. 从图可以看出做全文 ...
- File文件以及.propertites文件操作
File文件操作 在jsp和class文件中调用的相对路径不同.在jsp里,根目录是WebRoot 在class文件中,根目录是WebRoot/WEB-INF/classes 当然你也可以用Syste ...