easyui04(数据查询)

一、iframe
其实就是一个容器

$('#funcTab').tabs('add',{
    title: node.text,    
    content:'<iframe frameborder=0 src="node.url " scrolling="no" style="width:100%;height:100%;"></iframe>',    
    closable:true
)};


二、前端页面搭建
 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@ include file="/common/head.jsp" %>
<title>Insert title here</title>
<script>
$(function(){
    
    $('#bookTable').datagrid({    
        url: ctx+'/bookServlet', 
        pagination:true,
        singleSelect:true,
        queryParams: {
            "bookName": $("#bookName").val()
        },
        columns:[[    
            {field:'id',title:'书本ID',width:100},    
            {field:'bookname',title:'名称',width:100},    
            {field:'price',title:'价格',width:100,align:'right'},
            {field:'booktype',title:'类型',width:100,align:'right'}
        ]],
        toolbar: '#bookTableToolbar'
    });
    
    $("#bookQry").click(function() {
        qryBook();
    });
    
    qryBook();
 
    function qryBook() {
        $('#bookTable').datagrid("load", {
            "bookName": $("#bookName").val()
        })
    };
    
    
});
</script>
</head>
<body>
    <!-- 查询条件 -->
    <div style="margin-top: 15px; margin-left:10px;">
        <input class="easyui-textbox" id="bookName" style="width:300px">
        <a id="bookQry" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>  
    </div> 
    
    <div id="p" class="easyui-panel" style="padding:10px" data-options="fit:true, border:false">
        <table id="bookTable" class="easyui-datagrid" style="width:100%;height:90%;"> 
        </table>
    </div>
    
    <!-- 列表上方的工具条 -->
    <div id="bookTableToolbar" style="text-align: right;">
        <a href="#" id="addBookBtn" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true"/a>
        <a href="#" id="editBootBtn" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a>
        <a href="#" id="delBootBtn" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true"/a>
    </div>
    
</body>
<html>


三、Dao层的开发
 


public class BookDao implements IBookDao {
 
	@Override
	public List<Book> getBooks(String name, int pageIndex, int pageSize) {
		Connection con = null;
		PreparedStatement ps = null;
		ResultSet rs = null;
		
		List<Book> list = new ArrayList<>();
		
		try {
			String sql = "select id,bookname,price,booktype,rownum as rid from t_book";
			if(name != null && !"".equals(name)) {
				sql += " where bookname like ?";
			}
			
			sql = "select * from (" + sql + ")b where b.rid between ? and ?";
			
			con = DBHelper.getsCon();
			ps = con.prepareStatement(sql);
			
			int start =(pageIndex-1)*pageSize+1;
			int end = pageIndex*pageSize;
			
			if(name != null && !"".equals(name)) {
				ps.setString(1, name+"%");
				ps.setInt(2, start);
				ps.setInt(3, end);
			} else {
				ps.setInt(1, start);
				ps.setInt(2, end);
			}
			
			rs = ps.executeQuery();
			
			while(rs.next()) {
				Book m = new Book();
				m.setId(rs.getInt("id"));
				m.setBookname(rs.getString("bookname"));
				m.setPrice(rs.getString("price"));
				m.setBooktype(rs.getString("booktype"));
				list.add(m);
			}
			
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			DBHelper.Close(con, ps, rs);
		}
		
		return list;
	}
	
	
	@Override
	public int getTotalPage() {
		Connection con = null;
		PreparedStatement ps = null;
		ResultSet rs = null;
		
		int n  = 0;
		try {
			con= DBHelper.getsCon();
			String sql = "select count(*) from  t_book";
			ps = con.prepareStatement(sql);
			rs= ps.executeQuery();
			if(rs.next()) {
				n = rs.getInt(1);
			}
			
		} catch (Exception e) {
			e.printStackTrace();
		}finally {
			DBHelper.Close(con, ps, rs);
		}
		return n;
	}
	
	public static void main(String[] args) {
		BookDao dao = new BookDao();
		List<Book> books = dao.getBooks("璐�", 1, 5);
		
		books.forEach(t -> System.out.println(t));
	}
}

booklist

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@include file="../../common/head.jsp" %>
<title>Insert title here</title>

<script>
$(function(){
	
	$('#bookTable').datagrid({    
	    url: ctx+'/bookServlet', 
	    pagination:true,
	    singleSelect:true,
	    queryParams: {
	    	"bookName": $("#bookName").val()
	    },
	    columns:[[    
	        {field:'id',title:'书本ID',width:100},    
	        {field:'bookname',title:'名称',width:100},    
	        {field:'price',title:'价格',width:100,align:'right'},
	        {field:'booktype',title:'类型',width:100,align:'right'}
	    ]],
	    toolbar: '#bookTableToolbar'
	});
	
	$("#bookQry").click(function() {
		qryBook();
	});
	
	qryBook();

	function qryBook() {
		$('#bookTable').datagrid("load", {
			"bookName": $("#bookName").val()
		});
	};
	
	$("#addBook").click(function() {
		$("#editDialog").dialog({    
		    title: '编辑书本信息',    
		    width: 300,    
		    height: 240,    
		    closed: false,    
		    cache: false,    
		    href: 'editBook.jsp',    
		    modal: true,
		    buttons:[{
				text:'保存',
				iconCls:'icon-save',
				handler:function(){
					
				}
			},{
				text:'关闭',
				iconCls:'icon-cancel',
				handler:function(){
					$("#editDialog").dialog("close");
				}
			}]
		});
	});
});
</script>
</head>
<body>
	<!-- 查询条件 -->
	<div style="margin-top: 15px; margin-left:10px;">
		<input class="easyui-textbox" id="bookName" style="width:300px">
		<a id="bookQry" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>  
	</div> 
	
	<div id="p" class="easyui-panel" style="padding:10px" data-options="fit:true, border:false">
		<table id="bookTable" class="easyui-datagrid" style="width:100%;height:90%;"> 
		</table>
	</div>
	
	<!-- 列表上方的工具条 -->
	<div id="bookTableToolbar" style="text-align: right;">
		<a href="#" id="addBook" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true"/a>
		<a href="#" id="addBook1" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a>
		<a href="#" id="addBook2" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true"/a>
	</div>
	
	<div id="editDialog">Dialog Content.</div>
</body>
</html>

页面展示

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值