Springmvc+Easyui 搜索，新增，删除，修改
1.springmvc.xml配置文件
扫描controller，开启mvc注解功能，视图解析器
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:aop="http://www.springframework.org/schema/aop" xmlns:context="http://www.springframework.org/schema/context" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.2.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.2.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.2.xsd "> <!-- 扫描mvc --> <context:component-scan base-package="com.bypx.controller" /> <aop:aspectj-autoproxy proxy-target-class="true" /> <!-- 开启mvc注解功能 --> <mvc:annotation-driven> <mvc:message-converters> <bean class="org.springframework.http.converter.StringHttpMessageConverter"> <property name="supportedMediaTypes"> <list> <value>text/html;charset=UTF-8</value> <value>text/plain;charset=UTF-8</value> <value>application/json;charset=UTF-8</value> </list> </property> </bean> </mvc:message-converters> </mvc:annotation-driven> <!-- 视图解析器 --> <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <!--前缀 --> <property name="prefix" value="" /> <!--后缀 --> <property name="suffix" value="" /> <property name="viewClass" value="org.springframework.web.servlet.view.JstlView" /> </bean> <!-- 文件上传 富媒体解析器--> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"/> </beans>
2.Web.xml配置文件
<?xml version="1.0" encoding="UTF-8"?> <web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"> <display-name></display-name> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> <!-- 配置spring资源 --> <context-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:spring-*.xml</param-value> </context-param> <!-- 配置spring --> <listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener> <!-- springMVC入口 --> <servlet> <servlet-name>springMvc</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:SpringMvc.xml</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>springMvc</servlet-name> <url-pattern>*.do</url-pattern> </servlet-mapping> <!-- shiro过滤器 --> <filter> <filter-name>shiroFilter</filter-name> <filter-class>org.springframework.web.filter.DelegatingFilterProxy</filter-class> <init-param> <param-name>targetFilterLifecycle</param-name> <param-value>true</param-value> </init-param> </filter> <!-- 编码过滤器 --> <filter> <filter-name>encodingFilter</filter-name> <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> <init-param> <param-name>encoding</param-name> <param-value>UTF-8</param-value> </init-param> <init-param> <param-name>forceEncoding</param-name> <param-value>true</param-value> </init-param> </filter> <!-- 编码过滤器拦截路径配置 --> <filter-mapping> <filter-name>encodingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <!-- shiro过滤器拦截路径配置 --> <filter-mapping> <filter-name>shiroFilter</filter-name> <url-pattern>*.do</url-pattern> </filter-mapping> <filter-mapping> <filter-name>shiroFilter</filter-name> <url-pattern>*.jsp</url-pattern> </filter-mapping> </web-app>
一、在jsp里面写个空的div容器，然后利用Js往div容器里面填充值
<!-- 数据表start--------------------------------------------------- --> <div id="sjb_div"></div> <!-- 数据表end--------------------------------------------------- -->
一.1 页面加载完后执行js
$(function (){
$('#sjb_div').datagrid({
title:"资源信息共享管理",
url:'../../ZyxxController/cakan.do',
pagination:true,//如果为true控件底部显示分页工具栏。
toolbar:"#gongjulan",//工具栏
columns:[[
{field:"",checkbox:true}, //复选框
{field:'UUID',title:'编号',align:'center'},
{field:'qy_name',title:'企业名',align:'center'},
{field:'jc_xh',title:'机床型号',align:'center'},
{field:'jc_lx',title:'机床类型',align:'center'},
{field:'jc_xt',title:'机床系统',align:'center'},
{field:'qyfzr_name',title:'企业负责人',align:'center'},
{field:'qyfzr_phone',title:'负责人联系电话',align:'center'}
]]
});
}
);
一.2刷值Controller
//刷值and分页static------------------------------------------------------- @RequestMapping(value="cakan",produces="text/html;charset=UTF-8") @ResponseBody public String cakan( ZyxxPage page,HttpServletRequest request) throws Exception{ int pp = Integer.parseInt(request.getParameter("page"));//获取当前页面号 int rr = Integer.parseInt(request.getParameter("rows"));//获取当前页面多少条数据 System.out.println(pp+"++++++++++++++++++++++++++++++++++++++++"+rr); int start=(pp-1)*rr;//获取当前页面第一条数据下标 int endd=pp+rr-1;//获取当前页面最后一条数据下标 System.out.println(start+"++++++++++++++++++++++++++++++++++++++++"+endd); String qiye=request.getParameter("qiye"); String jclx=request.getParameter("jclx"); System.out.println(qiye+"--------"+jclx); return JsonUtil.toJson(zyxxservice.cakan( page,pp,rr,start,endd,qiye,jclx)); } //刷值and分页end-------------------------------------------------------
一.3刷值service(service的sql语句是用StringBuffer加上append拼接的)
//刷出数据表start--------------------------------------------------------------------------------------------------------- @RequestMapping public Map<String, Object> cakan(ZyxxPage page,int pp,int rr,int start,int endd,String qiye,String jclx){ List<Object> param=new ArrayList<Object>(); System.out.println(pp+"-------------------21"+rr); System.out.println(qiye+"-------------------21"+jclx); StringBuffer sql=new StringBuffer("SELECT UUID,qy_name,jc_lx,jc_xh,jc_xt,qyfzr_name,qyfzr_phone FROM sk_zyxx "); sql.append(" where 1=1"); //搜索static(这个搜索是数据表里面的数据,搜索要放在分页之前)------------------------------------------------------- if (qiye!=null&&!qiye.equals("")) { sql.append(" and qy_name like '%"+qiye+"%'"); System.out.println(sql+"..................."); } if (jclx!=null&&!jclx.equals("")) { sql.append(" and jc_lx like '%"+jclx+"%'"); System.out.println(sql+"..................."); } //搜索end------------------------------------------------------- //分页static（分页LIMIT是要放在sql语句的最后面）------------------------------------------------------- sql.append(" LIMIT ").append(start).append(",").append(endd); //分页end------------------------------------------------------- System.out.println(sql+".......................30"); List<Map<String, Object>> rows=jdbcTemplate.queryForList(sql.toString()); String sql_total="SELECT COUNT(*) FROM sk_zyxx where 1=1"; //搜索static(这个搜索的值是分页显示的共有多少条记录)------------------------------------------------------- if (qiye!=null&&!qiye.equals("")) { sql_total=sql_total+" and qy_name like '%"+qiye+"%'"; System.out.println(sql_total+".515151.................."); } if (jclx!=null&&!jclx.equals("")) { sql_total=sql_total+" and jc_lx like '%"+jclx+"%'"; System.out.println(sql_total+"..................."); } //搜索end------------------------------------------------------- int total=jdbcTemplate.queryForInt(sql_total); Map<String, Object> map=new HashMap<String, Object>(); map.put("total", total); map.put("rows", rows); return map; } //刷出数据表end---------------------------------------------------------------------------------------------------------
一.1补图
二、搜索
二、1在Jsp页面写一个div容器，容器里面包含Inputt输入框和“搜索”按钮（增删改，都可以放在这里），输入框的Input要给id，这样等等可以拿到里面的值然后传到后台进行查询
<!-- 工具栏start--------------------------------------------------- --> <div id="gongjulan"> 企业:<input id="qiye" class="easyui-validatebox" /> 机床类型:<input id="jclx" class="easyui-validatebox" /> <a href="javascript:void(0);" class="easyui-linkbutton" onclick="sousuo()" data-options="iconCls:'icon-search'">搜索</a> <a href="javascript:void(0);" onclick="add_xz()" class="easyui-linkbutton" data-options="iconCls:'icon-add'">新增</a> <a href="javascript:void(0);" onclick="add_bj()" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">编辑</a> <a href="javascript:void(0);" onclick="add_del()" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除</a> </div> <!-- 工具栏end--------------------------------------------------- -->
二、2点击搜索按钮调用sousuo方法，然后获取到Input框里面的值并传给sjb_div容器，Controoler 和service再上面刷值的时候已体现
//搜索static--------------------------------------------------------------------------------------------
function sousuo(){
var qiye=$("#qiye").val();
var jclx=$("#jclx").val();
$('#sjb_div').datagrid("load",{
qiye: qiye,
jclx: jclx
});
}
//搜索end--------------------------------------------------------------------------------------------
三、新增
三、1点击新增按钮，弹出一个框，框里面填写要新增的数据
<a href="javascript:void(0);" onclick="add_xz()" class="easyui-linkbutton" data-options="iconCls:'icon-add'">新增</a>
三、2新增按钮调用js，js打开弹窗
function add_xz(){
$('#add_xzchuangkou').dialog('open');
}
三、3新增弹窗（新增弹窗里面有一个保存，取消，2个按钮）
<!-- 新增窗口tart--------------------------------------------------- --> <div id="add_xzchuangkou" class="easyui-dialog" title="新增" style="width:300px;height:300px;top:150px;" data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,buttons:'#add_xzchuangkou_bcandqx'"> <form id="add_xz_form" method="post"> </br> 企业名称:<input id="qy_name1" class="easyui-validatebox" data-options="required:true,validType:'length[2,50]'" /></br> </br> 机床型号:<input id="jc_xh1" class="easyui-validatebox" data-options="required:true,validType:'length[2,50]'" /></br> </br> 机床类型:<input id="jc_lx1" class="easyui-validatebox" data-options="required:true,validType:'length[2,50]'" /></br> </br> 机床系统:<input id="jc_xt1" class="easyui-validatebox" data-options="required:true,validType:'length[2,50]'" /></br> </br> 负责人: <input id="qyfzr_name1" class="easyui-validatebox" data-options="required:true,validType:'length[2,50]'" /></br> </br> 联系电话:<input id="qyfzr_phone1" class="easyui-validatebox" data-options="required:true,validType:'length[2,50]'" /></br> </br> </form> </div>
三、4新增窗口里面的保存and取消
<!-- 新增窗口in保存取消tart--------------------------------------------------- --> <div id="add_xzchuangkou_bcandqx"> <a href="javascript:void(0);" onclick="add_xzchuangkou_bc()" class="easyui-linkbutton" data-options="iconCls:'icon-save'">保存</a> <a href="javascript:void(0);" onclick="add_xzchuangkou_qx()" class="easyui-linkbutton" data-options="iconCls:'icon-clear'">取消</a> </div> <!-- 新增窗口in保存取消end--------------------------------------------------- -->
三、5新增窗口里面的保存and取消分别调用的js代码
//新增in保存
function add_xzchuangkou_bc(){
$.ajax({
url:"../../ZyxxController/xz_bc.do",
type:"post",
data:{
qy_name:$("#qy_name1").val(),
jc_xh:$("#jc_xh1").val(),
jc_lx:$("#jc_lx1").val(),
jc_xt:$("#jc_xt1").val(),
qyfzr_name:$("#qyfzr_name1").val(),
qyfzr_phone:$("#qyfzr_phone1").val(),
},
dataType:"json",
success:function(result){
if (result.success) {
$('#sjb_div').datagrid('reload');
}
$.messager.show({
title:'新增',
msg:result.add_zx_jg,
timeout:3000,
showType:'slide'
});
},
error:function (){
$.messager.show({
title:'新增',
msg:result.add_zx_jg ,
timeout:3000,
showType:'slide'
});
}
})
}
//新增in取消
function add_xzchuangkou_qx(){
$('#add_xzchuangkou').dialog('close');
}
//新增end--------------------------------------------------------------------------------------------
三、5 新增弹窗里面的保存Controller
//新增窗口in保存static------------------------------------------------------- @RequestMapping(value="xz_bc",produces="text/html;charset=UTF-8") @ResponseBody public String add_xz_bc( ZyxxPage page) throws Exception{ return JsonUtil.toJson(zyxxservice.add_xz_bc( page)); } //新增窗口in保存end-------------------------------------------------------
三、6 新增弹窗里面的保存Service
//新增窗口in保存static------------------------------------------------------ public Map<String, Object> add_xz_bc(ZyxxPage page){ String zdsc_uuid= KeyGenerate.getKey();//自动生成uuid Map<String, Object> map=new HashMap<String, Object>(); String sql="INSERT INTO sk_zyxx (UUID,qy_name,jc_lx,jc_xh,jc_xt,qyfzr_name,qyfzr_phone) VALUE(?,?,?,?,?,?,?)"; System.out.println(sql+"--------------------71"); try { jdbcTemplate.update(sql,zdsc_uuid,page.getQy_name(),page.getJc_lx(),page.getJc_xh(),page.getJc_xt(),page.getQyfzr_name(),page.getQyfzr_phone()); map.put("success", true); map.put("add_zx_jg", "新增成功"); } catch (Exception e) { map.put("success", false); map.put("add_zx_jg", "新增失败"); } return map; } //新增窗口in保存end------------------------------------------------------
四、编辑
四、1点击编辑按钮，弹出一个框，框里面填写要编辑的数据
<a href="javascript:void(0);" onclick="add_bj()" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">编辑</a>
四、2编辑按钮调用js，js打开弹窗
//编辑static--------------------------------------------------------------------------------------------
function add_bj(){
var ss=$('#sjb_div').datagrid('getChecked');
if (ss.length==0) {
$.messager.alert('警告','请选择要编辑的数据');
return;
}
if (ss.length > 1) {
$.messager.alert('警告','一次只能编辑一条数据');
return;
}
var uu=ss[0].UUID;
$.ajax({
url:"../../ZyxxController/bj.do",
type:"post",
data:{
uuid:uu
},
dataType:"json",
success:function(result){
if (result.bj) {
$("#bj_form").form("clear");//清空表单
$("#bj_form").form('load',result.bj);//填充表单
$("#bj_chuangkou").dialog("open");
}
},
error:function(){
}
})
}
四、3编辑弹窗（编辑弹窗里面有一个保存，取消，2个按钮）
<!-- 编辑窗口tart--------------------------------------------------- --> <div id="bj_chuangkou" class="easyui-dialog" title="编辑" style="width:300px;height:300px;top:150px;" data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,buttons:'#bjchuangkou_bcandqx'"> <form id="bj_form" method="post"> 编号: <input name="UUID" id="uuid" class="easyui-validatebox" disabled="true" data-options="required:true,validType:'length[2,50]'" /></br></br> 企业名称:<input name="qy_name" id="qy_name" class="easyui-validatebox" data-options="required:true,validType:'length[2,50]'" /></br> </br> 机床型号:<input name="jc_xh" id="jc_xh" class="easyui-validatebox" data-options="required:true,validType:'length[2,50]'" /></br> </br> 机床类型:<input name="jc_lx" id="jc_lx" class="easyui-validatebox" data-options="required:true,validType:'length[2,50]'" /></br> </br> 机床系统:<input name="jc_xt" id="jc_xt" class="easyui-validatebox" data-options="required:true,validType:'length[2,50]'" /></br> </br> 负责人: <input id="qyfzr_name" class="easyui-validatebox" data-options="required:true,validType:'length[2,50]'" /></br> </br> 联系电话:<input id="qyfzr_phone" class="easyui-validatebox" data-options="required:true,validType:'length[2,50]'" /></br> </br> </form> </div>
四、4编辑窗口里面的保存and取消
<!-- 编辑窗口in保存取消tart--------------------------------------------------- --> <div id="bjchuangkou_bcandqx"> <a href="javascript:void(0);" onclick="bj_chuangkou_bc()" class="easyui-linkbutton" data-options="iconCls:'icon-save'">保存</a> <a href="javascript:void(0);" onclick="bj_chuangkou_qx()" class="easyui-linkbutton" data-options="iconCls:'icon-clear'">取消</a> </div> <!-- 编辑窗口in保存取消end--------------------------------------------------- -->
四、5编辑窗口里面的保存and取消分别调用的js代码
//编辑in保存static-------------------------------------------------------------------------------
function bj_chuangkou_bc(){
$.ajax({
url:"../../ZyxxController/bj_bc.do",
type:"post",
data:{
uuid:$("#uuid").val(),
qy_name:$("#qy_name").val(),
jc_xh:$("#jc_xh").val(),
jc_lx:$("#jc_lx").val(),
jc_xt:$("#jc_xt").val(),
qyfzr_name:$("#qyfzr_name").val(),
qyfzr_phone:$("#qyfzr_phone").val()
},
dataType:"json",
success:function (result){
if (result.success) {
$("#sjb_div").datagrid('reload');
$.messager.show({
title:'提示',
msg:result.bj_jieguo,
timeout:3000,
showType:'slide'
});
}
},
error:function (){
$.messager.show({
title:'提示',
msg:result.bj_jieguo,
timeout:3000,
showType:'slide'
});
}
});
}
//编辑in保存end-------------------------------------------------------------------------------
//编辑in取消static-------------------------------------------------------------------------------
function bj_chuangkou_qx(){
$('#bj_chuangkou').dialog('close');
}
//编辑in取消end-------------------------------------------------------------------------------
四、6编辑弹窗里面的保存按钮Controoler(因为编辑的时候需要把值查出来然后填充到弹窗里面的input框里面去)
//编辑窗口static------------------------------------------------------- @RequestMapping(value="bj",produces="text/html;charset=UTF-8") @ResponseBody public String bj ( ZyxxPage page) throws Exception{ return JsonUtil.toJson(zyxxservice.bj( page)); } //编辑窗口in保存static------------------------------------------------------- @RequestMapping(value="bj_bc",produces="text/html;charset=UTF-8") @ResponseBody public String bj_bc ( ZyxxPage page) throws Exception{ return JsonUtil.toJson(zyxxservice.bj_bc( page)); } //编辑窗口in保存end------------------------------------------------------- //编辑窗口end-------------------------------------------------------
四、7编辑弹窗里面的保存按钮Service
//编辑窗口static------------------------------------------------------ public Map<String, Object> bj(ZyxxPage page){ StringBuffer sql=new StringBuffer("SELECT UUID,qy_name,jc_lx,jc_xh,jc_xt,qyfzr_name,qyfzr_phone FROM sk_zyxx "); sql.append(" where 1=1 "); sql.append(" and UUID ="+page.getUuid()+""); Map<String, Object> map=new HashMap<String, Object>(); System.out.println(sql.toString()+"+++++++"); try { List<Map<String, Object>>result= jdbcTemplate.queryForList(sql.toString()); map.put("success", true); map.put("bj",result.get(0)); } catch (Exception e) { map.put("success", false); } System.out.println(map+"+++++"); return map; } //编辑窗口in保存static------------------------------------------------------ public Map<String, Object> bj_bc(ZyxxPage page){ String sql="UPDATE sk_zyxx SET qy_name=?,jc_xh=?,jc_lx=?,jc_xt=?,qyfzr_name=?,qyfzr_phone=? WHERE UUID=?"; System.out.println(sql+"-------------------------编辑sql"); Map<String, Object> map=new HashMap<String, Object>(); try { jdbcTemplate.update(sql, page.getQy_name(),page.getJc_xh(),page.getJc_lx(),page.getJc_xt(),page.getQyfzr_name(),page.getQyfzr_phone(),page.getUuid()); System.out.println(page.getQy_name()+"******"+page.getJc_lx()+"**************"+page.getJc_xh()+"*****"+page.getJc_xt()+"****"+page.getUuid()); map.put("success", true); map.put("bj_jieguo", "编辑成功"); } catch (Exception e) { map.put("success", false); map.put("bj_jieguo", "编辑失败"); } return map; } //编辑窗口in保存end------------------------------------------------------ //编辑窗口end------------------------------------------------------
五、删除
五、1复选框选中要删除的数据，然后点击删除按钮
<a href="javascript:void(0);" onclick="add_del()" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除</a>
五、2删除按钮调用js方法
//删除static-------------------------------------------------------------------------------------------- function add_del(){ var sa=$("#sjb_div").datagrid("getChecked"); if (sa==0) { $.messager.alert('警告','请选择要删除的数据!'); return; } $.messager.confirm('确认','您确认想要删除数据吗？',function(r){ if (r){ var sz = [];//保存编号 for (var i = 0; i < sa.length; i++) { sz.push(sa[i].UUID); } $.ajax({ url:"../../ZyxxController/del.do", type:"post", data:{ UUID:sz.join(",") }, dataType:"json", success:function(json){ if (json&&json.success) { $.messager.show({ title:'我的消息', msg:json.del_jg, timeout:3000, showType:'slide' }); $("#sjb_div").datagrid("reload"); } }, error:function(){ } }) } }); } //删除end--------------------------------------------------------------------------------------------
五、3删除Controlelr
//删除数据static----------------------------------------------------------- @RequestMapping(value="del",produces="text/html;charset=UTF-8") @ResponseBody public String del(ZyxxPage page,HttpServletRequest request) throws Exception{ System.out.println("dellllll+++++"); return JsonUtil.toJson(zyxxservice.del(page ,request)); } //删除数据end-----------------------------------------------------------
五、4删除Service
//删除数据static----------------------------------------------------------------- public Map<String, Object> del(ZyxxPage page,HttpServletRequest request){ String[] ss=request.getParameter("UUID").split(","); StringBuffer sql=new StringBuffer(); sql.append("DELETE FROM sk_zyxx where uuid = ?"); System.out.println(sql+"--------dellllllllll"); Map<String, Object> map=new HashMap<String, Object>(); try { for (String sui : ss) { System.out.println(sui); jdbcTemplate.update(sql.toString(), sui); } map.put("success", true); map.put("del_jg", "删除成功"); } catch (Exception e) { map.put("success", false); map.put("del_jg", "删除失败"); } return map; } //删除数据end-----------------------------------------------------------------
