如何利用layui实现增删查改操作

首先认识layui

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。

（推荐教程：layui）

下载之后导进css、js样式

简单的效果图

接下来直接上代码

dao方法

package com.chen.dao;import java.sql.SQLException;import java.util.List;import java.util.Map;import com.chen.util.JsonBaseDao;import com.chen.util.JsonUtils;import com.chen.util.PageBean;import com.chen.util.StringUtils;public class BooktypeDao extends JsonBaseDao{/** * 书籍类别查询 * @param paMap * @param pageBean * @return * @throws SQLException  * @throws IllegalAccessException  * @throws InstantiationException  */public List

登录后复制

entity一个树形的实体类

package com.chen.entity;import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;public class TreeNode {private String id;private String name;private Map attributes = new HashMap();private List children = new ArrayList();public String getId() {return id;}public void setId(String id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public Map getAttributes() {return attributes;}public void setAttributes(Map attributes) {this.attributes = attributes;}public List getChildren() {return children;}public void setChildren(List children) {this.children = children;}public TreeNode(String id, String text, Map attributes, List children) {super();this.id = id;this.name = name;this.attributes = attributes;this.children = children;}public TreeNode() {super();}@Overridepublic String toString() {return "TreeNode [id=" + id + ", name=" + name + ", attributes=" + attributes + ", children=" + children + "]";}}

登录后复制

action子控制器

package com.liuting.web;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.core.JsonProcessingException;import com.fasterxml.jackson.databind.ObjectMapper;import com.chen.dao.BooktypeDao;import com.chen.framework.ActionSupport;import com.chen.util.PageBean;import com.chen.util.ResponseUtil;public class BooktypeAction extends ActionSupport {private BooktypeDao booktypeDao=new BooktypeDao();/** * 查询书籍类别 * @param req * @param resp * @return * @throws Exception */public String list(HttpServletRequest req,HttpServletResponse resp) throws Exception {try {PageBean pageBean=new PageBean();pageBean.setRequest(req);List

登录后复制

mvc.xml的配置路径

登录后复制

web.xml的配置路径

  Mvc_Layui    encodingFiter  com.chen.util.EncodingFiter      encodingFiter  /*      dispatherServlet  com.chen.framework.DispatherServlet    xmlPath  /mvc.xml        dispatherServlet  *.action  

登录后复制

jsp页面

     
             书籍类别管理         分类列表    
 
    
        书籍名称        
                    
        查询        新建    
   

登录后复制 编辑 删除      //管理//执行渲染layui.use(['table','layer','form'],function(){var data=document.getElementById(“sj”).value;var table =layui.table;var layer=layui.layer;var form = layui.form; /*展示数据表格 */table.render({ elem:'#test'//表格id,url:data+'/booktypeAction.action?methodName=list'//所对应调用的接口,method:'post'//提交方式 ,cols:[[ /*根据数据库的表格所对应的名称 */ {field:'tid',height:80, width:300, title: '书籍类别序号', sort: true} ,{field:'tname', height:80,width:300, title: '书籍类别名称'} ,{field:'right',height:80, width:300, title: '操作', toolbar:'#lineBtns'}//操作栏 ]] ,page:'true'//分页 , id: 'testReload'});//上方菜单操作栏(查询、以及 增加 按钮 ) var $ = layui.$, active = { //查询 reload: function () { var booktypename = $('#booktypename');//书籍类别名称 根据 id来取值 console.log(booktypename.val()); // 执行重载 table.reload('testReload', { page: { curr: 1 // 重新从第 1 页开始 }, where: { key: 'tname', tname: booktypename.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+”/booktypeAction.action?methodName=addBookType”, { tname: $(“#booktypename1”).val(), ///角色名 /* booktypename: $(“input[ name='booktypename1']”).val(), *///角色名 }, function (data) { /*根据后台返回的参数来进行判断 */ if (data==1) { layer.alert('添加成功', {icon: 1, title: '提示'}, function (i) { layer.close(i); layer.close(index);//关闭弹出层 $(“#booktype”)[0].reset()//重置form }) table.reload('testReload', {//重载表格 page: { curr: 1 // 重新从第 1 页开始 } }) } else if(data==2){ layer.msg('添加失败,请勿重复添加书本类别名称') } }) }, cancel: function (index, layero) {//取消 $(“#booktype”)[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(“sj”).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+'/booktypeAction.action?methodName=deleteBookType',{tid:data.tid}, function(ret){ layer.close(index);//关闭弹窗 table.reload('testReload', {//重载表格 page: { curr: 1 // 重新从第 1 页开始 } }) }); layer.close(index); }); } else if(layEvent === 'edit'){ //编辑 layer.open({ type: 1 //Page层类型 ,skin: 'layui-layer-molv' ,area: ['380px', '270px'] ,title: ['编辑书本类别信息','font-size:18px'] ,btn: ['确定', '取消'] ,shadeClose: true ,shade: 0 //遮罩透明度 ,maxmin: true //允许全屏最小化 ,content:$('#box1') //弹窗id ,success:function(layero,index){ $('#booktypeid').val(data.tid); $('#booktypename1').val(data.tname); },yes:function(index,layero){ /* $.ajaxSettings.async = false; */ $.getJSON(urlex+'/booktypeAction.action?methodName=updateBookType',{ tid: $('#booktypeid').val(), tname: $('#booktypename1').val(), tid: data.tid, },function(data){ //根据后台返回的参数，来进行判断 if(data>0){ layer.alert('编辑成功',{icon:1,title:'提示'},function(i){ layer.close(i); layer.close(index);//关闭弹出层 $(“#booktype”)[0].reset()//重置form }) table.reload('testReload',{//重载表格 page:{ curr:1 } }) } }); } }); } }); });// 实现查询所有的菜单

$(function () {    $.ajax({        type: "post",        url: "menuAction.action?methodName=treeMenu",        dataType: "json",        /*data: {// 传给servlet的数据,            role_id: MenuHid,            right_code: "-1",            d: new Date()        },*/        success: function (data) {        console.info(data);            layui.tree({                elem: '#demo',// 传入元素选择器                nodes: data,//     spread:true,                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: ''// 支持传入html                                    ,                                    // width="99%" height="99%"                                    id: node.id                                });                            element.tabChange('tabs', node.id);                        }                    }                }            });        }    });})