easyui-04（DataGrid数据查询）

huangᴸ

于 2022-05-07 13:30:16 发布

阅读量231

点赞数

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

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

版权

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>

<table id="bookListId">   
    
</table>  

<div id="tb" style="text-align: right;">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="add();">增加</a>
<a 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'
    	});  
    	
    	//模糊查询点击事件
    	$("#bookQry").click(function () {
			mydemo();
		});
    	
    	mydemo();
    	
    	//封装一个方法实现自动加载第一页的所有行
    	function mydemo() {
			$('#bookListId').datagrid('load',{
				searchName:$("#bookName").val()
			});
		}
	});

</script>

</body>
</html>

二.BookListServlet 页面

package com.easyui.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.easyui.biz.IBookBiz;
import com.easyui.biz.impl.BookBizImpl;
import com.easyui.entity.Book;
import com.fasterxml.jackson.databind.ObjectMapper;

@WebServlet("/BookList.do")
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");

		// 实例化biz
		IBookBiz ibb = new BookBizImpl();

		// 定义一个变量保存默认页码
		Integer pageIndex = 1;
		// 假设用户点击下一页
		String pIndex = request.getParameter("page");// 不能随便写
		if (pIndex != null) {
			pageIndex = Integer.valueOf(pIndex);
		}

		Integer pageSize = 10;
		String pSize = request.getParameter("rows");// 不能随便写
		if (pSize != null) {
			pageSize = Integer.valueOf(pSize);
		}

		String searchName = request.getParameter("searchName");
		if (searchName == null) {
			searchName = "";
		}

		// 获取总记录数
		Integer total = ibb.getRowTable("");
		List<Book> list = ibb.queryBookAll(pageIndex, pageSize, searchName);

		Map<String, Object> maps = new HashMap<String, Object>();
		maps.put("total", total);
		maps.put("rows", list);

		// 将数据转成满足JSON格式的对象字符串
		ObjectMapper mapper = new ObjectMapper();
		String writeValueAsString = mapper.writeValueAsString(maps);

		// 获取out对象
		PrintWriter out = response.getWriter();
		out.write(writeValueAsString);
		out.flush();
		out.close();

	}

}

三.运行页面

四.小结

1.DataGrid

1.1 DataGrid基本属性

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

   1.1.2 toobar属性（增删改）
      toolbar : "#tb",	        // 自定义工具栏

   1.1.3 formatter单元格格式化
    
   1.1.4 styler单元格样式

   1.1.5 sorter
   
   1.1.6 editor


1.2 DataGrid事件
   
   1.2.1 onDblClickRow双击行事件
   onDblClickRow:function(index,row){}

   1.2.2 按钮点击查询
   //查询参数
   var param={
	'bookName':$('#bookname').val(),
	'methodName':'query'
   };
   var options = $('#dg').datagrid('options');
   //指定请求Url地址
   options.url="bookAction.action";
   //开始加载数据
   $('#dg').datagrid('load', param); 

1.3 DataGrid分页

   1.3.1 属性设置
   pagination:true,	// 是否分页
   pageNumber:1,	// 初始化页码
   pageSize:10,		// 初始化每页显示条数

   1.3.2 请求/响应参数格式要求
   Request请求：{"page":页码,"rows":每页多少条记录}
   Response响应：{"total":总记录数,"rows":[{数据项1},{数据项2},{数据项3},...]}


2.Dialog对话框窗口

width : 400,
height : 292,
modal : true,
draggable : true,
collapsible : false,
minimizable : false,
maximizable : false,
title : '编辑书本信息',
buttons:"#dlg-buttons",
href:'bookDetail.jsp',
onLoad:function(){
   //赋值
   $('#ff').form('load',row);
   //重置
   $('#ff').form('reset');
}


3.Message消息窗口

  3.1 $.messager.alert

  3.2 $.messager.confirm

4.Form表单

$('#ff').form("submit",{    
    url:'',    
    onSubmit: function(){  
       //form表单验证
       return $(this).form('validate');
    },    
    success:function(data){

    }    
});

//form表单序列化
$('#ff').serialize();