Easyui(分页&模糊查询)

最新推荐文章于 2022-05-09 08:57:48 发布

T275fuyou

最新推荐文章于 2022-05-09 08:57:48 发布

阅读量134

点赞数

分类专栏：目录文章标签： bootstrap

本文链接：https://blog.csdn.net/T275fuyou/article/details/124070328

版权

本文通过实例详细介绍了使用Easyui进行分页和模糊查询的操作步骤，包括创建Oracle测试表，设置Eclipse项目目录，编写index.jsp和bookList.jsp页面代码，定义实体类Book以及相关查询方法。

摘要由CSDN通过智能技术生成

oracle所需测试表


create table t_book (
  id integer not null,
  bookname varchar(50) not null,
  price float not null,
  booktype varchar(40) not null,
  primary key (id)
);

eclipse项目目录

index.jsp页面


onDblClick : function(node) {
    //判重，如果为false即可以添加新的tab
    if(!$("#tt").tabs('exists',node.text)){
    $('#tt').tabs('add', {
		title:node.text,
        //将内容更改为iframe框架，跳转到servlet处理
		content:'<iframe frameborder=0 src="' 
			+ node.url 
			+ '" scrolling="no" style="width:100%;height:100%;"></iframe>',    
		closable:true
	});
    //如果为true，证明已经存在，就移动到指定的tab
    }else{
    	$('#tt').tabs('select',node.text)
    }
}

bookList.jsp页面代码

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%@ include file="../../common/head.jsp"%>
<script type="text/javascript">
	$(function(){
		$('#dg').datagrid({    
			//进servlet拿到数据
		    url:ctx+'/BookServlet',
		    toolbar: '#tb',
		    //显示底部分页工具栏
		    pagination:true,
		    columns:[[    
		    	//表格的结构，需要与实体类保持一致
		        {field:'id',title:'ID',width:100},    
		        {field:'bookname',title:'书本名称',width:100},    
		        {field:'price',title:'价格',width:100},
		        {field:'booktype',title:'类型',width:100} 
		    ]]    
		});
		//模糊查询
		$("#qrybtn").click(function(){
			qry();
		});
		
		function qry(){
			//使用重载的方法将查询的内容传递到servlet中
			$('#dg').datagrid("reload",{
				bookName:$("#bookName").val()
			});
		}
	})
</script>
</head>
<body>
<form action="" method="post" style="margin-top:20px">
	<div>   
        <label for="name">书名：</label>   
        <input id="bookName" class="easyui-textbox" style="width:300px"> 
        <a id="qrybtn" href="#" class="easyui-link