运用layui实现增删改查

本文介绍了如何运用layui前端UI框架进行增删改查的功能实现。首先介绍了layui的基本特点和官网,接着展示了引入layui样式和脚本的过程。通过简单的代码示例,包括util工具类、dao方法、entity实体类、action子控制器、mvc.xml和web.xml配置,以及jsp页面和必要的jar包,展示了完整的实现步骤。
摘要由CSDN通过智能技术生成

运用layui实现简单增删改查

首先认识layui

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

它的官方网址: https://www.layui.com/
下载之后导进css、js样式

简单的效果图

在这里插入图片描述

接下来直接上代码

util的工具类什么的,之前的博客有写到
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<Map<String, Object>> list(Map<String, String[]> paMap,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
   
		String sql=" select * from t_type where true";
		String tid=JsonUtils.getParamVal(paMap, "tid");
		String tname=JsonUtils.getParamVal(paMap, "tname");
		if(StringUtils.isNotBlank(tid)) {
   
			sql+=" and tid ="+tid+" ";
		}
		if(StringUtils.isNotBlank(tname)) {
   
			sql+=" and tname like '%"+tname+"%'";
		}
		sql += "  order by tid desc ";
		return executeQuery(sql, pageBean);
	}
	
	
	
	
	
	/**
	 * 增加
	 * @param paMap
	 * @return
	 * @throws NoSuchFieldException
	 * @throws SecurityException
	 * @throws IllegalArgumentException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 */
	public int addType(Map<String, String[]> paMap) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
   
		String sql="insert into t_type(tname)  values(?) ";
		
		return super.executeUpdate(sql, new String[] {
   "tname"}, paMap);
	}
	
	
	/**
	 * 修改
	 * @param paMap
	 * @return
	 * @throws NoSuchFieldException
	 * @throws SecurityException
	 * @throws IllegalArgumentException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 */
	public int editType(Map<String, String[]> paMap) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
   
		String sql="update t_type set tname=? where tid=?";
		
		return super.executeUpdate(sql, new String[] {
   "tname","tid"}, paMap);
	}
	
	/**
	 * 删除
	 * @param paMap
	 * @return
	 * @throws NoSuchFieldException
	 * @throws SecurityException
	 * @throws IllegalArgumentException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 */
	
	public int removeType(Map<String, String[]> paMap) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
   
		String sql="delete from t_type where tid=? ";
		
		return super.executeUpdate(sql, new String[] {
   "tid"}, paMap);
	}
	
	

}

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<String, Object> attributes = new HashMap<>();
	private List<TreeNode> 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<String, Object> getAttributes() {
   
		return attributes;
	}

	public void setAttributes(Map<String, Object> attributes) {
   
		this.attributes = attributes;
	}

	public List<TreeNode> getChildren() {
   
		return children;
	}

	public void setChildren(List<TreeNode> children) {
   
		this.children = children;
	}

	public TreeNode(String id, String text, Map<String, Object> attributes, List<TreeNode> children) {
   
		super();
		this.id = id;
		this.name = name;
		this.attributes = attributes;
		this.children = children;
	}

	public TreeNode() {
   
		super();
	}

	@Override
	public String toString() {
   
		return "TreeNode [id=" + id + ", name=" + name + ", attributes=" + attributes + ", children=" 
对于前端的增删改查页面,你可以使用Layui这个前端框架来实现。下面是一个简单的示例代码,展示了如何使用Layui实现增删改查的功能: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>增删改查页面</title> <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css"> </head> <body> <div class="layui-container"> <div class="layui-row"> <div class="layui-col-md12"> <table class="layui-table"> <thead> <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> <th>操作</th> </tr> </thead> <tbody id="dataList"> <!-- 这里会动态添加数据 --> </tbody> </table> </div> </div> </div> <script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script> <script> layui.use(['layer', 'table'], function(){ var layer = layui.layer; var table = layui.table; // 初始化表格 table.render({ elem: '#dataList', url: '/api/data', // 获取数据的接口 page: true, cols: [[ {field: 'id', title: 'ID'}, {field: 'name', title: '姓名'}, {field: 'age', title: '年龄'}, {fixed: 'right', title: '操作', toolbar: '#barDemo'} ]] }); // 监听工具条 table.on('tool(dataList)', function(obj){ var data = obj.data; if(obj.event === 'edit'){ // 编辑操作 layer.open({ title: '编辑', content: '编辑页面的HTML代码', // 编辑页面的HTML代码 area: ['500px', '300px'], btn: ['保存', '取消'], yes: function(index, layero){ // 保存操作 // 通过Ajax发送数据到后端进行保存 layer.close(index); // 关闭弹窗 }, btn2: function(index, layero){ // 取消操作 layer.close(index); // 关闭弹窗 } }); } else if(obj.event === 'delete'){ // 删除操作 layer.confirm('确定删除该数据吗?', function(index){ // 通过Ajax发送数据到后端进行删除 layer.close(index); // 关闭弹窗 }); } }); }); </script> </body> </html> ``` 上述代码中,使用了Layui的表格组件 `layui.table` 来展示数据列表,并使用了 `layui.layer` 组件来实现弹窗功能。你需要根据实际需求,将代码中的接口URL、编辑弹窗的HTML代码、Ajax请求等部分替换为你自己的代码。同时,你还可以根据实际需求添加其他功能,比如新增数据等操作。 请注意,上述代码仅为示例,具体的实现方式可能因项目需求而有所不同。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值