目標(biāo)：
?顯示選項(xiàng)卡?
$(function() {$("#bookMenus").tree({url:$("#ctx").val()+"/Permission.action?methodName=tree",//點(diǎn)擊事件（API中 Tree（樹）的事件onclick）onClick:function(node){//拿到打開的tabs選項(xiàng)卡，與打開的選項(xiàng)卡做對(duì)比（exists）var exists=$('#bookTabs').tabs('exists',node.text);//判斷tabs選項(xiàng)卡是否存在if(exists){//存在就選中$('#bookTabs').tabs('select',node.text);}else{//不存在就打開（Layout(布局)的tabs(選項(xiàng)卡)中的add方法）$('#bookTabs').tabs('add',{ title:node.text, //在內(nèi)容區(qū)打開一個(gè)頁面//node.attributes.self.menuURL獲得路徑content:'<iframe width="100%" height="100%" src="'+$("#ctx").val()+node.attributes.self.url+'"></iframe>', closable:true, tools:[{ iconCls:'icon-mini-refresh', handler:function(){ alert('refresh'); } }] });}}});
})
一、書籍類別下拉框
1、實(shí)體類、dao、web
①、實(shí)體類
package com.mwy.entity;
public class Category {private long id;private String name;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;}@Overridepublic String toString() {return "Category [id=" + id + ", name=" + name + "]";}
}
②、CategoryDao?
package com.mwy.dao;
import java.util.List;
import com.mwy.entity.Category;
import com.zking.util.BaseDao;
import com.zking.util.PageBean;public class CategoryDao extends BaseDao<Category>{//查詢public List<Category> list( Category category, PageBean pageBean) throws Exception {String sql="select * from t_easyui_category";return super.executeQuery(sql, Category.class, pageBean);}
}
③、CategoryAction
package com.mwy.web;import java.util.List;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import com.mwy.dao.CategoryDao;
import com.mwy.entity.Category;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.ResponseUtil;
public class CategoryAction extends ActionSupport implements ModelDriver<Category>{private Category category=new Category();private CategoryDao cd=new CategoryDao();/*** 書籍類別下拉框*/public String combobox(HttpServletRequest req, HttpServletResponse resp) {try {List<Category> list = cd.list(category, null);ResponseUtil.writeJson(resp, list);} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}return null;}public Category getModel() {return category;}
}
2、配置
、<action path="/category" type="com.mwy.web.CategoryAction">
?? ?</action>
3、新增界面
①、代碼
$(function () {
? ? ? ? $('#cid').combobox({
? ? ? ? ? ? url:'${pageContext.request.contextPath}/category.action?methodName=combobox',
? ? ? ? ? ? valueField:'id',
? ? ? ? ? ? textField:'name'
? ? ? ? });
? ? });
<%@ 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/easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/js/easyui/themes/icon.css"><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script><script type="text/javascript"src="${pageContext.request.contextPath}/static/js/easyui/jquery.easyui.min.js"></script><script src="${pageContext.request.contextPath}/static/js/main.js"></script>
</head>
<body>
<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="類別" ><%--<select class="easyui-combobox" name="cid" label="類別" style="width:100%">--%><%--<option value="1">文藝</option>--%><%--<option value="2">小說</option>--%><%--<option value="3">青春</option>--%><%--</select>--%></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:'價(jià)格:',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:'簡(jiǎn)介:',required:true"></div><%--默認(rèn)未上架--%><input type="hidden" name="state" value="1"><%--默認(rèn)起始銷量為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 () {$('#cid').combobox({url:'${pageContext.request.contextPath}/category.action?methodName=combobox',valueField:'id',textField:'name'});});function submitForm() {}function clearForm() {}
</script>
</body>
</html>
②、界面展示
?二、新增書籍
1、實(shí)體類、dao、web
①、實(shí)體類
設(shè)置時(shí)間格式
@JsonFormat(pattern="yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")
package com.mwy.entity;
import java.util.Date;
import com.fasterxml.jackson.annotation.JsonFormat;
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;@JsonFormat(pattern="yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")private Date 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 Date getDeployTime() {return deployTime;}public void setDeployTime(Date deployTime) {this.deployTime = deployTime;}public int getSales() {return sales;}public void setSales(int sales) {this.sales = sales;}@Overridepublic 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 + "]";}
}
②、BookDao?（調(diào)用add方法）
記得到j(luò)ar包和pinyinutil類
book.setPinyin(PinYinUtil.getAllPingYin(book.getName()));
package com.mwy.dao;
import java.util.Date;
import java.util.List;
import com.mwy.entity.Book;
import com.zking.util.BaseDao;
import com.zking.util.PageBean;
import com.zking.util.PinYinUtil;
import com.zking.util.StringUtils;
public class BookDao extends BaseDao<Book> {/*** 查詢* @param book* @param pageBean* @return* @throws Exception*/public List<Book> list(Book book, PageBean pageBean) throws Exception {String sql="select * from t_easyui_book where 1=1";String name=book.getName();int state = book.getState();if(StringUtils.isNotBlank(name)) {sql+=" and name like '%"+name+"%'";}if(state!=0) {sql+=" and state="+state;}return super.executeQuery(sql, Book.class, pageBean);}/*** 修改* @param book* @param attrs* @throws Exception*/public void edit( Book book) throws Exception {String sql="update t_easyui_book set name=?,pinyin=?,cid=?,image=?,state=?,sales=? where id=?";super.executeUpdate(sql, book, new String[] {"name","pinyin","cid","image","state","sales","id"});}/*** 增加* @param book* @param attrs* @throws Exception*/public void add( Book book) throws Exception {String sql="insert into t_easyui_book(name,pinyin,cid,author,price,image,publishing,description,state,deployTime,sales) values(?,?,?,?,?,?,?,?,?,?,?)";//增加拼音book.setPinyin(PinYinUtil.getAllPingYin(book.getName()));//增加時(shí)間book.setDeployTime(new Date());super.executeUpdate(sql, book, new String[] {"name","pinyin","cid","author","price","image","publishing","description","state","deployTime","sales"});}//上架public void editStatus(Book book) throws Exception {String sql="update t_easyui_book set state=? where id=?";super.executeUpdate(sql, book, new String[] {"state","id"});}
}
③、BookAction （調(diào)用add方法）
package com.mwy.web;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.mwy.dao.BookDao;
import com.mwy.entity.Book;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.PageBean;
import com.zking.util.R;
import com.zking.util.ResponseUtil;
public class BookAction extends ActionSupport implements ModelDriver<Book>{private Book book=new Book();private BookDao bd=new BookDao();//查詢public void list(HttpServletRequest req, HttpServletResponse resp) {PageBean pageBean=new PageBean();pageBean.setRequest(req);try {List<Book> list = bd.list(book, pageBean);ResponseUtil.writeJson(resp, new R().data("total", pageBean.getTotal()).data("rows", list));} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}}//增加public void add(HttpServletRequest req, HttpServletResponse resp) {try {bd.add(book);ResponseUtil.writeJson(resp, 1);} catch (Exception e) {e.printStackTrace();try {ResponseUtil.writeJson(resp, 0);} catch (Exception e1) {e1.printStackTrace();}}} /*** 如果上架，書籍狀態(tài)改為2* 如果下架，書籍狀態(tài)改為3* @param req* @param resp*/public void edit(HttpServletRequest req, HttpServletResponse resp) {try {bd.edit(book);ResponseUtil.writeJson(resp, 1);} catch (Exception e) {e.printStackTrace();try {ResponseUtil.writeJson(resp, 0);} catch (Exception e1) {e1.printStackTrace();}}}//上架public void editStatus(HttpServletRequest req, HttpServletResponse resp) {try {bd.editStatus(book);ResponseUtil.writeJson(resp, 1);} catch (Exception e) {e.printStackTrace();try {ResponseUtil.writeJson(resp, 0);} catch (Exception e1) {e1.printStackTrace();}}}public Book getModel() {return book;}
}
2、配置
<?xml version="1.0" encoding="UTF-8"?>
<config><action path="/book" type="com.mwy.web.BookAction"></action></config>
3、新增界面（addBook.jsp）
①、代碼
<script>
//表單提交增加按鈕function submitForm() {$('#ff').form('submit',{url:'${pageContext.request.contextPath}/book.action?methodName=add',success:function (data) {if(data==1){$('#ff').form('clear');}}});}
</script>
②、界面展示
?三、書籍上架
1、在上面新增書籍中：
①、BookDao?（調(diào)用editStatus方法）
②、BookAction（調(diào)用editStatus方法）
2、界面代碼
//上架書籍
? ? function shangjia() {
? ? ? ? $.messager.confirm('確認(rèn)','您確認(rèn)想要上架此書籍嗎？',function(r){
? ? ? ? ? ? if (r){
? ? ? ? ? ? ? ? var row = $('#dg').datagrid('getSelected');
? ? ? ? ? ? ? ? if (row){
? ? ? ? ? ? ? ? ? ? $.ajax({
? ? ? ? ? ? ? ? ? ? ? ? url:'${pageContext.request.contextPath}/book.action?methodName=editStatus&state=2&id=' + row.id,
? ? ? ? ? ? ? ? ? ? ? ? success:function (data) {
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? }?
? ? ? ? ? ? }
? ? ? ? });
? ? }
<%@ 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/easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/js/easyui/themes/icon.css"><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script><script type="text/javascript"src="${pageContext.request.contextPath}/static/js/easyui/jquery.easyui.min.js"></script><script src="${pageContext.request.contextPath}/static/js/main.js"></script>
</head>
<body><%--未上架書籍--%>
<table id="dg" style="style=" width:400px;height:200px;
"></table><div id="tb"><input class="easyui-textbox" id="name" name="name" style="width:20%;padding-left: 10px" data-options="label:'書名:',required:true"><a id="btn-search" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜索</a>
</div><!-- 彈出框提交表單所用 -->
<div id="dd" class="easyui-dialog" title="編輯窗體" style="width:600px;height:450px;"data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,buttons:'#bb'"><form id="ff" action="${pageContext.request.contextPath}/book.action?methodName=edit" 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="類別" ><%--<select class="easyui-combobox" name="cid" label="類別" style="width:100%">--%><%--<option value="1">文藝</option>--%><%--<option value="2">小說</option>--%><%--<option value="3">青春</option>--%><%--</select>--%></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:'價(jià)格:',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:'簡(jiǎn)介:',required:true"></div><%--默認(rèn)未上架--%><input type="hidden" name="state" value=""><%--默認(rèn)起始銷量為0--%><input type="hidden" name="sales" value=""><input type="hidden" name="id" value=""><input type="hidden" name="image" value=""></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><!-- 圖片上傳 -->
<div id="dd2" class="easyui-dialog" title="書籍圖標(biāo)上傳" style="width:600px;height:450px;"data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,buttons:'#bb'"><form id="ff2" action="" method="post" enctype="multipart/form-data"><div style="margin-bottom:20px"><input type="file" name="file"></div></form><div style="text-align:center;padding:5px 0"><a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm2()" style="width:80px">Submit</a><a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a></div></div></body>
<script>
//上架書籍function shangjia() {$.messager.confirm('確認(rèn)','您確認(rèn)想要上架此書籍嗎？',function(r){if (r){var row = $('#dg').datagrid('getSelected');if (row){$.ajax({url:'${pageContext.request.contextPath}/book.action?methodName=editStatus&state=2&id=' + row.id,success:function (data) {$('#dg').datagrid('reload');}})} }});}//修改function edit() {$('#cid').combobox({url:'${pageContext.request.contextPath}/category.action?methodName=list',valueField:'id',textField:'name'});var row = $('#dg').datagrid('getSelected');if (row) {$('#ff').form('load', row);$('#dd').dialog('open');}}//提交編輯信息的表單function submitForm() {$('#ff').form('submit',{success: function (param) {$('#dd').dialog('close');$('#dg').datagrid('reload');$('#ff').form('clear');}});}function clearForm() {$('#ff').form('clear');}//圖片上傳function upload() {$('#dd2').dialog('open');}//圖片上傳表單提交function submitForm2() {var row = $('#dg').datagrid('getSelected');console.log(row);// if (row) {// $('#ff2').attr("action", $('#ff2').attr("action") + "&id=" + row.id);// }$('#ff2').form('submit', {url: '${pageContext.request.contextPath}/book.action?methodName=upload&id=' + row.id,success: function (param) {$('#dd2').dialog('close');$('#dg').datagrid('reload');$('#ff2').form('clear');}})}$(function () {$("#btn-search").click(function () {$('#dg').datagrid('load', {name: $("#name").val()});});$('#dg').datagrid({url: '${pageContext.request.contextPath}/book.action?methodName=list&&state=1',fit: true,fitColumns: true,pagination: true,singleSelect: true,toolbar:'#tb',columns: [[// {field:'id',title:'id',width:100},{field: 'id', title: '書籍名稱', hidden: true},{field: 'name', title: '書籍名稱', width: 50},{field: 'pinyin', title: '拼音', width: 50},{field: 'cid', title: '書籍類別', width: 50, formatter: function (value, row, index) {if (row.cid == 1) {return "文藝";} else if (row.cid == 2) {return "小說";} else if (row.cid == 3) {return "青春";} else {return value;}}},{field: 'author', title: '作者', width: 50},// {field:'price',title:'價(jià)格',width:100},{field: 'image', title: '圖片路徑', width: 100, formatter: function (value, row, index) {return '<img style="width:80px;height: 60px;" src="' + row.image + '"></img>';}},{field: 'publishing', title: '出版社', width: 50},// {field:'desc',title:'描述',width:100},// {field:'state',title:'書籍狀態(tài)',width:100},{field: 'sales', title: '銷量', width: 50},{field: 'deployTime', title: '上架時(shí)間', width: 50, align: 'right'},{field: 'xxxx', title: '操作', width: 100, formatter: function (value, row, index) {return '<a href="#" onclick="upload()">圖片上傳</a> ' +'<a href="#" onclick="shangjia()">上架</a> ' +'<a href="#" onclick="edit();">修改</a>';}}]]});})</script>
</html>
3、結(jié)果界面展示
?四、書籍下架
1、在上面新增書籍中：
①、BookDao?（調(diào)用editStatus方法）
②、BookAction（調(diào)用editStatus方法）
2、界面代碼
?function xiajia() {
? ? ? ? $.messager.confirm('確認(rèn)','您確認(rèn)想要下架此書籍嗎？',function(r){
? ? ? ? ? ? if (r){
? ? ? ? ? ? ? ? var row = $('#dg').datagrid('getSelected');
? ? ? ? ? ? ? ? if (row){
? ? ? ? ? ? ? ? ? ? $.ajax({
? ? ? ? ? ? ? ? ? ? ? ? url:'${pageContext.request.contextPath}/book.action?methodName=editStatus&state=3&id=' + row.id,
? ? ? ? ? ? ? ? ? ? ? ? success:function (data) {
? ? ? ? ? ? ? ? ? ? ? ? ?? ?//刷新表格數(shù)據(jù)
? ? ? ? ? ? ? ? ? ? ? ? ?? ?$('#dg').datagrid('reload');
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? });? }
<%@ 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/easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/js/easyui/themes/icon.css"><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script><script type="text/javascript"src="${pageContext.request.contextPath}/static/js/easyui/jquery.easyui.min.js"></script><script src="${pageContext.request.contextPath}/static/js/main.js"></script>
</head>
<body>
<table id="dg" style="style=" width:400px;height:200px;
"></table><script>function xiajia() {$.messager.confirm('確認(rèn)','您確認(rèn)想要下架此書籍嗎？',function(r){if (r){var row = $('#dg').datagrid('getSelected');if (row){$.ajax({url:'${pageContext.request.contextPath}/book.action?methodName=editStatus&state=3&id=' + row.id,success:function (data) {//刷新表格數(shù)據(jù)$('#dg').datagrid('reload');}})}}});}$(function () {$('#dg').datagrid({url: '${pageContext.request.contextPath}/book.action?methodName=list&&state=2',fit: true,fitColumns: true,pagination: true,singleSelect: true,columns: [[// {field:'id',title:'id',width:100},{field: 'id', title: '書籍名稱', hidden: true},{field: 'name', title: '書籍名稱', width: 50},{field: 'pinyin', title: '拼音', width: 50},{field: 'cid', title: '書籍類別', width: 50, formatter: function (value, row, index) {if (row.cid == 1) {return "文藝";} else if (row.cid == 2) {return "小說";} else if (row.cid == 3) {return "青春";} else {return value;}}},{field: 'author', title: '作者', width: 50},// {field:'price',title:'價(jià)格',width:100},{field: 'image', title: '圖片路徑', width: 100, formatter: function (value, row, index) {return '<img style="width:80px;height: 60px;" src="' + row.image + '"></img>';}},{field: 'publishing', title: '出版社', width: 50},// {field:'desc',title:'描述',width:100},// {field:'state',title:'書籍狀態(tài)',width:100},{field: 'sales', title: '銷量', width: 50},{field: 'deployTime', title: '上架時(shí)間', width: 50, align: 'right'},{field: 'xxxx', title: '操作', width: 100, formatter: function (value, row, index) {return '<a href="#" onclick="xiajia();">下架</a>';}}]]});})
</script>
</body>
</html>
3、結(jié)果界面展示
?今天結(jié)束了~~
掰掰
總結(jié)
以上是生活随笔為你收集整理的自定义MVC项目02的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
