layui增删改查

首先要导入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', 300, align:'center', sort: true, fixed: 'left', totalRowText: '合计：'}
      ,{field: 'bname', title: '书本名称', 300 ,align:'center'}
      ,{field: 'price', title: '价格',  300,align:'center', sort: true, totalRow: true}
      ,{fixed: 'right',  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>

indexTree.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">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/layui/css/layui.css">   
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/layui/css/index.css">  
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/layui/layui.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/layui/layui.all.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/layui/jquery-3.3.1.js"></script> 
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/layui/indexTree.js"></script>  
<title>Insert title here</title>
</head>

<body >
<div class="layui-layout layui-layout-admin " id="app">
    <div class="layui-header">
        <div class="layui-logo">后台管理界面</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item"><a href="#" onclick="exit()">退出登录</a></li>
        </ul>
    </div>
 
 
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll ">
            <div id="demo" ></div>
        </div>
    </div>
    
    <div class="layui-body">
        <div class="layui-tab" lay-filter="tabs" lay-allowClose="true">
            <ul class="layui-tab-title">
            </ul>
            <div class="layui-tab-content">
            </div>
        </div>
    </div>
    <div class="layui-footer" align="center" >
        <!-- 底部固定区域 -->
    </div>
</div>
</body>
</html>

indexTree.js

$(function () {
    $.ajax({
        type: "post",
        url:'menuAction.action?methodName=treeMenu',
        dataType: "json",
        contenttype:"application/json",
        success: function (date) {
        var data=JSON.parse(date);
        	console.info(data);
            layui.tree({
                elem: '#demo',// 传入元素选择器
                nodes: data,
                click: function (node) {// 点击tree菜单项的时候
                	alert("123");
                    var element = layui.element;
                    var exist = $("li[lay-id='" + node.id + "']").length;//判断是不是用重复的选项卡
                    if (exist > 0) {
                        element.tabChange('tabs', node.id);// 切换到已有的选项卡
                    } else {
                        if (node.attributes.menuURL != null && node.attributes.menuURL != "") {// 判断是否需要新增选项卡
                            element.tabAdd(
                                'tabs',
                                {
                                    title: node.name,
                                    content: '<iframe   scrolling="yes" frameborder="0" src=" '
                                    + node.attributes.menuURL
                                    + ' " width="100%" height="100%"></iframe>'// 支持传入html
                                    ,
                                    // width="99%" height="99%"
                                    id: node.id
                                });
                            element.tabChange('tabs', node.id);
                        }
                    }

                }
            });
        }
    });
})

　　

测试效果如下

 

 删除圣墟26章

 

结果

 

新增书籍

 

 结果

修改豆豆1号为为红楼梦

 

 

模糊查询（id含有55的）