layui增刪改查

dao方法

package com.dao;
import java.sql.SQLException;
import java.util.List;
import java.util.Map;
import com.util.JsonBaseDao;
import com.util.JsonUtils;
import com.util.PageBean;
import com.util.StringUtils;

public class BookDao extends JsonBaseDao{
    /**
     * 查詢未上架
     * @param paMap
     * @param pageBean
     * @return
     * @throws SQLException 
     * @throws IllegalAccessException 
     * @throws InstantiationException 
     */
    public List<Map<String, Object>> query(Map<String, String[]> paMap,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
        
        String sql="SELECT * FROM (\r\n" + 
                "SELECT a.'book_id',a.'book_name',a.'book_name_pinyin',b.'book_category_name',a.'book_author',a.'book_price',a.'book_image',a.'publishing',a.'book_desc',c.'zt_name',a.'deploy_datetime',a.'sales_volume' FROM t_book a INNER JOIN t_book_category b INNER JOIN t_book_zt c ON a.book_category_id=b.book_category_id AND a.'book_state'=c.'zt_id') a\r\n" + 
                "WHERE a.zt_name='未上架'";
        String uname = JsonUtils.getParamVal(paMap, "book_name");
        if(StringUtils.isNotBlank(uname)) {
            sql = sql+"  AND a.book_name LIKE '%"+uname+"%'";
        }
        System.out.println(sql);
        return super.executeQuery(sql, pageBean);
    } 
    
    /**
     * 新增書本方法
     * @param paMap
     * @return
     * @throws NoSuchFieldException
     * @throws SecurityException
     * @throws IllegalArgumentException
     * @throws IllegalAccessException
     * @throws SQLException
     */
    public int addBook(Map<String, String[]> paMap) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
        String sql="INSERT INTO t_book (book_name,book_name_pinyin,book_category_id,book_author,book_price,publishing,book_desc) VALUES (?,?,?,?,?,?,?)";  
        return super.executeUpdate(sql, new String[] {"book_name","book_name_pinyin","book_category_id","book_author","book_price","publishing","book_desc"}, paMap);
    }
    
    /**
     * 修改的方法
     * @param paMap
     * @return
     * @throws NoSuchFieldException
     * @throws SecurityException
     * @throws IllegalArgumentException
     * @throws IllegalAccessException
     * @throws SQLException
     */
    public int edit(Map<String, String[]> paMap) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
        String sql="update t_book set book_name=?,book_name_pinyin=?,book_category_id=?,book_author=?,book_price=?,publishing=?,book_desc=? where book_id=?";
        return super.executeUpdate(sql, new String[] {"book_name","book_name_pinyin","book_category_id","book_author","book_price","publishing","book_desc","book_id"}, paMap);
    }
    
    /**
     * 刪除方法
     * @param paMap
     * @return
     * @throws NoSuchFieldException
     * @throws SecurityException
     * @throws IllegalArgumentException
     * @throws IllegalAccessException
     * @throws SQLException
     */
    public int remove(Map<String, String[]> paMap) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
        String sql="delete from t_book where book_id=?";
        return super.executeUpdate(sql, new String[] {"book_id"}, paMap);
    }    
}

action

package com.web;
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.dao.BookDao;
import com.util.PageBean;
import com.util.ResponseUtil;
import com.zking.framework.ActionSupport;

public class BookAction extends ActionSupport{
    private BookDao bookDao=new BookDao();
    /**
     * 查詢請求
     * @param req
     * @param resp
     * @return
     */
    public String query(HttpServletRequest req,HttpServletResponse resp) {
        try {
            PageBean pageBean=new PageBean();
            pageBean.setRequest(req);
            List<Map<String, Object>> list=this.bookDao.query(req.getParameterMap(), pageBean);
            ObjectMapper om=new ObjectMapper();
            Map<String, Object> map=new HashMap<>();
            map.put("code", 0);
            map.put("count", pageBean.getTotal());
            map.put("data", list);
            ResponseUtil.write(resp, om.writeValueAsString(map));
        } catch (Exception e) {
            // TODO: handle exception
            e.printStackTrace();
        }
        return null;    
    }
    
    /**
     * 增加
     * @param req
     * @param resp
     * @return
     */
    public String addBook(HttpServletRequest req,HttpServletResponse resp) {
        try {
            int n=this.bookDao.addBook(req.getParameterMap());
            ResponseUtil.write(resp, n);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }
    
    /**
     * 修改方法
     * @param req
     * @param resp
     * @return
     */
    public String edit(HttpServletRequest req,HttpServletResponse resp){
        try {
            int edit = this.bookDao.edit(req.getParameterMap());
            ObjectMapper om=new ObjectMapper();
            ResponseUtil.write(resp, om.writeValueAsString(edit));
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } 
        
        return null;
    }
    
    /**
     * 刪除請求
     * @param req
     * @param resp
     * @return
     */
    public String remove(HttpServletRequest req,HttpServletResponse resp) {
        try {
            int remove=this.bookDao.remove(req.getParameterMap());
            ObjectMapper om=new ObjectMapper();
            ResponseUtil.write(resp, om.writeValueAsString(remove));
        } catch (Exception e) {
            // TODO: handle exception
            e.printStackTrace();
        }
        return null;    
    }    
}

book.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> 
<title>Insert title here</title>
</head>


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

<blockquote class="layui-elem-quote layui-bg-black">
<!-- 搜索 -->
 <div class="layui-form layui-bg-black">
    <div class="layui-form-item " style="margin-left: 28%;">
        <label class="layui-form-label">書籍名稱</label>
        <div class="layui-input-inline">
            <input type="text" id='book_name' name="book_name" lay-verify="required" placeholder="請輸入書籍名" autocomplete="true" class="layui-input">
        </div>
        <button class="layui-btn layui-btn-white " data-type="reload"><i class="layui-icon">&#xe615;</i>查詢</button>
        <button class="layui-btn layui-btn-white"   data-type="add">新建</button>
    </div>
</div>   
</blockquote>
<!-- 展示數據表格 -->
<table class="layui-hide layui-bg-black " id="test" lay-filter="test"></table>

<!--行內樣式按鈕   -->
<script type="text/html" id="lineBtns">
      <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i>編輯</a>
     <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a>
</script>

<!--彈出層  -->
     <div class="site-text" style="margin: 5%; display: none" id="box1"  target="test123">
        <form class="layui-form layui-form-pane" onsubmit="return false" id="book">
            <div class="layui-form-item"> 
               <label class="layui-form-label"> 書本名</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input"  id="book_name2"  name=book_name><br>
                </div>
                <label class="layui-form-label"> 書本拼音</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input"  id="book_name_pinyin"  name=book_name_pinyin><br>
                </div>
                <label class="layui-form-label"> 書本類別ID</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input"  id="book_category_id"  name=book_category_id><br>
                </div>
                <label class="layui-form-label"> 書本作者</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input"  id="book_author"  name=book_author><br>
                </div>
                <label class="layui-form-label"> 書本價格</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input"  id="book_price"  name=book_price><br>
                </div>
                <label class="layui-form-label"> 書本出版社</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input"  id="publishing"  name=publishing><br>
                </div>
                 <label class="layui-form-label"> 書本簡介</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input"  id="book_desc"  name=book_desc><br>
                </div>
            </div>
        </form>
    </div> 
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/layui/book.js"></script>  
</body>
</html>

book.js

layui.use(['table','layer','form'],function(){
    var data=document.getElementById("dz").value;
    var table =layui.table;
    var layer=layui.layer;
    var form = layui.form;
    table.render({
        elem:'#test',
        url:data+'/bookAction.action?methodName=query',
        method:'post',
        cols:[[
            {field:'book_id',title:'書本ID',width:100,height:80},    
            {field:'book_name',title:'書本名稱',width:100,height:80}, 
            {field:'book_name_pinyin',title:'書本拼音',width:100,height:80},  
            {field:'book_category_name',title:'書本類型',width:100,height:80},  
            {field:'book_author',title:'書本作者',width:100,height:80},  
            {field:'book_price',title:'書本價格',width:100,height:80},  
            {field:'book_image',title:'書本圖片',width:100,height:80},  
            {field:'publishing',title:'書本出版社',width:100,height:80},  
            {field:'book_desc',title:'書本簡介',width:100,height:80},  
            {field:'zt_name',title:'書本狀態',width:100,height:80},  
            {field:'deploy_datetime',height:80, width:300, title: '上架時間',templet:"<div>{{layui.util.toDateString(d.deploy_datetime, 'yyyy-MM-dd HH:mm:ss')}}</div>"},
            {field:'sales_volume',title:'書本銷量',width:100,height:80}, 
            {fixed: 'right', title:'操作', toolbar: '#lineBtns', width:150}
        ]],
        page:'true',
        id: 'testReload'
    });
    //上方菜單操作欄(查詢、以及  增加  按鈕  )
    var $ = layui.$, active = {
            //查詢
            reload: function () {
                var name = $('#book_name');//書籍名稱 根據 id來取值
                console.log(name.val());
                // 執行重載
                table.reload('testReload', {
                    page: {
                        curr: 1
                        // 重新從第 1 頁開始
                    },
                    where: {
                        key: 'book_name',
                        book_name: name.val(),
                    }
                });
            }, add: function () { //添加
                layer.open({//彈出框
                    type: 1,
                    title: '添加書本',
                    maxmin: true,
                    shadeClose: true, //點擊遮罩關閉層
                    area: ['80%', '80%'],
                    content: $('#box1'),
                    btn: ['確定', '取消'],
                    yes: function (index, layero) {//確定執行函數
                        console.log(layero);
                        //執行添加方法
                        $.getJSON(data+"/bookAction.action?methodName=addBook", {
                            book_name: $("#book_name2").val(),
                            book_name_pinyin: $("#book_name_pinyin").val(),
                            book_category_id: $("#book_category_id").val(),
                            book_author: $("#book_author").val(),
                            book_price: $("#book_price").val(),
                            publishing: $("#publishing").val(),
                            book_desc: $("#book_desc").val()
                            
                        }, function (data) {
                            /*根據后台返回的參數來進行判斷  */
                              if (data >  0) {
                                  //彈出提示層
                                  layer.alert('添加成功', {icon: 1, title: '提示'}, function (i) {
                                      layer.close(i);
                                      layer.close(index);//關閉彈出層
                                      $("#book")[0].reset()//重置form
                                  })
                                  //重載表格
                                  table.reload('testReload', {
                                      page: {
                                          curr: 1// 重新從第 1 頁開始
                                      }
                                  })
                              } else{
                                  //提示添加失敗
                                  layer.msg('添加失敗')
                              }
                          })

                      }, cancel: function (index, layero) {//取消
                          //當點擊取消按鈕
                          $("#book")[0].reset()//重置form  根據id
                          layer.close(index)
                      }
                  });
              }
      }
    $('.layui-form .layui-btn').on('click', function () {
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
    
    /*表格 行內操作(編輯  以及  刪除 按鈕操作)  */
        table.on('tool(test)', function(obj){
         var data = obj.data; //獲得當前行數據
         var urlex=document.getElementById("dz").value;
         var tr=obj.tr//活動當前行tr 的  DOM對象
         console.log(data);
         var layEvent = obj.event; //獲得 lay-event 對應的值（也可以是表頭的 event 參數對應的值）
         if(layEvent === 'del'){ //刪除
             layer.confirm('確定刪除嗎？',{title:'刪除'}, function(index){
                 //向服務端發送刪除指令og
                 $.getJSON(urlex+'/bookAction.action?methodName=remove',{book_id: data.book_id}, function(ret){
                         layer.close(index);//關閉彈窗
                         table.reload('testReload', {//重載表格
                         })
                 });
                 layer.close(index);
             });
         } else if(layEvent === 'edit'){
             layer.open({
                 type: 1
                 ,skin: 'layui-layer-molv'
                 ,area: ['380px', '270px']
                 ,title: ['編輯書本信息','font-size:18px']
                 ,btn: ['確定', '取消'] 
                 ,shadeClose: true
                 ,shade: 0 
                 ,maxmin: true 
                 ,content:$('#box1')
                 ,success:function(layero,index){
                     $('#book_name2').val(data.book_name);
                     $('#book_name_pinyin').val(data.book_name_pinyin);
                     $('#book_category_id').val(data.book_category_id);
                     $('#book_author').val(data.book_author);
                     $('#book_price').val(data.book_price);
                     $('#publishing').val(data.publishing);
                     $('#book_desc').val(data.book_desc);
                 },yes:function(index,layero){
                      $.getJSON(urlex+'/bookAction.action?methodName=edit',{
                          book_name: $('#book_name2').val(),
                          book_name_pinyin: $('#book_name_pinyin').val(),
                          book_category_id: $('#book_category_id').val(),
                          book_author: $('#book_author').val(),
                          book_price: $('#book_price').val(),
                          publishing: $('#publishing').val(),
                          book_desc: $('#book_desc').val(),
                          book_id: data.book_id,
                      },function(data){
                          if(data>0){
                              layer.alert('編輯成功',{icon:1,title:'提示'},function(i){
                                  layer.close(i);
                                  layer.close(index);
                                  $("#book")[0].reset()
                              })
                              table.reload('testReload',{
                                  page:{
                                      curr:1
                                  }
                              })
                          }
                      });
                 }
             });
         }
      });
})

樹形菜單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/index.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>
  <!-- 左邊tree頁面 -->
  <input type="hidden" id="menuHid" value="${menuHid }"> 
    <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>

 

樹形菜單js

$(function () {
    $.ajax({
        type: "post",
        url:'menuAction.action?methodName=treeMenu&&menuHid='+$("#menuHid").val(),
        dataType: "json",
        success: function (data) {
            console.info(data);
            layui.tree({
                elem: '#demo',// 傳入元素選擇器
                nodes: data,
                click: function (node) {// 點擊tree菜單項的時候
                    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);
                        }
                    }

                }
            });
        }
    });
})

 

新建

修改

 

刪除

 

模糊查詢