目录
- 高级查询
- 页面准备
- 下拉框显示文章类型
- ArticleController
- 用jstl和el表达式取值展示
- 高级查询参数
- ArticleQuery
- 高级查询页面发送请求
- 导入jquery.jdirk.js
- 在jquery下引用
- 绑定按钮发送请求
- 高级查询sql
- 绑定删除事件
- 绑定事件拿到标签id值
- 准备模态框来自xmind
- 弹出删除模态框
- 绑定删除模态框确定按钮发送删除请求
- 后台删除实现
- ArticleController
- AiticleMapper.xml
- 删除完成
- 封装AjaxResult
- ArticleController
- 前台处理
- 添加或修改弹出模态框
- 模态框准备-来自xmind
- 添加和修改按钮加上id
- 分别绑定事件
- 添加完成
- 请求路径
- ArticleController
- ArticleMapper.xml
- jsp
- 修改：获取回显数据
- 回显数据
- 修改后台完成
- 设置隐藏域id
- 添加操作中清空隐藏域id
- ArticleController
- ArticleMapper.xml
- tips：获取模态框内所有数据的方法
高级查询
页面准备
copy xmind高级查询代码到文章页面表格上方
<!-- 高级查询 -->
<div class="row app-title">
<div class="col-md-12">
<!-- 表单 -->
<form id="queryForm" class="form-inline">
<div class="form-group">
<label for="title">标题：</label>
<input type="text" class="form-control" name="title" id="title">
</div>
<div class="form-group" style="margin-left: 20px">
<label>文章类型：</label>
<select name="typeId" class="form-control" id="typeId">
<option value="">请选择</option>
<option value="1">技术文章</option>
<option value="2">行业新闻</option>
<option value="3">学科咨询</option>
</select>
</div>
<div class="form-group" style="margin-left: 20px">
<label>是否启用：</label>
<select name="enable" class="form-control" id="enable">
<option value="">请选择</option>
<option value="1">启用</option>
<option value="0">禁用</option>
</select>
</div>
<button type="button" id="queryButton" class="btn btn-success" style="margin-left: 20px">查询</button>
</form>
</div>
</div>
下拉框显示文章类型
ArticleController
/**
* @Description:跳转到后台文章展示页
*/
@RequestMapping("/index")
public String index(Map<String, Object> map){
// 查询到文章类型
List<ArticleType> list = typeService.findAll();
// 把数据放入map中相当于把数据放入request域，然后前台EL表达式去取
map.put("list", list);
return "article/article";
}
用jstl和el表达式取值展示
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<div class="form-group" style="margin-left: 20px">
<label>文章类型：</label>
<select name="typeId" class="form-control" id="typeId">
<option value="">请选择</option>
<!--
items:循环的对象
var: 每次循环的结果
-->
<c:forEach items="${list}" var="type">
<option value="${type.id }">${type.name }</option>
</c:forEach>
</select>
</div>
高级查询参数
<!-- 高级查询 -->
<div class="row app-title">
<div class="col-md-12">
<!-- 表单 -->
<form id="queryForm" class="form-inline">
<div class="form-group">
<label for="title">标题：</label>
<input type="text" class="form-control" name="title" id="title">
</div>
<div class="form-group" style="margin-left: 20px">
<label>文章类型：</label>
<select name="typeId" class="form-control" id="typeId">
<option value="">请选择</option>
<!--
items:循环的对象
var: 每次循环的结果
-->
<c:forEach items="${list}" var="type">
<option value="${type.id }">${type.name }</option>
</c:forEach>
</select>
</div>
<div class="form-group" style="margin-left: 20px">
<label>是否启用：</label>
<select name="enable" class="form-control" id="enable">
<option value="">请选择</option>
<option value="1">启用</option>
<option value="0">禁用</option>
</select>
</div>
<button type="button" id="queryButton" class="btn btn-success" style="margin-left: 20px">查询</button>
</form>
</div>
</div>
ArticleQuery
@AllArgsConstructor
@NoArgsConstructor
@Data
public class ArticleQuery extends PageQuery{
// 标题 String
private String title;
// 文章类型id
private Long typeId;
// 是否启用 SpringMVC会自动转Boolean值和0、1
private Boolean enable;
}
高级查询页面发送请求
导入jquery.jdirk.js
方便在页面中整体并动态地取值
/cms02/src/main/WebContent/static/system/js/jquery.jdirk.js
在jquery下引用
<script src="/static/system/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/static/system/js/jquery.jdirk.js"></script>
<script type="text/javascript" src="/static/system/js/form-load.js"></script>
<script type="text/javascript" src="/static/system/js/jquery-form.js"></script>
绑定按钮发送请求
// 高级查询绑定事件
$("#queryButton").click(function(){
// 获取参数 jquery.jdirk.js提供的方法
var dataForm = $("#queryForm").serializeObject();
// 发送请求 相当于发送的是gridmanager的url，即增加dataForm参数发送GridManager异步请求
GridManager.setQuery('demo-ajaxPageCode', dataForm);
});
高级查询sql
<!-- mybatis通过getBegin方法拿到begin当做一个属性的值 -->
<select id="findAll" resultType="article">
select * from t_article
<include refid="query"></include>
limit #{begin}, #{pageSize}
</select>
<!-- Integer findCount(ArticleQuery aq); -->
<select id="findCount" resultType="int">
select count(id) from t_article
<include refid="query"></include>
</select>
<!-- sql片段 -->
<sql id="query">
<where>
<if test="enable!=null">
and enable = #{enable}
</if>
<if test="typeId!=null">
and typeId = #{typeId}
</if>
<if test="title!=null and ''!=title.trim()">
and title like concat('%',trim(#{title}),'%' )
</if>
</where>
</sql>
绑定删除事件
绑定事件拿到标签id值
{
key: 'id',
align: "center",
text: '操作 <a style="color:green" href="javascript:;">添加</a>',
template: function(cell, row, index, key){// 模板
return '<a style="color:red" data-id="'+cell+'" href="javascript:;">删除</a> '+
'<a style="color:blue" href="javascript:;">修改</a>';
}
}
// 删除操作 绑定的是删除按钮
$("body").on("click","a[data-id]",function(){
// 获取id
delId = $(this).data("id");
alert(delId)
});
准备模态框来自xmind
<!-- 删除时的确认模态框 -->
<div class="modal fade" id="delModal">
<div class="modal-dialog">
<div class="modal-content message_align">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h5 style="color: red">您确认要删除吗？</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<a href="javascript:void(0);" id="delModalButton" class="btn btn-success">确定</a>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
弹出删除模态框
// 删除操作 绑定的是删除按钮
$("body").on("click","a[data-id]",function(){
// 获取id
var delId = $(this).data("id");
// alert(delId)
// 弹出模态框
$("#delModal").modal("show");
});
绑定删除模态框确定按钮发送删除请求
var delId;
// 删除操作 绑定的是删除按钮
$("body").on("click","a[data-id]",function(){
// 获取id
delId = $(this).data("id");
// alert(delId)
// 弹出模态框
$("#delModal").modal("show");
});
// 删除模态框确定按钮 绑定一个事件 发送删除请求
$("#delModalButton").click(function(){
// alert("......");
// 删除请求
$.ajax({
type: "post",
url: "/system/article/delById",
data: {"id":delId}, // "id="+delId
dataType: "json",
success: function(msg){
console.debug(msg);
}
});
});
后台删除实现
ArticleController
@RequestMapping("/delById")
@ResponseBody
public String delById(Long id){
try {
service.delById(id);
return "ok";
} catch (Exception e) {
e.printStackTrace(); // 打印异常信息
return "no";
}
}
AiticleMapper.xml
<!-- void delById(Long id); -->
<delete id="delById">
delete from t_article where id=#{id}
</delete>
删除完成
封装AjaxResult
@Data
@AllArgsContructor
@NoArgsContructor
public class AjaxResult {
private Boolean success = true;
private String error;
}
ArticleController
@RequestMapping("/delById")
@ResponseBody
public AjaxResult delById(Long id){
try {
service.delById(id);
return new AjaxResult();
} catch (Exception e) {
e.printStackTrace(); // 打印异常信息到控制台
return new AjaxResult(false, "删除失败");
}
}
前台处理
// 删除模态框确定按钮 绑定一个事件 发送删除请求
$("#delModalButton").click(function(){
// alert("......");
// 删除请求
$.ajax({
type: "post",
url: "/system/article/delById",
data: {"id":delId}, // "id="+delId
dataType: "json",
success: function(msg){
if(msg.success){// 成功
// 关闭模态框
$("#delModal").modal("hide");
// 刷新数据 ????
GridManager.refreshGrid("demo-ajaxPageCode", true);
}else{
// 关闭模态框
$("#delModal").modal("hide");
// 失败提示
alert(msg.error)
}
}
});
});
添加或修改弹出模态框
模态框准备-来自xmind
<!-- 添加或者修改的模态框 -->
<div class="modal fade" id="saveModel">
<div class="modal-dialog">
<div class="modal-content message_align">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="/system/article/save" method="post" class="form-horizontal" id="saveForm">
<input type="hidden" name="id">
<div class="form-group row">
<label for="title" class="control-label col-md-3">文章标题</label>
<div class="col-md-9">
<input class="form-control" type="text" name="title">
</div>
</div>
<div class="form-group row">
<label for="typeId" class="control-label col-md-3">文章类型</label>
<div class="col-md-9">
<select name="typeId" class="form-control">
<c:forEach items="${list}" var="t">
<option value="${t.id}">${t.name}</option>
</c:forEach>
</select>
</div>
</div>
<div class="form-group row">
<label for="enable" class="control-label col-md-3" >是否启用</label>
<div class="col-md-9">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" checked="checked" id="enable" name="enable" value="1">启用
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="enable" value="0">禁用
</label>
</div>
</div>
</div>
<div class="form-group row">
<label for="content" class="control-label col-md-3">文章内容</label>
<div class="col-md-9">
<textarea class="form-control" style="resize: none" rows="4" name="content"></textarea>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<a href='javascript:void(0);' id="saveButton" class="btn btn-success" >确定</a>
</div>
</div>
</div>
</div>
添加和修改按钮加上id
{
key: 'id',
align: "center",
text: '操作 <a style="color:green" id="addBtn" href="javascript:;">添加</a>',
template: function(cell, row, index, key){// 模板
return '<a style="color:red" data-id="'+cell+'" href="javascript:;">删除</a> '+
"<a style='color:blue' data-row='111' href='javascript:;'>修改</a>";
}
}
分别绑定事件
// 添加操作 绑定添加按钮 事件委托
$("body").on("click","#addBtn",function(){
// 清空form中数据
$("#saveForm").get(0).reset();
// 弹出模态框
$("#saveModal").modal("show");
})
// 修改操作 绑定修改按钮 事件委托
$("body").on("click","a[data-row]",function(){
// 清空form中数据
$("#saveForm").clearForm(); // clearForm()、ajaxSubmit()都是jquery-form.js插件的方法
// 弹出模态框
$("#saveModal").modal("show");
})
// 保存操作
$("#saveButton").click(function(){
// 发送请求
// 把form表单中的数据发送到后台，url路径是form中的action
$("#saveForm").ajaxSubmit({
success: function(msg){
console.debug(msg)
}
});
});
添加完成
请求路径
<form action="/system/article/save" method="post" class="form-horizontal" id="saveForm">
ArticleController
@RequestMapping("/save")
@ResponseBody
public AjaxResult save(Article article){
try {
service.add(article);
return new AjaxResult();
} catch (Exception e) {
e.printStackTrace(); // 打印异常信息
return new AjaxResult(false, "保存失败");
}
}
ArticleMapper.xml
<!-- void add(Article article); -->
<insert id="add">
insert into t_article(title,url,typeId,clickCount,content,enable,createDate)
values(#{title},#{url},#{typeId},#{clickCount},#{content},#{enable},#{createDate})
</insert>
jsp
// 保存操作
$("#saveButton").click(function(){
// 发送请求
// 把form表单中的数据发送到后台，url路径是form中的action
$("#saveForm").ajaxSubmit({
success: function(msg){
if(msg.success){// 成功
// 关闭模态框
$("#saveModal").modal("hide");
// 刷新数据 ????
GridManager.refreshGrid("demo-ajaxPageCode");
}else{
// 关闭模态框
$("#saveModal").modal("hide");
// 失败提示
alert(msg.error)
}
}
});
});
修改：获取回显数据
{
key: 'id',
align: "center",
text: '操作 <a style="color:green" id="addBtn" href="javascript:;">添加</a>',
template: function(cell, row, index, key){// 模板
// row是一个json对象，要转成string
var str = JSON.stringify(row);
// console.debug(str);
// data: 数据必须是标准格式 {'id':10,'name':'zs'}
return '<a style="color:red" data-id="'+cell+'" href="javascript:;">删除</a> '+
"<a style='color:blue' data-row='"+str+"' href='javascript:;'>修改</a>";
}
}
// 修改操作 绑定修改按钮 事件委托
$("body").on("click","a[data-row]",function(){
// 清空form中数据
$("#saveForm").clearForm(); // clearForm()、ajaxSubmit()都是jquery-form.js插件的方法
// 数据回显 获取数据
var row = $(this).data("row");
console.debug(row);
// 弹出模态框
$("#saveModal").modal("show");
})
回显数据
// 修改操作 绑定修改按钮 事件委托
$("body").on("click","a[data-row]",function(){
// 清空form中数据
$("#saveForm").clearForm(); //clearForm()、ajaxSubmit()都是jquery-form.js插件的方法，会清空默认值
// 数据回显 获取数据
var row = $(this).data("row");
// console.debug(row);
// 数据回显 插件提供的方法
$("#saveForm").setForm(row);
// 弹出模态框
$("#saveModal").modal("show");
})
修改后台完成
设置隐藏域id
<input type="hidden" name="id" id="saveId">
添加操作中清空隐藏域id
防止被判断为修改操作
// 添加操作 绑定添加按钮 事件委托
$("body").on("click","#addBtn",function(){
// 清空form中数据
$("#saveForm").get(0).reset(); // 这种清空不会清空默认值
// 手动清空隐藏域id
$("#saveId").val("");
// 弹出模态框
$("#saveModal").modal("show");
})
ArticleController
@RequestMapping("/save")
@ResponseBody
public AjaxResult save(Article article){
try {
if(article.getId()==null){ // 添加操作
service.add(article);
}else{
service.update(article);
}
return new AjaxResult();
} catch (Exception e) {
e.printStackTrace(); // 打印异常信息
return new AjaxResult(false, "保存失败");
}
}
ArticleMapper.xml
<!-- void update(Article article); -->
<update id="update">
update t_article set title=#{title},url=#{url},typeId=#{typeId},
clickCount=#{clickCount},content=#{content},
enable=#{enable},createDate=#{createDate} where id=#{id}
</update>
tips：获取模态框内所有数据的方法
1.一个一个标签获取
2.jquery.jdirk.js提供的方法
var dataForm = $("#queryForm").serializeObject();
3.jquery-form.js插件的方法ajaxSubmit()，发送路径在action中
/* 添加和更新模态框点击确定时绑定事件请求后台 */
$("#saveButton").on("click",function(){
$("#saveForm").ajaxSubmit({
success:function(data){
if(data.success){
//关闭添加和修改模态框
$("#saveModel").modal("hide");
//刷新表格
GridManager.refreshGrid('demo-baseCode');
}else{
alert(data.msg);
}
}
});
});
<form action="/system/article/save" method="post" class="form-horizontal" id="saveForm">
