EasyUI的combook组件,个人项目增加
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>