easyui 数据表实现模糊查询新增修改删除

准备数据表 模拟 

create table tb_book
(
       bid number primary key,--书籍id
       bname varchar2(100),--书籍名称
       bprice number(5,2),--书籍价格
       btype varchar2(100)--书籍类型
       
)
select * from tb_book;

1.1 DataGrid基本属性

   1.1.1 基本属性
      url : '',         // 初始化请求路径
      fitcolumns : false,     // 列宽自适应
      singleSelect : true,     // 是否选中单行
      checkOnSelect : true,     // 点击行选中时该checkbox选中或取消选中
      rownumbers:true,            // 行号
      fit : true,         // 高宽自适应
      border : false,             // 是否显示边框
      title : '书本列表',     // datagrid标题
      striped : true,             // 显示斑马线效果

 表格布局

 需要引入共享架包页面

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

<!-- Base标签:当引入外部文件时,被Base标签标明的路径会自动引入到src中 -->
<base href = "${pageContext.request.servletContext.contextPath }/static/">

<!-- easyui css -->
<link rel = "stylesheet" type = "text/css" href = "js/jquery-easyui-1.5.5.2/themes/default/easyui.css">
<!-- icon css -->
<link rel = "stylesheet" type = "text/css" href = "js/jquery-easyui-1.5.5.2/themes/icon.css">
<!-- jQuery -->
<script type = "text/javascript" src = "js/jquery-easyui-1.5.5.2/jquery.min.js"></script>
<!-- easyui.js -->
<script type = "text/javascript" src = "js/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>

<!--  汉化 -->
<script type = "text/javascript" src = "js/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js"></script>

<!-- 通过js标签保存了一个绝对路径 -->
<script type = "text/javascript">
	let xPath = "${pageContext.request.servletContext.contextPath }";
</script>

<!-- 脚本的方式借助域对象保存一个 -->
<%
	String xPath = request.getServletContext().getContextPath();
	session.setAttribute("xPath", xPath);
%>

对话窗口 引入添加修改界面 

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<div>
	<form id="bookForm">
		<input type="hidden" name="bid" id="bid" />
		<div style="margin: 15px;">
			<label for="name">书名:</label> <input id="bookname"
				class="easyui-textbox" name="bname" style="width: 300px"
				data-options="required:true">
		</div>

		<div style="margin: 15px;">
			<label for="price">价格:</label> <input class="easyui-textbox"
				name="bprice" style="width: 300px" data-options="required:true">
		</div>
		<div style="margin: 15px;">
			<label for="booktype">类型:</label> <input class="easyui-textbox"
				name="btype" style="width: 300px" data-options="required:true">
		</div>
	</form>
</div>

主界面数据表格 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%@include file="static/common/eayUI_llink.jsp" %>
</head>
<body>

<div id="p" class="easyui-panel"  data-options="fit:true">
   <div style="margin: 10px auto; text-align:center;" >
   
<input id="strName" class="easyui-textbox"  style="width:300px">
<a id="btn"  class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜索</a>
   </div>
   <div id="tb" style = "text-align: right">
<a id = "addBookId" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true"></a>
<a id = "editBookId" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"></a>
<a id = "delBookId" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true"></a>
</div>
   <table id="dg"></table>
   <div id="dd" style="display: display;" ></div>
</div>


<script type="text/javascript">


$("#delBookId").click(function () {
	let row = $("#dg").datagrid('getSelected');//获取选中行
	if(row==null){
		$.messager.alert('我的消息','请你选中后在进行操作!');
		return;
	}
	$.messager.confirm('确认','您确认想要删除记录吗?',function(r){
	    if (r){
	    	$.post(path+"/DelBooksevrlet.do",{"bid":row.bid},function(data){
	    		if(data){
	    			$.messager.alert('我的消息','删除成功');
	    			getDate();
	    		}else{
	    			$.messager.alert('我的消息','删除失败');
	    		}
	    		
	    	});
	    }
	});
	

})


$('#dg').datagrid({
    url:path+'/BookListServlet.do',
    //分页下拉框
    pageList:[5,10,20,30,50,90],
    columns:[[
        {field:'bid',title:'编号',width:'25%'},
        {field:'bname',title:'名称',width:'25%'},
        {field:'bprice',title:'价格',width:'25%'},
        {field:'btype',title:'类型',width:'25%'},
    ]],
    pagination:true,
  //携带参数
    queryParams: {
		searchName: $("#strName").val()
	},
	toolbar:$("#tb"),
	singleSelect:true//设置只能选一行
});
getDate();
$("#btn").click(function () {
	getDate();
})
  function  getDate() {
	
	$('#dg').datagrid('load', {
	    strName:$("#strName").val()
	});
	
}
$("#editBookId").click(function (){
	let row = $("#dg").datagrid('getSelected');//获取选中行
	if(row==null){
		$.messager.alert('我的消息','请你选中后在进行操作!');
		return;
	}
	
	edetBook("修改图书",row);
});

$("#addBookId").click(function () {
	
	edetBook("新增图书");

})
function edetBook(title,row) {
	let str="新增";
	if(title.includes('修改')){
		str="修改"
	}
	$('#dd').dialog({
	    title:title,
	    width: 400,
	    height: 300,
	    closed: false,
	    cache: false,
	    href: 'addBook.jsp',//引入窗口类容
	    modal: true,
	    buttons:[{
	        text:'保存',
	        handler:function(){//$("#bookForm").serialize()jQuery总序列化 直接获取form中所有值
	        	$.post(path+"/EdetBookServlet.do", $("#bookForm").serialize(), function (data) {
					if(data.Zt){
						
						$.messager.alert('我的消息',""+str+"成功!",'info');
						getDate();
						$('#dd').dialog("close")//关闭窗口
					}else{
						$.messager.alert('我的消息',""+str+"失败!",'info');
					}
	        	
				},"json")
	        	
	        }
	    },{
	        text:'关闭',
	        handler:function(){
	        	$('#dd').dialog("close")
	        	
	        }
	    }],
	  //在加载远程数据时触发。  onLoad
		onLoad:function(){
			
			if(row){
				$("#bookForm").form("reset"); //重置表单
				$("#bookForm").form('load',row);//加载远程数据
			}
			
		}
	});
}
</script>

</body>
</html>

加载数据servlet界面

package com.zking.easyui.book.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.List;
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.fasterxml.jackson.databind.ObjectMapper;
import com.zking.easyui.book.biz.IBookBiz;
import com.zking.easyui.book.biz.impl.BookBizImpl;
import com.zking.easyui.book.entity.Book;

/**
 * 显示所有图书的控制器servlet
 */
@WebServlet("/BookListServlet")
public class BookListServlet 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");
		
		//获取请求参数(pageIndex,searchName)
		int pageIndex = 1;
		
		String pIndex = request.getParameter("page");//page值是已经固定好
		if(pIndex!=null) {
			pageIndex = Integer.valueOf(pIndex);
		}
		
		int pageSize = 10;
		String pSize = request.getParameter("rows");
		if(pSize!=null) {
			pageSize = Integer.valueOf(pSize);
		}
		
		
		//获取searchName
		String searchName = request.getParameter("searchName");
		if(searchName == null) {
			searchName = "";
		}
		System.out.println("searchName = "+searchName);
		
		
		//调用biz
		IBookBiz ibb = new BookBizImpl();
		//获取总记录数
		Integer tableCount = ibb.getTableCount(searchName);
		// 总数据
		List<Book> booksAll = ibb.getBooksAll(pageIndex, pageSize, searchName);
		//实例化Map集合
		Map<String,Object> maps = new HashMap<String,Object>();
		maps.put("total", tableCount);
		maps.put("rows", booksAll);
		
		//创建JSON工具
		ObjectMapper mapper = new ObjectMapper();
		String writeValueAsString = mapper.writeValueAsString(maps);
		
//		获取out
		PrintWriter out = response.getWriter();
		out.write(writeValueAsString);
		out.flush();
		out.close();

	}

}

删除servlet界面

package com.zking.easyui.book.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.List;
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.fasterxml.jackson.databind.ObjectMapper;
import com.zking.easyui.book.biz.IBookBiz;
import com.zking.easyui.book.biz.impl.BookBizImpl;
import com.zking.easyui.book.entity.Book;

/**
 * 删除图书的servlet控制器
 */
@WebServlet("/DelBookServlet")
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");
		
		//获取请求参数(pageIndex,searchName)
		Integer bid = request.getParameter("bid")!=null?Integer.valueOf(request.getParameter("bid")):0;
		
		//封装
		
		IBookBiz ibb = new BookBizImpl();
		Map<String,Object> maps = new HashMap<>();
		
		try {
			ibb.delBook(bid);
			maps.put("message", true);
		} catch (Exception e) {
			maps.put("message", false);
		}
		
		//获取out
		PrintWriter out = response.getWriter();
		
		ObjectMapper mapper = new ObjectMapper();
		
		String writeValueAsString = mapper.writeValueAsString(maps);
		
		out.write(writeValueAsString);
		out.flush();
		out.close();

	
	}

}

修改新增和界面

package com.zking.book.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.List;
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.fasterxml.jackson.databind.ObjectMapper;
import com.zking.book.biz.BookBiz;
import com.zking.book.biz.impl.BookBizImpl;
import com.zking.book.entity.Book;

/**
 * Servlet implementation class BookListServlet
 */
@WebServlet("/EdetBookServlet.do")
public class EdetBookServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
    
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse 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");
		
	
		Map<String, Object> map=new HashMap<>();
		Integer bid=0;
		String parameter = request.getParameter("bid");
		if(parameter!=null&&parameter!="") {
			bid=Integer.valueOf(parameter);
		}
		
				//request.getParameter("bid")==null?0:Integer.valueOf(request.getParameter("bid"));
		String bname = request.getParameter("bname");
		Float bprice = request.getParameter("bprice")!=null?Float.valueOf(request.getParameter("bprice")):0;
		String btype = request.getParameter("btype");
		try {
			
			if(bid==0) {
				
				new BookBizImpl().addBook(new Book(bname, bprice, btype));
			}else {
				new BookBizImpl().updBook(new Book(bid, bname, bprice, btype));
			}
			
			
			map.put("Zt", true);
		} catch (Exception e) {
			
			map.put("Zt", false);
		}
		
		ObjectMapper mapper = new ObjectMapper(); 
		
		String writeValueAsString = mapper.writeValueAsString(map);
		//获取out 输出对象
		PrintWriter out = response.getWriter();
		out.write(writeValueAsString);
		out.flush();
		out.close();
	}

}

演示效果

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值