前言:继续上一篇讲解EasyUi项目《网上书城》延展书籍的增删改查
*easyui的新的控件combobox(下拉框)
码字不易,点个关注
转载请说明!
开发工具:eclipse,MySQL
目录
3、编辑状态(上架、下架——因为上架和下架的功能是根据该书籍的状态进行区分的,1表示未上架,2表示已上架,3表示已下架)
一、目标
1、点击新增(crud)的时候弹出增加书籍界面,类型列会呈下拉框形式显示数据
2、新增一本书后,会显示未上架的界面中
3、在未上架的界面中,点击上架会显示已上架的界面中
4、在未上架中点击修改可以修改数据
5、在已上架的界面中点击下架会显示已下架的界面中
二、有什么功能?
1、用combobox控件进行类型的显示效果、增加
2、修改
3、编辑状态(上架、下架——因为上架和下架的功能是根据该书籍的状态进行区分的,1表示未上架,2表示已上架,3表示已下架)
三、代码以及效果展示
①用combobox控件进行类型的显示,并增加书籍
思路:
1.先建好关于category表的实体类
2.之后创建categorydao层(写好查询全部的方法)
3.写好categoryaction包(这是连接前端的代码)
4.配置好mvc.xml文件
5.之后到对应该出现下拉框位置写好js代码
代码
实体类
package com.hpw.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 + "]";
}
}
dao层
package com.hpw.dao;
import java.util.List;
import com.hpw.entity.Category;
import com.hpw.util.BaseDao;
import com.hpw.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.hpw.web;
import java.util.List;
public class CategoryAction extends ActionSupport implements ModelDriver<Category> {
private Category category = new Category();
private CategoryDao categoryDao = new CategoryDao();
public Category getModel() {
return category;
}
/**
* 加载书籍类别下拉框
* @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) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return null;
}
}
配置mvc文件
<action type="com.zking.web.CategoryAction" path="/category">
</action>
下拉框位置写好js代码
下拉框html代码:
<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>
js方法:
$(function () {
$('#cid').combobox({
url:'${pageContext.request.contextPath}/category.action?methodName=combobox',
valueField:'id',
textField:'name'
});
});
效果展示:
增加
dao层
public void add(Book t) throws Exception {
t.setPinyin(PinYinUtil.getAllPingYin(t.getName()));
t.setDeployTime(new Date());
super.executeUpdate("insert into t_easyui_book(name,pinyin,cid,author,price,image,publishing,description,state,deployTime,sales) values(?,?,?,?,?,?,?,?,?,?,?)"
,t, new String[] {"name","pinyin","cid","author","price","image","publishing","description","state","deployTime","sales"});
}
看数据库的book表数据,现在只要28条
点击submit提交:
增加成功,效果展示
未上架界面:
数据库:
②修改
dao层
public void edit(Book t) throws Exception {
super.executeUpdate("update t_easyui_book set name=?,pinyin=?,cid=?,image=?,state=?,sales=? where id=?",
t, new String[] {"name","pinyin","cid","image","state","sales","id"});
}
效果展示
③编辑状态
思路
一、在未上架的界面中点击上架就会到显示到已上架中:
1、思路
1.在bookdao中写好编辑状态的方法名为editstatus(根据id进行state状态的修改)
2.然后找到未上架界面,找到上架的超链接
3.之后写js代码(在跳转路径中固定写好要变成的状态)
4.最后写刷新代码
2、代码
dao层
public void editStatu(Book t) throws Exception {
super.executeUpdate("update t_easyui_book set state=? where id=?",
t, new String[] {"state","id"});
}
jsp界面
js代码
function shangjia() {
$.messager.confirm('确认','您确认想要上架此书籍吗?',function(r){
if (r){
var row = $('#dg').datagrid('getSelected');
if (row){
$.ajax({
url:'${pageContext.request.contextPath}/book.action?methodName=editStatu&state=2&id=' + row.id,
success:function (data) {
}
})
}
}
});
}
在其中的url中定义好要改变的状态,上架的目的就是将状态为未上架改为已上架(将state=1变成state=2)同样的刷新代码也在其中
效果展示
将书籍上架
已上架界面
未上架界面
到这里就结束了,功能实现并不难,只要细心与认真都到位就可以了
欢迎大佬指点