easyui-06（DataGrid数据删改）

最新推荐文章于 2024-07-16 22:31:12 发布

huangᴸ

最新推荐文章于 2024-07-16 22:31:12 发布

阅读量58

点赞数

分类专栏： java easyui 文章标签： easyui

本文链接：https://blog.csdn.net/m0_63579794/article/details/124668010

版权

java 同时被 2 个专栏收录

44 篇文章 1 订阅

订阅专栏

easyui

6 篇文章 0 订阅

订阅专栏

一.BookList.jsp 页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<!-- 通过include指令引入公共资源 -->
<%@ include file="/static/common/easyui-link.jsp"%>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<div style="margin: 15px; text-align: center;">
		<input class="easyui-textbox" id="bookName" style="width: 300px">
		<a id="bookQry" class="easyui-linkbutton"
			data-options="iconCls:'icon-search'">查询</a>
	</div>

	<!-- 弹出框(增加|修改) dialog组件 -->
	<div id="dd" style="display: none;"></div>

	<table id="bookListId">

	</table>

	<div id="tb" style="text-align: right;">
		<a id="addBookId" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="add();">增加</a>
		<a id="delBookId" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="add();">删除</a>
		<a id="editBookId" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" onclick="edit();">编辑</a>
	</div>


	<script type="text/javascript">

    $(function() {
    	$('#bookListId').datagrid({
    		//表格数据的servlet的请求路径
    	    url:xPath+'/BookList.do',    
    	    columns:[[
    	        {field:'bid',title:'书籍编号',width:'25%',align:'center'},    
    	        {field:'bname',title:'书籍名称',width:'25%',align:'center'},    
    	        {field:'bprice',title:'书籍价格',width:'25%',align:'center'},
    	        {field:'btype',title:'书籍类型',width:'25%',align:'center'}
    	    ]],
    	    //表格中分页工具显示
    	    pagination:true,
    	    //下拉框显示分页的条数
    	    pageList:[10,20,30,40,50,60,70,80,90,100],
    	    //发送请求是携带的参数
    	    queryParams:{
    	    	searchName:$("#bookName").val()
    	    },
    	    toolbar: '#tb',
    	    singleSelect:true
    	});  
    	
    	//模糊查询点击事件
    	$("#bookQry").click(function() {
			mydemo();
		});
    	
    	mydemo();
    	
    	//封装一个方法实现自动加载第一页的所有行
    	function mydemo() {
			$('#bookListId').datagrid('load',{
				searchName:$("#bookName").val()
			});
		}
    	
    	//新增图书的点击事件
		$("#addBookId").click(function(){
			//alert(123)
			//调用Dialog组件的弹窗
			getData('add');
		});
		
		
		//修改图书的点击事件
		$("#editBookId").click(function(){
			//alert(123)
			let row = $('#bookListId').datagrid("getSelected");
			getData('edit',row);
		});
    	
		//由于新增图书和修改图书的弹出Dialog共用    封装
		function getData(type,row){
			let myTitle = '书籍新增';
			let action = "/addBook.do"
			if(type === 'add'){
				myTitle = '书籍新增'
			}else if(type === 'edit'){
				myTitle = '书籍编辑';
				action = "/editBook.do"
			}
			
			$('#dd').dialog({    
			    title: myTitle,    
			    width: 400,    
			    height: 255,    
			    closed: false,    
			    cache: false,    
			    href: xPath+'/editBook.jsp',    
			    modal: true,
			    buttons:[{
					text:'保存',
					handler:function(){
						//alert("保存");
						//获取表单中的数据，调用方法  传递到servlet中
						$.ajax({
							url:xPath+action,
							//参数传递：jQuery的选择器传递  jQuery方法
							data:$("#bookForm").serialize(),
							datatype:"JSON",
							success:function(data){
								if(data.success){
									$.messager.alert('消息','操作成功');
									//关闭窗口
									$("#dd").dialog('close');
									//重新加载
									mydemo();
								}
							}
						});
					}
				},{
					text:'关闭',
					handler:function(){
						//alert("关闭");
						//调用的方法dialog   参数方法close来源于panel
						$("#dd").dialog('close');
					}
				}],
				//点击按钮弹出Dialog窗口是触发的加载事件
				onLoad: function() {
					alert(123)
					if(row) {
						$("#bookForm").form("reset");
						$('#bookForm').form('load',row);
					}
				}

			});   

		}
    	
    	//删除的点击事件
		$("#delBookId").click(function(){
			//alert(123);
			//1.获取选中的行  getSelected方法  获取是否选中行
			let row = $('#bookListId').datagrid("getSelected");
			//判断  没有选中  无操作
			if(!row){//空  没有选中
				$.messager.alert('信息',"请选中行再操作");
				return;
			}
			//DelBook.do
			$.post(xPath+"/DelBook.do",{"bid":row.bid},function(data){
				if(data.message){
					$.messager.alert('信息',"删除成功");
					//重新加载
					mydemo();
				}
			});
		});
    	
		});
    	
    	

</script>

</body>
</html>

二.DelBookServlet 页面

package com.easyui.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.easyui.biz.IBookBiz;
import com.easyui.biz.impl.BookBizImpl;
import com.fasterxml.jackson.databind.ObjectMapper;

@WebServlet("/DelBook.do")
public class DelBookServlet extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//设置编码
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		response.setContentType("application/json;charset=utf-8");
		
		//通过request获取前端传递过来的图书编号
		Integer bid = request.getParameter("bid")!=null?Integer.valueOf(request.getParameter("bid")):0;
		
		//实例化业务逻辑层
		IBookBiz ibb = new BookBizImpl();
		//Map集合
		Map<String,Object> maps = new HashMap<String,Object>();
		
		//调用删除的方法
		try {
			ibb.delBookByBid(bid);
			maps.put("message", true);
		} catch (Exception e) {
			maps.put("message", false);
		}
		
		//JSON工具
		ObjectMapper mapper = new ObjectMapper();
		String writeValueAsString = mapper.writeValueAsString(maps);
		
		
		//out对象
		PrintWriter out = response.getWriter();
		out.write(writeValueAsString);
		out.flush();
		out.close();
		
		
		
		
		
	
	}

}

小结

1.singleSelect 如果为true，则只允许选择一行。



删除
$("#delBootBtn").click(function() {
			let row = $("#bookTable").datagrid("getSelected");
			
			if(!row) {
				$.messager.alert('消息','请选择要删除的记录');
				return;
			}
			
			$.ajax({
				url: path + '/delBookServlet',
				type: 'post',
				data:{
					id: row.id
				},
				dataType: 'json',
				success: function(resp) {
					if(resp.success) {
						$.messager.alert('消息','操作成功');
						qryBook();
					}else{
						$.messager.alert('消息','操作不成功');
					}
				}
			})
		})




修改————事件
onLoad: function() {
					if(row) {
						$("#bookForm").form("reset");
				    	$("#bookForm").form("load", row);
					}
				}