easyui(datagrid数据查询)

最新推荐文章于 2022-05-13 09:28:46 发布

星星铺满海面

最新推荐文章于 2022-05-13 09:28:46 发布

阅读量1k

点赞数 2

文章标签： easyui 前端 javascript

本文链接：https://blog.csdn.net/weixin_67677668/article/details/124612809

版权

EasyUI Datagrid 模糊查询 Java Servlet 书籍数据

关键词由CSDN通过智能技术生成

一、datagrid

1、界面代码：

<body>
	<!-- 模糊查询 -->
	<div style="margin: 20px;text-align: center;">
		<select id="xl">
			<option value="bname">书籍名称</option>
			<option value="btype">书籍类型</option>
		</select>
		<input id="str" class="easyui-textbox" style="width: 300px">
		<a id="btn" href="#" class="easyui-linkbutton"
			data-options="iconCls:'icon-search'">查询</a>
	</div>
	
	<!-- 数据表格：用来加载书籍数据 -->
	<table id="myTable" class="easyui-datagrid" style="width:100%;height:300px;"></table>
	
	<!-- 工具栏 -->
	<div id="myTools" style="text-align: right;">
		<a href="#" class="easyui-linkbutton"data-options="iconCls:'icon-edit',plain:true"></a> 
		<a href="#"class="easyui-linkbutton"data-options="iconCls:'icon-add',plain:true" ></a>
		<a href="#"class="easyui-linkbutton"data-options="iconCls:'icon-edit-remove',plain:true" ></a>
	</div>

</body>

2、script块：

<script type="text/javascript">
	$(function() {
		$('#myTree').tree({
			url : ctx + '/IndexServlet',//请求地址
			animate : true,//折叠或者展开的时候是否显示动画效果
			onDblClick : function(node) {
				//alert(node.text+"   "+node.id+"   "+node.state);  // 在用户双击的时候提示
				//alert(node.iconCls);//图标
				//拿到对应的后代节点的集合
				var cs=$('#myTree').tree('getChildren',node.target);
				//alert(cs.length);
				if(cs.length==0){
					//判断是否存在
					var f = $('#myTab').tabs('exists',node.text);
					//alert(f);
					if(!f){//说明不存在
						//新打开一个选项卡(tab页) iconCls:'icon-ok' 
						$('#myTab').tabs('add',{    
						    title:node.text, // 标题  
						    content:'<iframe scrolling="no" frameborder="0" width="99%" height="99%" src="'+node.url+'"></iframe>',  //内容
						    closable:true,  //是否可关闭
						    iconCls:node.iconCls
						});  
					}
					else{//说明存在 让其对应选中
						$('#myTab').tabs('select',node.text);
					}
				}
				
			}
		});
	})
</script>

界面展示：

3、servlet块：

package com.zking.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.alibaba.fastjson.JSON;
import com.zking.biz.BookBiz;
import com.zking.biz.IBookBiz;
import com.zking.entity.Book;

@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("text/html; charset=UTF-8");
		//获取out对象
		PrintWriter out = response.getWriter();
		int pageIndex=1;
		int pageSize=10;
		
		//接收前台传递过来的参数 page rows bname
		String pid=request.getParameter("page");//当前页码
		if(pid!=null) {
			pageIndex=Integer.parseInt(pid);
		}
		String size=request.getParameter("rows");//每页多少条
		if(size!=null) {
			pageSize=Integer.parseInt(size);
		}
		String bname=request.getParameter("bname");//关键字
		if(bname==null) {
			bname="";//相当于查询全部
		}
		String btype=request.getParameter("btype");//列名
		if(btype==null) {
			btype="bname";
		}
		//servlet调用biz
		IBookBiz ibb=new BookBiz();
		//获取总行数
		int zhs=ibb.getRows("tb_book where "+btype+" like '%"+bname+"%'");
		//拿到分页的集合
		List<Book> ls = ibb.getAllByPage(pageIndex, pageSize, btype,bname);
		//前台的json数据需要的两个参数：total：总行数 rows:书籍集合
		Map<String, Object> mym=new HashMap<>();
		//放两对值
		mym.put("total", zhs);
		mym.put("rows", ls);
		//把map集合-->json格式的对象字符串
		String str=JSON.toJSONString(mym);
		//输送到页面
		out.write(str);
		out.flush();
		out.close();
	}

}

星星铺满海面

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
easyui(datagrid数据查询)

一、datagrid1、界面代码：<body>  <div style="margin: 20px;text-align: center;"> <select id="xl"> <option value="bname">书籍名称</option> <option value="btype">书籍类型</option> </select>
复制链接

扫一扫