layui增删改查

其他 2019-07-18 23:04:56 阅读次数: 0

首先要导入layui的css以及js

<link rel="stylesheet" type="text/css" href="statis/css/layui.css">   
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="statis/layui.all.js"></script>
<script type="text/javascript" src="js/index.js"></script>

dao层

package com.hmc.dao;

import java.io.UnsupportedEncodingException;
import java.sql.SQLException;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import com.hmc.entity.Book;
import com.hmc.util.BaseDao;
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 
     * @throws Exception
     */
     public  List<Map<String, Object>> list(Map<String, String[]> paMap,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException, Exception{
        //String sql="SELECT * FROM t_book";
        
         String bid=JsonUtils.getParamVal(paMap, "bid");
     
         String sql="SELECT * FROM t_mvc_book  ";        
         if(StringUtils.isNotBlank(bid)) {
             sql+=" where bid like '%"+bid+"%'";
         }
         
        return super.executeQuery(sql, pageBean);
          
      }
      
     
     /**
      *修改 
     * @throws SQLException 
     * @throws IllegalAccessException 
     * @throws IllegalArgumentException 
     * @throws SecurityException 
     * @throws NoSuchFieldException 
      */
     public int upbook(Map<String, String[]> paMap,PageBean pageBean) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
         String sql="update t_mvc_book set bname=?,price=? where bid=?";
         
         return executeUpdate(sql, new String[] {"bname","price","bid"}, paMap);
     }

     /**
      * 新增
      * @param paMap
      * @param pageBean
      * @return
      * @throws NoSuchFieldException
      * @throws SecurityException
      * @throws IllegalArgumentException
      * @throws IllegalAccessException
      * @throws SQLException
      */
     public int adbook(Map<String, String[]> paMap,PageBean pageBean) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
         String sql="insert into t_mvc_book (bname,price) values(?,?)";
         return executeUpdate(sql, new String[] {"bname","price"}, paMap);
     }
     
     /**
      *删除
      * @param paMap
      * @param pageBean
      * @return
      * @throws NoSuchFieldException
      * @throws SecurityException
      * @throws IllegalArgumentException
      * @throws IllegalAccessException
      * @throws SQLException
      */
     public int dele(Map<String, String[]> paMap,PageBean pageBean) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
          String bid=JsonUtils.getParamVal(paMap, "bid");
         String sql="delete from t_mvc_book where bid=?";
         System.out.println(sql);
         return executeUpdate(sql, new String[] {"bid"}, paMap);
     }
        
}

 action层

package com.hmc.action;

import java.net.URL;
import java.net.URLDecoder;
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.fasterxml.jackson.databind.ObjectMapper;
import com.hmc.dao.MVC_Book_dao;
import com.hmc.entity.Book;
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 {
     request.setCharacterEncoding("utf-8");
        
        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("count", pageBean.getTotal());
         map.put("data", list);
         map.put("code", 0);
         map.put("limit", pageBean.getRows());
         mapper.writeValue(response.getOutputStream(),map);
         return null;
             
        }  
    
    public String updeBook(HttpServletRequest request,HttpServletResponse response) throws Exception {
        int upbook = this.book_dao.upbook(request.getParameterMap(), null);
         Map<String, Object> map=new HashMap<>();
         map.put("code", 0);
         mapper.writeValue(response.getOutputStream(),map);
        return null;
    }
    
    /**
     * 新增书籍
     * @param request
     * @param response
     * @return
     * @throws Exception
     */
    public String adBook(HttpServletRequest request,HttpServletResponse response) throws Exception {
        int adbook = this.book_dao.adbook(request.getParameterMap(), null);
         Map<String, Object> map=new HashMap<>();
         map.put("code", 0);
         mapper.writeValue(response.getOutputStream(),map);
        return null;
    }
    
    
    /**
     * 删除书籍
     * @param request
     * @param response
     * @return
     * @throws Exception
     */
    public String dele(HttpServletRequest request,HttpServletResponse response) throws Exception {
        int adbook = this.book_dao.dele(request.getParameterMap(), null);
         Map<String, Object> map=new HashMap<>();
         map.put("code", 0);
         mapper.writeValue(response.getOutputStream(),map);
        return null;
    }
}

 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>
<base href="${pageContext.request.contextPath}/">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="statis/css/layui.css">   
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="statis/layui.all.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<input type="hidden" id="absolutePath" value="${pageContext.request.contextPath}/">
</head>
<body>
<div class="demoTable" style="margin-top: 20px;margin-left: 10px;">
  搜索ID：
  <div class="layui-inline">
    <input class="layui-input"  id="demoReload" autocomplete="off">
  </div>
  <button class="layui-btn" id="btn" data-type="reload">搜索</button>
</div>
<table class="layui-hide" id="demo" lay-filter="test"></table>
 
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
 
<div class="layui-tab layui-tab-brief" lay-filter="demo">
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">
    
      <div class="layui-carousel" id="test1">
       
      </div>
    </div>
    <div class="layui-tab-item">
      <div id="laydateDemo"></div>
    </div>
    <div class="layui-tab-item">
      <div id="pageDemo"></div>
    </div>
    <div class="layui-tab-item">
      <div class="layui-upload-drag" id="uploadDemo">
        <i class="layui-icon"></i>
        <p>点击上传，或将文件拖拽到此处</p>
      </div>
    </div>
    <div class="layui-tab-item">
      <div id="sliderDemo" style="margin: 50px 20px;"></div>
    </div>
  </div>
</div>

 js代码

<script src="//res.layui.com/layui/dist/layui.js?t=1560414887305"></script>
<script>
layui.config({
  version: '1560414887305' //为了更新 js 缓存，可忽略
});

layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function(){
 var laydate = layui.laydate //日期
  ,laypage = layui.laypage //分页
  ,layer = layui.layer //弹层
  ,table = layui.table //表格
  ,upload = layui.upload //上传
  ,element = layui.element //元素操作
  ,slider = layui.slider //滑块
 
  tables();
  var text;
  $('#btn').click(function(){
      
      text=$('#demoReload').val();
      tables();
    });
 
  //执行一个 table 实例
 function tables(){
  table.render({
    elem: '#demo'
    ,height: 420
    ,url: 'bookAction.action?methodName=list&&bid='+text+'' //数据接口
    ,title: '用户表'
    ,totalRow :true
    ,page: true //开启分页
    ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
    ,totalRow: true //开启合计行
    ,cols: [[ //表头
      {type: 'checkbox', fixed: 'left'}
      ,{field: 'bid', title: 'ID', width:300, align:'center', sort: true, fixed: 'left', totalRowText: '合计：'}
      ,{field: 'bname', title: '书本名称', width:300 ,align:'center'}
      ,{field: 'price', title: '价格', width: 300,align:'center', sort: true, totalRow: true}
      ,{fixed: 'right', width: 400, align:'center', toolbar: '#barDemo'}
    ]]
  });
  }
  //监听头工具栏事件
  table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id)
    ,data = checkStatus.data; //获取选中的数据
    switch(obj.event){
      case 'add':
       add();
      break;
      case 'update':
        if(data.length === 0){
          layer.msg('请选择一行');
        } else if(data.length > 1){
          layer.msg('只能同时编辑一个');
        } else {
          layer.alert('编辑 [id]：'+ checkStatus.data[0].bid);
        }
      break;
      case 'delete':
        if(data.length === 0){
          layer.msg('请选择一行');
        } else {
          layer.msg('删除');
        }
      break;
    };
  });
  
  //监听行工具事件
  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
    var data = obj.data //获得当前行数据
    ,layEvent = obj.event; //获得 lay-event 对应的值
    if(layEvent === 'detail'){
      layer.msg('查看操作');
    } else if(layEvent === 'del'){
      layer.confirm('真的删除行么', function(index){
       // obj.del(); //删除对应行（tr）的DOM结构
         var params={
                 'bid':data.bid,
              }
             
         dele(params);
        layer.close(index);
        //向服务端发送删除指令
      });
    } else if(layEvent === 'edit'){
        
        edit(data)
    }
  });
  
 
 
  //分页
  laypage.render({
    elem: 'pageDemo' //分页容器的id
    ,count: 100 //总页数
    ,skin: '#1E9FFF' //自定义选中色值
    //,skip: true //开启跳页
    ,jump: function(obj, first){
      if(!first){
        layer.msg('第'+ obj.curr +'页', {offset: 'b'});
      }
    }
  });
  
 
 
  function edit(data){
     layer.open({
            type : 2,
            title : '修改',
            area : [ '500px', '300px' ],
            offset : '160px',
            shadeClose : true, // 点击遮罩关闭
            btn : ['保存','取消'],
            content : 'bookDetail.jsp',
            success : function(layero, index) { // 成功弹出后回调
                layer.iframeAuto(index);
                 var body = layer.getChildFrame('body', index);  //巧妙的地方在这里哦
                    body.contents().find("#bname").val(data.bname);
                    body.contents().find("#price").val(data.price);
                    body.contents().find("#bid").val(data.bid);
            },
            
            yes : function(index, layero) { // 保存按钮回调函数
                             // 获取iframe层的body
                 var body = layer.getChildFrame('body', index);  //巧妙的地方在这里哦
                             // 找到隐藏的提交按钮模拟点击提交
               // body.find('#permissionSubmit').click();
                 var name = body.contents().find("#bname").val();
                 var price=body.contents().find("#price").val();
                 var bid= body.contents().find("#bid").val();
                 var params={
                         'bname':name,
                         'price':price,
                         'bid':bid
                 };
                   upbook(params);
                   layer.close(index);
            },
            btn2 : function(index, layero) { // 取消按钮回调函数
                layer.close(index); // 关闭弹出层
            }

      
    });
}

  
  
  
  function add(){
         layer.open({
                type : 2,
                title : '新增书本',
                area : [ '500px', '300px' ],
                offset : '160px',
                shadeClose : true, // 点击遮罩关闭
                btn : ['保存','取消'],
                content : 'bookDetail.jsp',
                success : function(layero, index) { // 成功弹出后回调
                    
                },
                
                yes : function(index, layero) { // 保存按钮回调函数
                                 // 获取iframe层的body
                   // var body = layer.getChildFrame('body', index);
                                 // 找到隐藏的提交按钮模拟点击提交
                  //  body.find('#permissionSubmit').click();
                    layer.iframeAuto(index);
                     var body = layer.getChildFrame('body', index);  //巧妙的地方在这里哦
                     var bname=body.contents().find("#bname").val();
                     var price=body.contents().find("#price").val();
                         var params={
                                  'bname':bname,
                                  'price':price,
                                  
                          };
                         addtabls(params);
                         layer.close(index);
                },
                btn2 : function(index, layero) { // 取消按钮回调函数
                    layer.close(index); // 关闭弹出层
                }
            
          
        });
    }
  
  function upbook(params){
      $.ajax({
          url:"bookAction.action?methodName=updeBook",
          type:"post",
          dataType:'json',
          data:params,
          success:function(data){
              layer.msg('修改成功');
            tables();
          },
          error:function(or){
              alert('失败')
          }
      })
  }
  
  function  addtabls(params){
      $.ajax({
          url:"bookAction.action?methodName=adBook",
          type:"post",
          dataType:'json',
          data:params,
          success:function(data){
              layer.msg('新增成功');
             tables();
          },
          error:function(or){
              alert('失败')
          }
      })
  }
  
  
  function  dele(params){
      $.ajax({
          url:"bookAction.action?methodName=dele",
          type:"post",
          dataType:'json',
          data:params,
          success:function(data){
              layer.msg('删除成功');
             tables();
          },
          error:function(or){
              alert('失败')
          }
      })
  }
  
  
});


</script>

表单代码

<%@ 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>
<base href="${pageContext.request.contextPath}/">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="statis/css/layui.css">   
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="statis/layui.all.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<input type="hidden" id="absolutePath" value="${pageContext.request.contextPath}/">
</head>
<body>
<form id="ff" method="post">
<script type="text/javascript" src="static/js/bookList.js"></script>

 <div class="layui-form-item" style="margin-top: 30px;">
 
   <div class="layui-inline">
       <label class="layui-form-label">书本名称</label>
      <div class="layui-input-inline">
     
        <input type="text" name="bid"  readonly="readonly" id="bid" class="layui-input">
      </div>
    </div>
 
    <div class="layui-inline">
       <label class="layui-form-label">书本名称</label>
      <div class="layui-input-inline">
     
        <input type="text" name="bname"  placeholder="请输入名称"  id="bname" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">书本价格</label>
      <div class="layui-input-inline">
        <input type="text" name="price" placeholder="请输入价格" id="price" class="layui-input">
      </div>
    </div>
  </div>
  


</form>
</body>
</html>

测试效果如下

 删除圣墟41章

结果

新增书籍

 

修改三国演义为红楼梦

模糊查询（id含有55的）

猜你喜欢

转载自www.cnblogs.com/xmf3628/p/11210541.html
今日推荐
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
最强开源大模型 Llama 3 上架 Gitee AI
周排行
自媒体文章如何提高原创度以及如何检测原创度
开启qq邮箱的smtp服务
Qt程序单次启动（QSingleApplication类）
国外的外包网站
更新IDEA主题——放飞代码风格
cocos2dx 实现搓牌效果（翻牌效果），包括铺平动画
dict和json之间的互相转换
angular的一些思考
. Fibonacci数列是这样定义的： F[0] = 0 F[1] = 1 for each i ≥ 2: F[i] = F[i-1] + F[i-2] 因此，Fibonacci数列就形如：0, 1
洛谷P1064 金明的预算方案
每日归档
更多
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)
2024-04-16(70)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022