easyui的crud(dialog,datagrid、form讲解)
前后端分离
美工、java工程师都是独立工作的,彼此之间在开发过程中是没有任何交际。
在开发前约定数据交互的格式。
java工程师的工作:写方法返回数据如tree_data1.json
美工:只管展示tree_data1.json
数据格式
dao方法:(增删该查 )
package com.Liuyujian.Ddo;
import java.sql.SQLException;
import java.util.List;
import java.util.Map;
import javax.swing.JButton;
import com.Liuyujain.util.JsonBaseDao;
import com.Liuyujain.util.PageBean;
public class UserDao extends JsonBaseDao {
//查询
public List<Map<String, Object>> list(Map<String, String[]> paMap,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
String sql="select * from tb_user where true";
return super.executeQuery(sql, pageBean);
}
//修改
public int edit(Map<String,String[]> paMap) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
String sql="update tb_user set uname=? ,upwd=? ,upid=? where uid=?";
return super.executeUpdate(sql, new String[] {"uname","upwd","upid","uid"},paMap);
}
//增加
public int add(Map<String,String[]> paMap) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
String sql="insert into tb_user(uname,upwd,upid)values(?,?,?) ";
return super.executeUpdate(sql, new String[] {"uname","upwd","upid"},paMap);
}
// 删除
public int dele(Map<String,String[]> paMap) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
String sql="delete from tb_user where uid= ?";
return super.executeUpdate(sql, new String[] {"uid"},paMap);
}
}
子控制器(UserAction)
package com.Liuyujian.web;
import java.sql.SQLException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.Liuyujain.util.PageBean;
import com.Liuyujain.util.ResponseUtil;
import com.Liuyujian.Ddo.Bookdao;
import com.Liuyujian.Ddo.UserDao;
import com.dengrenli.framework.ActionSupport;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
public class UserAction extends ActionSupport {
UserDao dao=new UserDao();
public String list(HttpServletRequest req,HttpServletResponse resp) throws JsonProcessingException, Exception {
ObjectMapper om=new ObjectMapper();
PageBean pageBean=new PageBean();
pageBean.setRequest(req);
try {
List<Map<String, Object>> list = this.dao.list(req.getParameterMap(), pageBean);
Map<String, Object> map=new HashMap<String,Object>();
map.put("total", pageBean.getTotal());
map.put("rows", list);
ResponseUtil.write(resp, om.writeValueAsString(map));
} catch (InstantiationException | IllegalAccessException | SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return null;
}
public String edit(HttpServletRequest req,HttpServletResponse resp) throws JsonProcessingException, Exception {
try {
int code=this.dao.edit(req.getParameterMap());
ObjectMapper om=new ObjectMapper();
Map<String, Object> map=new HashMap<String,Object>();
map.put("code", code);
ResponseUtil.write(resp, om.writeValueAsString(map));
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
}
return null;
}
public String add(HttpServletRequest req,HttpServletResponse resp) throws JsonProcessingException, Exception {
try {
int code=this.dao.add(req.getParameterMap());
ObjectMapper om=new ObjectMapper();
Map<String, Object> map=new HashMap<String,Object>();
map.put("code", code);
ResponseUtil.write(resp, om.writeValueAsString(map));
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
}
return null;
}
public String dele(HttpServletRequest req,HttpServletResponse resp) throws JsonProcessingException, Exception {
try {
int code=this.dao.dele(req.getParameterMap());
ObjectMapper om=new ObjectMapper();
Map<String, Object> map=new HashMap<String,Object>();
map.put("code", code);
ResponseUtil.write(resp, om.writeValueAsString(map));
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
}
return null;
}
}
JS
$(function(){
$('#dg').datagrid({
url:'UserAction.action?methodName=list',
fit:true,
fitColumns:true,
pagination:true,
singleSelect:true,
columns:[[
{field:'uid',title:'Id',width:150},
{field:'uname',title:'姓名',width:150},
{field:'upwd',title:'密码',width:150},
{field:'upid',title:'树型id',width:150,align:'right'} ,
]] ,
toolbar: [{
iconCls: 'icon-add',
handler: function(){
$('#dd').dialog('open')
$("#ff").form('load',row);
}
},'-',{
iconCls: 'icon-edit',
handler: function(){
$('#dd').dialog('open')
//在datag控件中找到需要回填的数据
var row= $('#dg').datagrid('getSelected');
if(row){
//get_data.php指的是回填的数据
$("#ff").form('load',row);
}
}
},'-',{
iconCls: 'icon-remove',
handler: function(){
var row =$('#dg').datagrid('getSelected');//选择你要删除的行
if(row){//是否选中
$.ajax({
url:$("#ctx").val()+'/UserAction.action?methodName=dele&&uid='+row.uid, //传一个删除del方法跟serialNo列名值
});
$('#dg').datagrid('reload');//刷新方法
alert('删除成功');
}
else{
alert('删除失败');
}
}
},'-',{
iconCls:'icon-search',
}]
});
})
function ok(){
alert('ok');
$('#ff').form('submit', {
url:'bookAction.action?methodName=edit',
success:function(data){
//清空
$('#ff').form('clear');
//关闭
$('#dd').dialog('close');
//刷新
$('#dg').datagrid('reload');
}
});
}
function add(){
$('#ff').form('submit', {
url:'UserAction.action?methodName=add',
success:function(data){
$('#ff').form('clear');
$('#dd').dialog('close');
$('#dg').datagrid('reload');
}
});
}
jsp界面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/static/js/public/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/static/js/public/easyui/themes/icon.css">
<script type="text/javascript"
src="${pageContext.request.contextPath}/static/js/public/easyui/jquery.min.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath}/static/js/user.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath}/static/js/public/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<table id="dg"></table>
<div id="dd" class="easyui-dialog" title="操作" style="width:400px;height:200px;" data-options="iconCls:'icon-save',resizable:true,modal:true, closed:true,buttons:'#bb'">
<form id="ff" method="post">
<input type="hidden" name="uid">
<div>
<label for="uname">uname:</label>
<input class="easyui-validatebox" type="text" name="uname" data-options="required:true" />
</div>
<div>
<label for="upwd">upwd:</label>
<input class="easyui-validatebox" type="text" name="upwd" data-options="required:true" />
</div>
<div>
<label for="upid">upid:</label>
<input class="easyui-validatebox" type="text" name="upid" data-options="required:true" />
</div>
</form>
</div>
<div id="bb">
<a href="#" class="easyui-linkbutton" onclick="add()">增加</a>
<a href="#" class="easyui-linkbutton" onclick="ok()">修改</a>
<a href="#" class="easyui-linkbutton">关闭</a>
</div>
</body>
</html>
运行结果
easyui自带正则:
但是如果你想要正则规则在easyui中不存在,easyui中只是定义了一些常见的正则,那么可以在easyui中自定义validType:“xxx”
这个xxx,就是代表一种正则,$.extends()可以帮你办到自定义正则。
修改功能
增加功能:
删除功能: