EasyUI的combobok组件

最新推荐文章于 2020-09-14 16:29:56 发布

Bug本身

最新推荐文章于 2020-09-14 16:29:56 发布

阅读量280

点赞数

分类专栏： easyui 文章标签： easyui java

本文链接：https://blog.csdn.net/ZhiCun_java/article/details/107147913

版权

easyui 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

EasyUI的combook组件，个人项目增加

combobok组件后台加载数据
个人项目新增

combobok组件后台加载数据

效果图

在这里插入图片描述

后端

数据库表

在这里插入图片描述

实体类

package com.rong.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;
	}
	public Category() {
		super();
	}
}

dao层

package com.rong.dao;

import java.util.List;

import com.rong.entity.Category;
import com.rong.utils.BaseDao;
import com.rong.utils.PageBean;

public class CategoryDao extends BaseDao<Category>{

	public List<Category> list() throws Exception{
		String sql="select * from t_easyui_category where true";
		return super.executeQuery(sql, null, Category.class);
	}
}

action类

package com.rong.web;

import java.io.IOException;
import java.sql.SQLException;

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

import com.rong.dao.CategoryDao;
import com.rong.entity.Category;
import com.rong.framework.ActionSupport;
import com.rong.framework.ModelDriven;
import com.rong.utils.ResponseUtil;

public class CategoryAction extends ActionSupport implements ModelDriven<Category>{

	private Category category=new Category();
	private CategoryDao catedao=new CategoryDao();
	
	@Override
	public Category getModel() {
		return category;
	}
	
	public String comboox(HttpServletRequest req,HttpServletResponse resp) throws IOException {
		try {
			ResponseUtil.writeJson(resp, this.catedao.list());
		} catch (InstantiationException e) {
			e.printStackTrace();
		} catch (IllegalAccessException e) {
			e.printStackTrace();
		} catch (SQLException e) {
			e.printStackTrace();
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}
}

前端

xml配置

在这里插入图片描述

js文件

$(function(){
	var ctx=$("#ctx").val();
	$('#cid').combobox({    
	    url:ctx+'/category.action?methodName=comboox',    
	    valueField:'id',
	    textField:'name'
	});  
})

jsp代码

在这里插入图片描述

个人项目新增

效果图

在这里插入图片描述

后台

这里用的是上次组件的后台
book增删改后台

前端

addbook.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 全局样式 -->
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">
<!-- 定义图标 -->
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">
<script type="text/javascript"
	src="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>
<!-- 组件库源码-js文件 -->
<script type="text/javascript"
	src="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/static/js/book.js"></script>
<title>书籍新增</title>
</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=save" 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="类别" >
        </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 submitForm() {
        $('#ff').form('submit',{
            success:function (param) {
                $('#ff').form('clear');
                
            }
        });
    }
    function clearForm() {
        $('#ff').form('clear');
    }
</script>
</body>
</html>

增加后数据库数据

在这里插入图片描述

Bug本身

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
EasyUI的combobok组件

EasyUI的combook组件，个人项目增加combook组件后台加载数据效果图后端数据库表实体类dao层action类前端xml配置js文件jsp代码个人项目新增效果图后台前端addbook.jsp增加后数据库数据combook组件后台加载数据效果图后端数据库表实体类package com.rong.entity;public class Category { private long id; private String name; public long getId()
复制链接

扫一扫

专栏目录