hello,大家好,我是求哥的马子,昨天有个小伙伴说:你这是模拟的数据,对我没多大的作用,所以,今天,它来啦!!! 今天来给大家分享如何用easyui 将数据库中的数据绑定到页面上
效果图:
①:承接上次文章,将后台界面再次优化,并实现数据绑定&实现模糊查询
数据库数据:书籍表
菜单表
(其次一些帮助类,实体类,Dao层,就不展示了)
前期准备:从菜单表(URL 列 jsp/book/bookList.jsp 中),我们可以看到他的文件结构,(以jsp开头的为例:jsp文件夹下是book,book文件夹下是名为 bookList 的jsp 文件 ,以此类推)为了页面正确的显示,我们必须按照此文件结构来建立(详见下图):
实现思路:页面请求返回到Servlet中,Servlet 将数据反馈,
map 存入(Map<String, Object> data = new HashMap<>();
data.put("total", totalpage);
data.put("rows", list);)
查询集合打包成json格式的字符串,用(PrintWrite out)out.write 输入给页面,页面接收,并展示
jsp/book/bookList.jsp 代码:
<%@ 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', //映射的servlet名
pagination:true,//如果为true,则在底部显示工具栏
singleSelect:true,
queryParams: {
"bookName": $("#bookName").val()
},
columns:[[
{field:'id',title:'书本ID',width:100}, /* {field:'id',title:'书本ID',width:100}, id 名与实体类属性名 一致 */
{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>
index 代码:
<%@ 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 type="text/javascript">
$(function(){
$('#menuTree').tree({
url:ctx + '/moduleServlet',
onDblClick:function(node) {
let children = $('#menuTree').tree('getChildren',node.target);
if(children <= 0) {
if($('#funcTab').tabs('exists',node.text))
return;
$('#funcTab').tabs('add',{
title: node.text,
content:'<iframe frameborder=0 src="'
+ node.url
+ '" scrolling="no" style="width:100%;height:100%;"></iframe>', //内容
closable:true
});
}
}
});
});
</script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
<div data-options="region:'west',title:'West',split:true" style="width:200px;">
<ul id="menuTree" class="easyui-tree"></ul>
</div>
<div data-options="region:'center'" style="padding:5px;background:#eee;">
<!-- - -->
<div id="funcTab" class="easyui-tabs" style="width:100%;height:100%;">
<div title="首页" style="padding:20px;display:none;">
tab1
</div>
</div>
<!-- -->
</div>
</body>
</html>
代码简单绝对,求哥简单纯粹,嘿嘿