B047-cms02-高级查询删除添加修改

- - 高级查询
  - - 页面准备
    - 下拉框显示文章类型
    - - 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;
}

高级查询页面发送请求

jqueryjdirkjs_133">导入jquery.jdirk.js

方便在页面中整体并动态地取值
/cms02/src/main/WebContent/static/system/js/jquery.jdirk.js

jquery_136">在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: '操作 &nbsp;&nbsp;<a style="color:green" href="javascript:;">添加</a>',
	template: function(cell, row, index, key){// 模板

	return '<a style="color:red" data-id="'+cell+'" href="javascript:;">删除</a>&nbsp;&nbsp;'+
			'<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: '操作 &nbsp;&nbsp;<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>&nbsp;&nbsp;'+
		             "<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: '操作 &nbsp;&nbsp;<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>&nbsp;&nbsp;'+
			   "<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">

B047-cms02-高级查询 删除 添加 修改

目录

高级查询

页面准备

下拉框显示文章类型

ArticleController

用jstl和el表达式取值展示

高级查询参数

ArticleQuery

高级查询页面发送请求

jqueryjdirkjs_133">导入jquery.jdirk.js

jquery_136">在jquery下引用

绑定按钮发送请求

高级查询sql

绑定删除事件

绑定事件拿到标签id值

准备模态框来自xmind

弹出删除模态框

绑定删除模态框确定按钮发送删除请求

后台删除实现

ArticleController

AiticleMapper.xml

删除完成

封装AjaxResult

ArticleController

前台处理

添加或修改弹出模态框

模态框准备-来自xmind

添加和修改按钮加上id

分别绑定事件

添加完成

请求路径

ArticleController

ArticleMapper.xml

jsp

修改：获取回显数据

回显数据

修改后台完成

设置隐藏域id

添加操作中清空隐藏域id

ArticleController

ArticleMapper.xml

tips：获取模态框内所有数据的方法

相关文章

B047-cms02-高级查询删除添加修改