1.下拉框的实体类
package com.zking.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; } @Override public String toString() { return "Category [id=" + id + ", name=" + name + "]"; } }
2.dao方法
package com.zking.dao; import java.util.Date; import java.util.List; import com.zking.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())); //增加时间 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"}); } }
3.CategoryAction
package com.zking.web; import com.zking.dao.CategoryDao; import com.zking.entity.Category; import com.zking.framework.ActionSupport; import com.zking.framework.ModelDriver; import com.zking.util.ResponseUtil; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.util.List; public class CategoryAction extends ActionSupport implements ModelDriver<Category> { private Category category = new Category(); private CategoryDao categoryDao = new CategoryDao(); /** * 加载书籍类别下拉框 * @param req * @param resp * @return */ public String combobox(HttpServletRequest req, HttpServletResponse resp){ try { List<Category> list = categoryDao.list(category, null); ResponseUtil.writeJson(resp,list); } catch (Exception e) { e.printStackTrace(); } return null; } @Override public Category getModel() { return category; } }
4.配置mvc.xml文件
<action type="com.zking.web.CategoryAction" path="/Category"> </action>
5.新增下拉框組
$(function () { $('#cid').combobox({ url:'${pageContext.request.contextPath}/category.action?methodName=combobox', valueField:'id', textField:'name' }); });
6.运行效果
1.增加书籍的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/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:'价格:',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 () { $('#cid').combobox({ url:'${pageContext.request.contextPath}/Category.action?methodName=combobox', valueField:'id', textField:'name' }); }); function submitForm() { $('#ff').form('submit',{ success:function(data){ if(data=1){ $('#ff').form('clear'); } } }); } function clearForm() { $('#ff').form('clear'); } </script> </body> </html>
2.书籍的实体类
package com.zking.entity; import java.util.Date; import com.fasterxml.jackson.annotation.JsonFormat; public class Book { // id bigint // name varchar 书籍名称 // pinyin varchar 拼音 // cid bigint 书籍类别 // author varchar 作者 // price float 价格 // image varchar 图片路径 // publishing varchar 出版社 // desc varchar 描述 // state int 书籍状态(1 未上架 2 已上架 3 已下架 默认值1 ) // deployTime datetime 上架时间 // sales int 销量 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",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; } @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 + "]"; } }
3.dao方法
package com.zking.dao; import java.util.Date; import java.util.List; import com.zking.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())); //增加时间 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"}); } }
3.BookAction(调用add方法)
package com.zking.web; import java.util.List; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.zking.dao.BookDao; import com.zking.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 bookDao=new BookDao(); public Book getModel() { return book; } public void list(HttpServletRequest req, HttpServletResponse resp) { PageBean pageBean=new PageBean(); pageBean.setRequest(req); try { List<Book>list=bookDao.list(book, pageBean); ResponseUtil.writeJson(resp, new R() .data("total",pageBean.getTotal()) .data("rows",list)); } catch (Exception e) { e.printStackTrace(); } } public void add(HttpServletRequest req, HttpServletResponse resp) { try { bookDao.add(book); ResponseUtil.writeJson(resp, 1); } catch (Exception e) { e.printStackTrace(); try { ResponseUtil.writeJson(resp, 0); } catch (Exception e2) { e.printStackTrace(); } } } /** * 如果上架,书籍的状态改为2 * 如果下架,书籍的状态改为3 * @param req * @param resp */ public void edit(HttpServletRequest req, HttpServletResponse resp) { try { bookDao.edit(book); ResponseUtil.writeJson(resp, 1); } catch (Exception e) { e.printStackTrace(); try { ResponseUtil.writeJson(resp, 0); } catch (Exception e2) { e.printStackTrace(); } } } //上架 public void editStatus(HttpServletRequest req, HttpServletResponse resp) { try { bookDao.editStatus(book); ResponseUtil.writeJson(resp, 1); } catch (Exception e) { e.printStackTrace(); try { ResponseUtil.writeJson(resp, 0); } catch (Exception e1) { e1.printStackTrace(); } } } }
4.mvc.xml配置
<action type="com.zking.web.BookAction" path="/book"> </action>
5.新增界面(addBook.jsp)
function submitForm() { $('#ff').form('submit',{ url:'${pageContext.request.contextPath}/book.action?methodName=add', success:function(data){ if(data=1){ $('#ff').form('clear'); } } }); }
6.运行效果:
function shangjia() { $.messager.confirm('确认','您确认想要上架此书籍吗?',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) { } }) } } }); }
listBook1.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/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:'价格:',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=""> <%--默认起始销量为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="书籍图标上传" 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('确认','您确认想要上架此书籍吗?',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:'价格',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:'书籍状态',width:100}, {field: 'sales', title: '销量', width: 50}, {field: 'deployTime', title: '上架时间', 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>
运行效果:
function xiajia() { $.messager.confirm('确认','您确认想要下架此书籍吗?',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) { $('#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('确认','您确认想要下架此书籍吗?',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) { $('#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:'价格',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:'书籍状态',width:100}, {field: 'sales', title: '销量', width: 50}, {field: 'deployTime', title: '上架时间', width: 50, align: 'right'}, { field: 'xxxx', title: '操作', width: 100, formatter: function (value, row, index) { return '<a href="#" onclick="xiajia();">下架</a>'; } } ]] }); }) </script> </body> </html>
运行效果: