easyui（前后端分离）

最新推荐文章于 2020-12-20 12:01:27 发布

邓狗胖

最新推荐文章于 2020-12-20 12:01:27 发布

阅读量427

点赞数

本文链接：https://blog.csdn.net/weixin_45180919/article/details/94857477

版权

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

$(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()可以帮你办到自定义正则。
修改功能
在这里插入图片描述
增加功能：

删除功能：

邓狗胖

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
easyui（前后端分离）

easyui的crud（dialog，datagrid、form讲解）前后端分离美工、java工程师都是独立工作的，彼此之间在开发过程中是没有任何交际。在开发前约定数据交互的格式。java工程师的工作：写方法返回数据如tree_data1.json美工：只管展示tree_data1.json数据格式dao方法：（增删该查）package com.Liuyujian.Ddo;...
复制链接

扫一扫