EasyUi之书籍功能（CRUD）

最新推荐文章于 2023-11-09 15:08:00 发布

落日飞行

最新推荐文章于 2023-11-09 15:08:00 发布

阅读量145

点赞数

分类专栏：前端-EasyUI 文章标签： easyui 前端框架

本文链接：https://blog.csdn.net/m0_53151031/article/details/120463775

版权

前端-EasyUI 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

前言：昨天与大家分享了EasyUi项目之登录、注册以及权限树形展示，而今天的内容是继而昨天的内容，进行书籍的增删改查。而今天也会讲解到一个关于easyui的之前没有分享的新的控件---combobox（下拉框）

一、明确目标：

1、点击新增书籍时弹出新增书籍界面，而类型将会进行下拉框的显示。
2、新增一本书后，该书就会显示到未上架的界面中。

3、在未上架的界面中点击上架就会到显示到已上架中

4、在未上架的界面中点击修改就会进行修改

5、在已上架的界面中点击下架就会到显示到已下架中

二、明确功能：

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

2、修改

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

三、代码已经效果展示：

一、用combobox控件进行类型的显示：

1、思路：

1、先建好关于category表的实体类

2、之后创建categorydao层（写好查询全部的方法）

3、写好categoryaction包（这是连接前端的代码）

4、配置好mvc.xml文件

5、之后到对应该出现下拉框位置写好js代码

2、代码展示：

2.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;
	}

	public Category(long id, String name) {
		super();
		this.id = id;
		this.name = name;
	}

	@Override
	public String toString() {
		return "Category [id=" + id + ", name=" + name + "]";
	}

	public Category() {
		// TODO Auto-generated constructor stub
	}

}

2.2、categorydao（list方法）：

package com.zking.dao;

import java.util.List;

import com.zking.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);
	}

}

2.3、categoryaction：

public class CategoryAction  extends ActionSupport implements ModelDriver<Category>{
	private Category category=new Category();
	private CategoryDao cd=new CategoryDao();
	
	public Category getModel() {
		return category;
	}
	
	public String combobox(HttpServletRequest req, HttpServletResponse resp)  {
		try {
			List<Category> list = cd.list(category, null);
			ResponseUtil.writeJson(resp, list);
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}

2.4、配置好mvc.xml文件：

<action path="/category" type="com.zking.web.CategoryAction">
	</action>

2.5、写好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'   
    	});  


    });

3、效果展示：

二、增加：

1、代码展示：

	public void add(Book t) throws Exception {
		t.setPinyin(PinYinUtil.getAllPingYin(t.getName()));
		t.setDeployTime(new Date());
		String sql="insert into t_easyui_book(name,pinyin,cid,author,price,image,publishing,description,state,deployTime,sales) values(?,?,?,?,?,?,?,?,?,?,?)";
		super.executeUpdate(sql, t, new String[] {"name","pinyin","cid","author","price","image","publishing","description","state","deployTime","sales"});
	}

2.效果展示：

在右下角可以得到，数据为28条，现在进行增加

现在可以看到已经是30条数据了，新增成功

新增成功已将书籍添加到了未上架的界面中：

三、修改：

1、代码展示：

public void edit(Book t) throws Exception {
		super.executeUpdate("update t_easyui_book set name=?,pinyin=?,cid=?,"
				+ "author=?,price=?,image=?,publishing=?,description=?,state=?,deployTime=?,sales=? where id=?", t, 
				new String[] {"name","pinyin","cid","author","price","image","publishing","description","state","deployTime","sales","id"});
	}

1、效果展示：

修改前：

修改中：

修改后：

四、编辑状态：

一、在未上架的界面中点击上架就会到显示到已上架中：

1、思路：

1、在bookdao中写好编辑状态的方法名为editstatus（根据id进行state状态的修改）

2、然后找到未上架界面，找到上架的超链接

3、之后写js代码（在跳转路径中固定写好要变成的状态）

4、最后写刷新代码

2、代码展示：

bookdao：

	public void editStatus(Book t) throws Exception {
		super.executeUpdate("update t_easyui_book set state=? where id=?", t, 
				new String[] {"state","id"});
	}

listbook1.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=editStatus&state=2&id=' + row.id,
                        success:function (data) {
                        	if(data=1){
                        		$('#dg').datagrid('reload'); 
                                  //刷新的代码  
                        	}
                        }
                    })
                } 
            }
        });

    }

在其中的url中定义好要改变的状态，上架的目的就是将状态为未上架改为已上架（将state=1变成state=2）同样的刷新代码也在其中。

3、效果展示：

将改书籍上架：

上架成功：

同时在未上架界面中要上架的图书已经消失：

二、在已上架的界面中点击下架就会到显示到已下架中

1、思路：

1、和点一是一样的，采用同样的方法：

2、然后找到已上架界面，找到下架的超链接

3、之后写js代码（在跳转路径中固定写好要变成的状态）

4、最后写刷新代码

2、代码展示：采用bookdao同样的方法

listbook2.jsp：

js方法：

   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');                         }
                    })
                }
            }
        });

    }

3、效果展示：将书籍名为阿发的书籍下架

下架中：