一、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>
页面展示