EasyUI项目之书籍管理(CRUD)

本文详细介绍了如何使用EasyUI实现书籍管理系统的CRUD操作,包括增加书籍时利用ComboBox创建下拉列表,书籍的上架与下架功能,以及修改书籍信息的步骤。涉及实体类、DAO、Action配置,以及JavaScript代码实现。
摘要由CSDN通过智能技术生成

在上节课的基础上对书籍管理增加CRUD操作

目标效果:

目标:

1,点击新增,类型将会在下拉框中显示,增加成功后,该书会显示到未上架界面中。

2,未上架,已上架(上架,下架书籍是改变书籍的状态)。

3,已下架,查询状态为下架的书籍。

4,修改,在未上架中可选中书籍进行修改。

打开选项卡 (在上节课基础上完善选项卡功能)


$(function() {
	$("#bookMenus").tree({
		url:$("#ctx").val()+"/permission.action?methodName=tree",
	    onClick:function(node){
	    	//判断有无重复选项卡
	    	var exists=$('#bookTabs').tabs('exists',node.text);
	    	if(exists){
	    		//存在则选中
	    		$('#bookTabs').tabs('select',node.text);
	    	}else{
	    		//不存在则打开新的选项卡
	    	$('#bookTabs').tabs('add',{ 
	    	    title:node.text,    
	    	    //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.1 ComboBox(利用ComboBox控件制作下拉列表框)

实体类

CategoryDao

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 where 1=1 ";
		long id = category.getId();
		if(id != 0) {
			sql += " and id =" + id;
		}
		return super.executeQuery(sql, Category.class, pageBean);
	}
	
}

CategoryAction

package com.zking.web;

import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

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;

public class CategoryAction extends ActionSupport implements ModelDriver<Category> {

	private Category category = new Category();
	private CategoryDao categoryDao = new CategoryDao();

	public Category getModel() {
		return category;
	}

	// 类别下拉框
	public String combobox(HttpServletRequest req, HttpServletResponse resp) throws Exception {
//		获取下拉框值
		List<Category> list = categoryDao.list(category, null);
		ResponseUtil.writeJson(resp, list);
		return null;
	}
	
}
 

配置xml文件

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

js代码


	$(function () {
 	   $('#cid').combobox({
    	    url:'${pageContext.request.contextPath}/category.action?methodName=combobox',
   	     valueField:'id',
  	      textField:'name'
  	  })
	});

	//表单提交增加按钮
	function submitForm() {
	}

    function clearForm() {
    }
    

界面代码

<%@ 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="" 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&#
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

亣柒

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值