EasyUi项目《网上书城》之书籍功能(CRUD)

前言:继续上一篇讲解EasyUi项目《网上书城》延展书籍的增删改查

*easyui的新的控件combobox(下拉框)

码字不易,点个关注

转载请说明!

开发工具:eclipse,MySQL 


目录

一、目标

二、有什么功能?

     1、用combobox控件进行类型的显示效果、增加

     2、修改

     3、编辑状态(上架、下架——因为上架和下架的功能是根据该书籍的状态进行区分的,1表示未上架,2表示已上架,3表示已下架)

三、代码以及效果展示

①用combobox控件进行类型的显示,并增加书籍

②修改

③编辑状态


 

一、目标

     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)同样的刷新代码也在其中

效果展示

将书籍上架

已上架界面

 未上架界面

到这里就结束了,功能实现并不难,只要细心与认真都到位就可以了

欢迎大佬指点 

Supongo que te gusta

Origin blog.csdn.net/weixin_56069070/article/details/120469048
Recomendado
Clasificación