网上书城项目之动态加载下拉列表、新增页面的实现

其他 2020-08-04 13:38:38 阅读次数: 0

网上书城项目

前言

今天为大家分享的知识点还算比较简单，动态加载下拉列表、以及实现新增页面的新增功能！

动态加载下拉列表数据

注意全局样式、图标样式、组件源文件的js文件样式以及js的引用

<!-- 写全局样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">   
<!-- 定义图标的样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.1/themes/icon.css">   
<!--组件库源文件的js文件-->
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>  
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>

jsp页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>书籍新增</title>
<!-- 写全局样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">   
<!-- 定义图标的样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.1/themes/icon.css">   
<!--组件库源文件的js文件-->
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>  
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>   
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/book.js"></script>   
</head>
<body>
<!--隐藏域传值  -->
<input type="hidden" id="ctx" value="${pageContext.request.contextPath}">

<div style="margin:20px 0;"></div>
<div class="easyui-panel" title="已下架书籍" style="width:100%;padding:30px 60px;">
    <form id="ff" action="${pageContext.request.contextPath}/book.action?methodName=add" method="post">
        <div style="margin-bottom:20px">
            <input class="easyui-textbox" name="name" style="width:100%" data-options="label:'书名:',required:true">
        </div>
        <div style="margin-bottom:20px">
            <input id="cid" name="cid" value="" label="类别" >
        </div>
        <div style="margin-bottom:20px">
            <input class="easyui-textbox" name="author" style="width:100%" data-options="label:'作者:',required:true">
        </div>
        <div style="margin-bottom:20px">
            <input class="easyui-textbox" name="price" style="width:100%"
                   data-options="label:'价格:',required:true">
        </div>
        <div style="margin-bottom:20px">
            <input class="easyui-textbox" name="publishing" style="width:100%"
                   data-options="label:'出版社:',required:true">
        </div>
        <div style="margin-bottom:20px">
            <input class="easyui-textbox" name="description" style="width:100%;height:60px"
                   data-options="label:'简介:',required:true">
        </div>
        <%--默认未上架--%>
        <input type="hidden" name="state" value="1">
        <%--默认起始销量为0--%>
        <input type="hidden" name="sales" value="0">
    </form>

    <div style="text-align:center;padding:5px 0">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
    </div>
</div>
</body>
</html>

jsp页面主要使用到的代码

 <div style="margin-bottom:20px">
        <input id="cid" name="cid" value="" label="类别" >
 </div>

js代码：

$(function() {
	//下拉框动态加载
	var  ctx=$("#ctx").val();
	$('#cid').combobox({    
	    url:ctx+'/categroy.action?methodName=comboBox',    
	    valueField:'id',    
	    textField:'name'   
	});
})

注意获取过来的id要和jsp页面传过来的id保持一致！

效果

在这里插入图片描述

新增页面的实现

addBook.jsp页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>书籍新增</title>
<!-- 写全局样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">   
<!-- 定义图标的样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.1/themes/icon.css">   
<!--组件库源文件的js文件-->
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>  
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>   
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/book.js"></script>   
</head>
<body>
<!--隐藏域传值  -->
<input type="hidden" id="ctx" value="${pageContext.request.contextPath}">

<div style="margin:20px 0;"></div>
<div class="easyui-panel" title="已下架书籍" style="width:100%;padding:30px 60px;">
    <form id="ff" action="${pageContext.request.contextPath}/book.action?methodName=add" method="post">
        <div style="margin-bottom:20px">
            <input class="easyui-textbox" name="name" style="width:100%" data-options="label:'书名:',required:true">
        </div>
        <div style="margin-bottom:20px">
            <input id="cid" name="cid" value="" label="类别" >
        </div>
        <div style="margin-bottom:20px">
            <input class="easyui-textbox" name="author" style="width:100%" data-options="label:'作者:',required:true">
        </div>
        <div style="margin-bottom:20px">
            <input class="easyui-textbox" name="price" style="width:100%"
                   data-options="label:'价格:',required:true">
        </div>
        <div style="margin-bottom:20px">
            <input class="easyui-textbox" name="publishing" style="width:100%"
                   data-options="label:'出版社:',required:true">
        </div>
        <div style="margin-bottom:20px">
            <input class="easyui-textbox" name="description" style="width:100%;height:60px"
                   data-options="label:'简介:',required:true">
        </div>
        <%--默认未上架--%>
        <input type="hidden" name="state" value="1">
        <%--默认起始销量为0--%>
        <input type="hidden" name="sales" value="0">
    </form>

    <div style="text-align:center;padding:5px 0">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
    </div>
</div>
<script>

    function submitForm() {
        $('#ff').form('submit',{
            success:function (param) {
            	alert("增加成功！");
                $('#ff').form('clear');
            }
        });
    }

    function clearForm() {
        $('#ff').form('clear');
    } 
</script>
</body>
</html>

点击submit提交使用到的js调用的函数：

 function submitForm() {
        $('#ff').form('submit',{
            success:function (param) {
            	alert("增加成功！");
                $('#ff').form('clear');
            }
        });
    }

点击clear使用到的js调用的函数：

 function clearForm() {
        $('#ff').form('clear');
    }

BookDao类

public int add(Book book) throws Exception {
    String sql = "insert into t_easyui_book(name,pinyin,cid,author,price,image,publishing,description,state,deployTime,sales) " +
            "values(?,?,?,?,?,?,?,?,?,now(),?)";
    return super.executeUpdate(sql, book, new String[]{"name", "pinyin", "cid", "author", "price", "image", "publishing", "description", "state", "sales"});
}

Book类

package com.wangqiuping.entity;

import java.sql.Timestamp;

public class Book {

private  long id;
private  String name;
private  String pinyin;
private  long cid;
private  String  author;
private  float  price;
private  String image;
private  String publishing;
private  String description;
private  int  state;
private  Timestamp deployTime;
private  int sales;
public long getId() {
	return id;
}
public void setId(long id) {
	this.id = id;
}
public String getName() {
	return name;
}
public void setName(String name) {
	this.name = name;
}
public String getPinyin() {
	return pinyin;
}
public void setPinyin(String pinyin) {
	this.pinyin = pinyin;
}
public long getCid() {
	return cid;
}
public void setCid(long cid) {
	this.cid = cid;
}
public String getAuthor() {
	return author;
}
public void setAuthor(String author) {
	this.author = author;
}
public float getPrice() {
	return price;
}
public void setPrice(float price) {
	this.price = price;
}
public String getImage() {
	return image;
}
public void setImage(String image) {
	this.image = image;
}
public String getPublishing() {
	return publishing;
}
public void setPublishing(String publishing) {
	this.publishing = publishing;
}
public String getDescription() {
	return description;
}
public void setDescription(String description) {
	this.description = description;
}
public int getState() {
	return state;
}
public void setState(int state) {
	this.state = state;
}
public Timestamp getDeployTime() {
	return deployTime;
}
public void setDeployTime(Timestamp deployTime) {
	this.deployTime = deployTime;
}
public int getSales() {
	return sales;
}
public void setSales(int sales) {
	this.sales = sales;
}
public Book(long id, String name, String pinyin, long cid, String author, float price, String image, String publishing,
		String description, int state, Timestamp deployTime, int sales) {
	super();
	this.id = id;
	this.name = name;
	this.pinyin = pinyin;
	this.cid = cid;
	this.author = author;
	this.price = price;
	this.image = image;
	this.publishing = publishing;
	this.description = description;
	this.state = state;
	this.deployTime = deployTime;
	this.sales = sales;
}
public Book() {
	super();
}
public Book(long id, String name, String pinyin) {
	super();
	this.id = id;
	this.name = name;
	this.pinyin = pinyin;
}
@Override
public String toString() {
	return "Book [id=" + id + ", name=" + name + ", pinyin=" + pinyin + ", cid=" + cid + ", author=" + author
			+ ", price=" + price + ", image=" + image + ", publishing=" + publishing + ", description=" + description
			+ ", state=" + state + ", deployTime=" + deployTime + ", sales=" + sales + "]";
}
}

js代码：

//书籍新增
$(function() {
	//下拉框动态加载
	var  ctx=$("#ctx").val();
	$('#cid').combobox({    
	    url:ctx+'/categroy.action?methodName=comboBox',    
	    valueField:'id',    
	    textField:'name'   
	});
	
	//书籍新增
	$('#ff').form({
		url:ctx+'/book.action?methodName=add',
		onSubmit : function() {
		},
		success : function(data) {
			data = eval('(' + data + ')');
            if(data.code==200){
            	alert(data.msg);
            }
		}
	});	
})

效果

未增加数据前增加页面的效果
在这里插入图片描述

在增加数据之后，会提示增加成功！

在这里插入图片描述
在点击clear清空按钮之后，新增的页面效果和未增加数据前的页面效果是一样的~

可以看到数据库表格中也会多出一条我新增的数据，说明新增成功啦~
在这里插入图片描述

总结

今天的分享就到这啦，总体的业务逻辑和流程还算比较简单，注意细节部分，细节决定成败，欢迎评论留言交流哦，后续会继续分享，拜拜~

猜你喜欢

转载自blog.csdn.net/qq_45464930/article/details/107286297
今日推荐
周排行
word2Vec基础背景知识
Linux rsync实现断点续传
CNCF Dan Kohn：云原生将会在中国快速发展
知识图谱学习笔记(2)---为什么要知道知识图谱？什么是知识图谱？
table点击一行任意位置选中该行的radio按钮
(摘)springboot 配置文件
46464644
【String-easy】541. Reverse String II 反转的元素，有反转个数和间隔
微信小程序操作dom元素节点 wx.createSelectorQuery()
十年目のバレンタインデー　　　002
每日归档
更多
2024-07-19(0)
2024-07-18(0)
2024-07-17(0)
2024-07-16(0)
2024-07-15(0)
2024-07-14(0)
2024-07-13(0)
2024-07-12(0)
2024-07-11(0)
2024-07-10(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022