EasyUi(完整版)

最新推荐文章于 2024-03-05 21:07:08 发布

VIP文章求哥的马子

最新推荐文章于 2024-03-05 21:07:08 发布

阅读量1.2k

点赞数

文章标签： easyui

本文链接：https://blog.csdn.net/qq_61620143/article/details/124136048

版权

一.项目结构

二.前台页面搭建

三.后台开发

四.运行效果

1.项目结构

二.前台页面搭建

index.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>

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+'/bookListServlet',
		columns:[[
	        {field:'id',title:'书本ID',width:100},    
	        {field:'booknam

最低0.47元/天解锁文章

求哥的马子

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
EasyUi(完整版)

目录一.项目结构二.前台页面搭建三.后台开发四.运行效果1.项目结构二.前台页面搭建index.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/T
复制链接

扫一扫