easyui的crud（dialog，datagrid、form讲解）
1、datagrid布局
2、dialog布局
3、form布局
4、通用的JsonBaseDao增删改方法
5、dao层
6、web层
7、功能完善

导入jar包

MVC_Book_dao

package com.hmc.dao;

import java.util.List;

import java.util.Map;

import com.hmc.util.JsonBaseDao;

import com.hmc.util.JsonUtils;

import com.hmc.util.PageBean;

import com.hmc.util.StringUtils;

public class MVC_Book_dao extends JsonBaseDao{

	/**

	 * 查询分页

	 * @param paMap

	 * @param pageBean

	 * @return

	 * @throws Exception

	 */

	 public  List<Map<String, Object>> list(Map<String, String[]> paMap,PageBean pageBean) throws Exception{

		//String sql="SELECT * FROM t_book";

		 String sql="SELECT * FROM t_mvc_book where true ";

		  String bname=JsonUtils.getParamVal(paMap, "bname");

		  System.out.println(bname);

		//  String bid=JsonUtils.getParamVal(paMap, "bid");

		  if(StringUtils.isNotBlank(bname)) {

			  sql+=" and bname like '%"+bname+"%'";

		  }

//		  if(bid!=null) {

//			  sql+=" and bid="+bid;

//		  }

		return super.executeQuery(sql, pageBean);

	  }

	 /**

	  * 修改

	  * @param paMap

	  * @param pageBean

	  * @return

	  * @throws NoSuchFieldException

	  * @throws Exception

	  */

	 public   int upde(Map<String, String[]> paMap,PageBean pageBean) throws NoSuchFieldException, Exception {

		  String sql="update t_mvc_book set bname=?,price=? where bid=?";

		return super.executeUpdate(sql, new String[] {"bname","price","bid"}, paMap);

	  }

	 /**

	  * 新增

	  * @param paMap

	  * @param pageBean

	  * @return

	  * @throws NoSuchFieldException

	  * @throws Exception

	  */

	 public  int add(Map<String, String[]> paMap,PageBean pageBean) throws NoSuchFieldException, Exception {

		 String sql="insert into  t_mvc_book values(?,?,?)";

		return super.executeUpdate(sql, new String[] {"bid","bname","price"}, paMap);

	  }

	 /**

	  * 删除

	  * @param paMap

	  * @param pageBean

	  * @return

	  * @throws NoSuchFieldException

	  * @throws Exception

	  */

	 public  int dele(Map<String, String[]> paMap,PageBean pageBean) throws NoSuchFieldException, Exception {

		  String sql="delete from t_mvc_book  where bid=?";

		return super.executeUpdate(sql, new String[] {"bid"}, paMap);

	  }

}

　　MVC_Book_Action

package com.hmc.action;

import java.util.HashMap;

import java.util.List;

import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import com.fasterxml.jackson.databind.ObjectMapper;

import com.hmc.dao.MVC_Book_dao;

import com.hmc.dao.ModuleDao;

import com.hmc.util.PageBean;

import com.zking.framework.ActionSupport;

public class MVC_Book_Action extends ActionSupport{

    private  MVC_Book_dao book_dao=new MVC_Book_dao();

	private ObjectMapper mapper=new ObjectMapper();

	/**

	 * 书籍查询所有加分页

	 * @param request

	 * @param response

	 * @return

	 * @throws Exception

	 */

	public  String list(HttpServletRequest request,HttpServletResponse response) throws Exception {

		PageBean pageBean=new PageBean();

		pageBean.setRequest(request);

		List<Map<String, Object>> list = this.book_dao.list(request.getParameterMap(), pageBean);

		Map<String, Object> map=new HashMap<>();

         map.put("total", pageBean.getTotal());

         map.put("rows", list);

		 mapper.writeValue(response.getOutputStream(),map);

		 return null;

	    }

	/**

	 * 新增书籍

	 * @param request

	 * @param response

	 * @return

	 * @throws Exception

	 */

	public  String add(HttpServletRequest request,HttpServletResponse response) throws Exception {

		 this.book_dao.add(request.getParameterMap(), null);

		 Map<String, Object> map=new HashMap<>();

		 map.put("success", true);

         map.put("message", "新增书籍成功");

         mapper.writeValue(response.getOutputStream(),map);

         return null;

	    }  

	/**

	 * 修改书籍

	 * @param request

	 * @param response

	 * @return

	 * @throws Exception

	 */

	public  String upde(HttpServletRequest request,HttpServletResponse response) throws Exception {

         int add = this.book_dao.upde(request.getParameterMap(), null);

         Map<String, Object> map=new HashMap<>();

         map.put("success", true);

         map.put("message", "修改书籍成功");

         mapper.writeValue(response.getOutputStream(),map);

         return null;

	    }

	/**

	 * 删除书籍

	 * @param request

	 * @param response

	 * @return

	 * @throws Exception

	 */

	public  String dele(HttpServletRequest request,HttpServletResponse response) throws Exception {

         int add = this.book_dao.dele(request.getParameterMap(), null);

         Map<String, Object> map=new HashMap<>();

         map.put("success", true);

         map.put("message", "删除书籍成功");

         mapper.writeValue(response.getOutputStream(),map);

         return null;

	    }  

}

　　mvc.xml

<?xml version="1.0" encoding="UTF-8"?>

<config>

	<!-- <action path="/regAction" type="test.RegAction">

		<forward name="failed" path="/reg.jsp" redirect="false" />

		<forward name="success" path="/login.jsp" redirect="true" />

	</action> -->

	<action path="/menuAction" type="com.hmc.web.MenuAction">

	</action>

	<action path="/userAction" type="com.hmc.web.UserAction">

		<forward name="index" path="/index.jsp" redirect="false" />

	    <forward name="login" path="/login.jsp" redirect="false" />

	</action>

	<action path="/moduleAction" type="com.hmc.action.ModuleAction">

	</action>

	<action path="/bookAction" type="com.hmc.action.MVC_Book_Action">

	   <forward name="a" path="/index.jsp" redirect="false" />

	</action>

</config>

　　index.jsp

<%@page import="com.fasterxml.jackson.annotation.JsonInclude.Include"%>

<%@ 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>

<%@include file="head.jsp" %>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>EasyUI</title>

<script type="text/javascript" src="static/js/index.js"></script>

</head>

<body class="easyui-layout">

    <div data-options="region:'north',split:true" style="height:60px; overflow-y: hidden;">

    <h3 style="font-size: 20px;">网上书店后台管理系统</h3>

    </div>  

    <div data-options="region:'south',split:true" style="height:40px;">

    </div>   

   <!--  <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>    -->

    <div data-options="region:'west',title:'导航菜单',split:true," style="width: 200px;">

    <div id="menu" class="easyui-accordion" data-options="fit:true,border:false">

    </div>

    </div>

    <div data-options="region:'center'" style="padding:5px;background:#eee;">

     <div id="tabs" class="easyui-tabs"  data-options="fit:true,border:false">

    <div title="首页" style="padding:20px;display:none;">

            首页

        </div>

      </div>

    </div>

</body>  

</html>

　　index.js

var rootPath;

$(function(){

	rootPath=$('#absolutePath').val();

	createAccordion();

	createTree();

});

//1.绑定分类组件Accordion

function createAccordion(){

	$.ajax({

		url:rootPath+'moduleAction.action',

		data:{'pid':'-1','methodName':'queryModulelst'},

		dataType:'json',

		type:'post',

		success:function(data){

			for(var i=0;i<data.length;i++){

				var item=data[i];

				$('#menu').accordion('add',{

					title:item.text,

					content:'<ul id="'+item.id+'" alt="'+item.text+'" class="easyui-tree">',

					selected:false

				});

			}

		}

	})

}

//2选择分类组件Accordion时加载子模块

function createTree(){

	$("#menu").accordion({

		onSelect:function(title,index){

		var pid=$('ul[alt='+title+']').attr('id');

		//判断Tree是否有节点

		var nodes=$('ul[alt='+title+']').tree('getRoots');

		if(nodes.length>0){

			return;

		}

		$('ul[alt='+title+']').tree({

			url:rootPath+'moduleAction.action?pid='+pid+'&&methodName=queryModulelst',

	        //加载同时把子节点绑定上去

			onSelect:function(node){

				createTabs(node.text,node.url);

	        }

		});

		}

	});

}

//3.点击子模块,动态加载tabs选项卡，并打开url路径的页面

function createTabs(title,url){

	var isExists=$('#tabs').tabs('exists',title);

	if(isExists){

		$('#tabs').tabs('select',title);

	}

	else{

	var iframe="<iframe frameborder='0' src='"+url+"' scrolling='auto' style='width:100%;height:100%;'></iframe>";

	$('#tabs').tabs('add',{

	    title:title,

	    content:iframe,

	   // href:rootPath+'jsp/'+url,

	     closable:true,    

	});

	}

}

　　bookList.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>

<%@include file="../head.jsp" %>

<script type="text/javascript" src="static/js/bookList.js"></script>

<title>书本管理 </title>

</head>

<body class="easyui-layout">

    <div data-options="region:'north',split:true,border:false" style="height:70px;line-height:60px;padding-left: 10px;">

    <label>书本名称</label>

    <input class="easyui-textbox" style="width:200px" id="bookname">

    <a id="btn_search" href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>

    </div>   

    <!-- 数据 -->

    <div data-options="region:'center',border:false" style="background:#eee;">

    <table id="tb" class="easyui-datagrid">    </table>

    </div>

    <div id="toolbar">

    <a href="javascript:void(0);" onclick="add()" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">新增</a>

    <a href="javascript:void(0);" onclick="edit()" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">修改</a>

    <a href="javascript:void(0);" onclick="del()" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">删除</a>

    </div>

       <!--对话框 -->

       <div id="dd"></div>

       <!--对话框保存和关闭按钮  -->

       <div id="dlg-buttons">

	<a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-save" onclick="dialogSave();">保存</a>

	<a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-cancel" onclick="dialogClose();">关闭</a>

       </div>

</body>

</html>

　　bookList.js

var rootPath;

$(function(){

	rootPath=$('#absolutePath').val();

	initDataGrid();

	query();

	$('#btn_search').click(function(){

		query();

	});

})

//1初始化DateGrid

function initDataGrid(){

	$("#tb").datagrid({

		  url : '', 		// 初始化请求路径

		  fitColumns:true,

	      singleSelect : true, 	// 是否选中单行

	      checkOnSelect : true, 	// 点击行选中时该checkbox选中或取消选中

	      rownumbers:true,	        // 行号

	      fit : true, 		// 高宽自适应

	      border : false, 	        // 是否显示边框

	      title : '书本列表', 	// datagrid标题

	      striped : true, 	        // 显示斑马线效果

	      pagination:true,	// 是否分页

	      pageNumber:1,	    // 初始化页码

	      pageSize:10,		// 初始化每页显示条数

	      columns:[[

	    	  {field:'',checkbox:true},

	          {field:'bid',title:'书本编号',width:100,align:'center'},

	          {field:'bname',title:'书本名称',width:100,align:'center'},

	          {field:'price',title:'书本作者',width:100,align:'center',

	        	  //case when行列转化

	        	  formatter:function(value,row,index){

	        		  return "￥"+value

	        	  },

	              styler:function(value,row,index){

	        	  if(value>50){

	        		  return 'background-color:#ffee00;color:red'

	        	  }

	          }

	          },

	          ]],

	    //给行加事件

	      onDblClickRow:function(index,row){

	    	  $.messager.alert('提示',JSON.stringify(row));

	      },

          toolbar:'#toolbar'

	});

}

//2.点击查询将数据绑定到DateGrid

function query(){

	//获取datagrid的属性对象

	var options=$('#tb').datagrid('options');

	//设置请求路径

	options.url=rootPath+"bookAction.action";

	//获取请求参数

	var params={

			'methodName':'list',

			'bname':$('#bookname').val()

	};

  //刷新

   $('#tb').datagrid('load',params);

}

//3.实现DateGrid分页效果

//4.设置DateGrid的toolbar属性，实现增删改

//Dialog,Messager,form,LinkedButton,TextBox,ComboBox

function add(){

	$('#dd').dialog({

		width : 400,

		height : 292,

		modal : true,

		draggable : true,

		collapsible : false,

		minimizable : false,

		maximizable : false,

		title : '新增书本信息',

		buttons:"#dlg-buttons",

		href:'jsp/bookDetail.jsp',

		onLoad:function(){

			$('#ff').form('reset');

		}

	})

}

//修改

function edit(){

	//判断datagrid行是否被选中

	var row=$('#tb').datagrid('getSelected');

	if(null==row){

		 $.messager.alert('警告','请选中行');

		 return false;

	}

	$('#dd').dialog({

		width : 400,

		height : 292,

		modal : true,

		draggable : true,

		collapsible : false,

		minimizable : false,

		maximizable : false,

		title : '修改书本信息',

		buttons:"#dlg-buttons",

		href:'jsp/bookDetail.jsp',

		//绑值

		onLoad:function(){

			$('#ff').form('load',row);

		}

	})

}

function del(){

	var row=$('#tb').datagrid('getSelected');

	if(null==row){

		 $.messager.alert('警告','请选中行');

		 return false;

	}

	$.messager.confirm('确认','您确认想要删除记录吗？',function(r){

	    if (r){

	       $.ajax({

	    	   url:rootPath+'bookAction.action',

	    	   data:{'methodName':'dele','bid':row.bid},

	    	   dataType:'json',

	    	   type:'post',

	    	   success:function(data){

	    		   if(data.success){

	    			   $.messager.alert('消息',data.message);

	    			   query();

	    		   }

	    	   }

	       })

	    }

	});  

}

//新增或修改

function dialogSave(){

	var options=$('#dd').dialog('options');

	var url="bookAction.action?methodName=add"

	if(options.title=="修改书本信息"){

		url="bookAction.action?methodName=upde"

	}

	//表单提交

	$('#ff').form('submit',{

	    url:rootPath+url,

	    onSubmit: function(){

	    	//表单验证

	        return $(this).form("validate");

	    },

	    success:function(data){

	     var result=JSON.parse(data);

	     if(!result.success){

	    	 $.messager.alert('警告',result.message);

	    	 return false;

	     }

	    	 dialogClose();

	    	 query();

	    }

	});    

}

//关闭按钮

function   dialogClose(){

	$('#dd').dialog('close');

}

　　bookDetail,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>

<%@ include file="../head.jsp" %>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

</head>

<body>

<form id="ff" method="post">

<div style="height: 50px;line-height: 45px;padding-left: 20px;">

<label>书本编号：</label>

<input name="bid" class="easyui-textbox" style="width:200px" required="true">

</div>

<div style="height: 50px;line-height: 45px;padding-left: 20px;">

<label>书本名称：</label>

<input name="bname" class="easyui-textbox" style="width:200px" required="true">

</div>

<div style="height: 50px;line-height: 45px;padding-left: 20px;">

<label>书本价格：</label>

<input name="price" class="easyui-textbox" style="width:200px" required="true">

</div>

<div style="height: 50px;line-height: 45px;padding-left: 20px;">

<label>书本类型：</label>

<select  class="easyui-combobox" name="booktype" style="width:200px;">

    <option value="">--请选择--</option>

    <option>神话</option>

    <option>历时</option>

    <option>玄幻</option>

    <option>爱情</option>

</select>

</div>

</form>

</body>

</html>

　　head.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<base href="${pageContext.request.contextPath}/">

<!--页面缓存  -->

<meta http-equiv="pragma" content="no-cache">

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="expires" content="0">

<link rel="stylesheet" type="text/css" href="static/js/public/easyui5/themes/default/easyui.css">

<link rel="stylesheet" type="text/css" href="static/js/public/easyui5/themes/icon.css">

<script type="text/javascript" src="static/js/public/easyui5/jquery.min.js"></script>

<script type="text/javascript" src="static/js/public/easyui5/jquery.easyui.min.js"></script>

<input type="hidden" id="absolutePath" value="${pageContext.request.contextPath}/">

　　效果

新增

删除

修改

修改价格为3300

easyui增删改查的更多相关文章

  1. SpringMVC+SpringJdbc+SQLServer+EasyUI增删改查

    前言 前天用SpringJdbc连接了一把SQLServer,早上起来用SpringMVC+SpringJdbc+EasUI写了个增删改查的demo,主要是熟悉下SpringMVC相关知识点,如vie ...

  2. easyui增删改查前段代码

    <script> var url; //添加用户窗体 function newUser() { $('#dlg').dialog('open').dialog('setTitle', '学 ...

  3. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（9）-MVC与EasyUI结合增删改查

    系列目录 文章于2016-12-17日重写 在第八讲中,我们已经做到了怎么样分页.这一讲主要讲增删改查.第六讲的代码已经给出,里面包含了增删改,大家可以下载下来看下. 这讲主要是,制作漂亮的工具栏,虽 ...

  4. Node.js、express、mongodb 入门(基于easyui datagrid增删改查)

    前言 从在本机(win8.1)环境安装相关环境到做完这个demo大概不到两周时间,刚开始只是在本机安装环境并没有敲个Demo,从周末开始断断续续的想写一个,按照惯性思维就写一个增删改查吧,一方面是体验 ...

  5. golang学习之beego框架配合easyui实现增删改查及图片上传

    golang学习之beego框架配合easyui实现增删改查及图片上传 demo目录: upload文件夹主要放置上传的头像文件,main是主文件,所有效果如下: 主页面: 具体代码: <!DO ...

  6. EasyUI + Spring MVC + hibernate实现增删改查导入导出

    (这是一个故事--) 前言 作为一个JAVA开发工程师,我觉得最基本是需要懂前端.后台以及数据库. 练习的内容很基础,包括:基本增删改查.模糊查询.分页查询.树菜单.上传下载.tab页 主管发我一个已 ...

  7. 详谈easyui datagrid增删改查操作

    转自:http://blog.csdn.net/abauch_d/article/details/7734395 前几天我把easyui dadtagrid的增删改查的实现代码贴了出来,发现访问量达到 ...

  8. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（5）-EF增删改查by糟糕的代码

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(5)-EF增删改查by糟糕的代码 上一讲我们创建了一系列的解决方案,我们通过一个例子来看看层与层之间的关系 ...

  9. MVC与EasyUI结合增删改查

    构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(9)-MVC与EasyUI结合增删改查   在第八讲中,我们已经做到了怎么样分页.这一讲主要讲增删改查.第六讲的 ...

随机推荐

  1. 【转】基于FPGA的Sobel边缘检测的实现

    前面我们实现了使用PC端上位机串口发送图像数据到VGA显示,通过MATLAB处理的图像数据直接是灰度图像,后面我们在此基础上修改,从而实现,基于FPGA的动态图片的Sobel边缘检测.中值滤波.Can ...

  2. kafka和zookeeper安装部署(版本弄不好就是坑)

    yum install -y unzip zip 配置host vi /etc/host172.19.68.10 zk1 1. zookeeper zookeeper下载地址 http://mirro ...

  3. yum安装k8s集群

    k8s的安装有多种方式,如yum安装,kubeadm安装,二进制安装等.本文是入门系列,只是为了快速了解k8s的原理和工作过程,对k8s有一个快速的了解,这里直接采用yum安装 的1.5.2为案例进行 ...

  4. java框架学习系列

    这篇文章的目的主要是作为一个框架学习的索引,方便查找及顺序学习 一.struts2学习 1. java之struts框架入门教程 2. java之struts2的执行流程讲解 3. java之stru ...

  5. js 页面技巧

    需要获取页面上固定的某个按钮的属性值.我们需要在页面加载完的第一刻将值存储到定义的变量,防止用户更改页面样式读不出当前元素.如果页面刷新会重置当前属性 <body> <input v ...

  6. idea 自动生产 api文档

    第一: 打开idea,选择项目.点击工具栏 Tools->Generate JavaDOC 第二: 主要分为三部分内容. 1,Generate JavaDoc scope 要扫描生成api的范围 ...

  7. ROMTableAddr = 0xE00FF003 错误 Target DLL has been cancelled 错误

    JTAG下载固件错误 keil下载固件错误 如下错误 * JLink Info: Found SWD-DP with ID 0x1BA01477 * JLink Info: Found SWD-DP ...

  8. Spring @Transactional注解不起作用解决办法及原理分析

    Transactional失效场景介绍 第一种 Transactional注解标注方法修饰符为非public时,@Transactional注解将会不起作用.例如以下代码. 定义一个错误的@Trans ...

  9. mysql启动过程

    MYSQL启动过程经过以下顺序 1.mysql读取配置文件的顺序 读取顺序 /etc/my.cnf>/etc/mysql/my.cnf>/usr/etc/my.cnf ~/.my.cnf ...

  10. k8s pv无法删除问题

    一般删除步骤为:先删pod再删pvc最后删pv 但是遇到pv始终处于“Terminating”状态,而且delete不掉.如下图: 解决方法: 直接删除k8s中的记录: kubectl patch p ...