使用layui的方法

1、监听行事件信息，使用的是lay-filter，

table.on('tool(test)', function(obj){
}

2、删除按钮后面定义的lay-event是delete，通过lay-filter捕捉按钮事件，然后上面的代码可以捕捉到行信息，里面的内容是

var data = obj.data; //获得当前行数据alert(obj.data);var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）var tr = obj.tr; //获得当前行 tr 的DOM对象if(layEvent === 'del'){ //删除layer.confirm('真的删除行么', function(index){obj.del(); //删除对应行（tr）的DOM结构，并更新缓存layer.close(index);//向服务端发送删除指令});

3、编写controller

4、编写service 和 dao

5、mapper上继承的是mybatis的myMapper ，JDBC操作使用的是封装好的delete方法，根据的是选中的表格的id值

使用ajax的方法

1、监听行事件

先指定删除按钮

<shiro:hasPermission name="FireWall:delete"><a class="delete" target="ajaxTodo" title="确认要删除此数据吗?" href="${ctx}/fireWall/delete/?ids={slt_uid}">删除</a></shiro:hasPermission>

2、监听事件用的是table的event

3、编写controller

 @RequestMapping("/delete")public @ResponseBody String delete(String ids) {AjaxObject ajaxObject = new AjaxObject();try {String[] idarr = ids.split(",");for (String id : idarr) {fireWallService.delete(id);}ajaxObject.setNavTabId(moduleListNavId);ajaxObject.setMessage("删除成功");} catch (Exception e) {e.printStackTrace();ajaxObject.setStatusCode(AjaxObject.STATUS_CODE_FAILURE);ajaxObject.setMessage("删除失败");}ajaxObject.setCallbackType("");return ajaxObject.toString();}

主要就是传入了一个id值，这个值这个行数据的id，虽然在表格当中不可见但是需要传入的是这个值。

4、编写service

 public  int delete(String id)throws Exception{return FireWallDAO.delete(id);}

5、编写dao

 public  int delete(String id)throws Exception{return sqlsession.delete("FireWallDAO.delete", id);}

6、mapper是根据选中的id值删除，

 <delete id="delete" parameterType="String">DELETE FROM yf_firewall_access WHERE ID=#{id}</delete>

前端删除表格某一行信息怎么实现相关推荐

利用jquery动态添加和删除表格的一行，并且保存单行数据
开发时遇到一个需求:要求要在页面的表格可以添加和删除一行,并能填写对应的数据后保存这一行数据. HTML代码界面使用了freemarker框架,teams是后台传过来的list类型数据 <fo ...
在可编辑表格EditorGrid中，我选择一行已输入的数据，点击删除按钮，该行数据将被删除，然后当我点击表单提交按钮时，已经被删除的那一行数据仍然被插入数据库中...
为什么80%的码农都做不了架构师?>>> 问题描述:在可编辑表格中,我选择一行已输入的数据,点击删除按钮,该行数据将被删除,然后当我点击表单提交按钮时,已经被删除的那一行数据仍 ...
删除表格一行数据并更新后表格数据无变化的解决方法
最近在一个小项目中遇到这样一个问题,我在前端页面中删除表格中的一行数据,数据库中已经删除,且重新更新了数据并显示,但是表格重新显示的还是之前的数据.查阅网上的资料后,尝试网友的方法,使用v-showC ...
dtgrid 手动条件删除表格中的某一行
dtgrid 手动条件删除表格中的某一行 var grid = $.fn.DtGrid.init(dtGridOption);$(function () {grid.load();});functio ...
js动态删除表格中的某一行
js动态删除表格中的某一行 <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...
使用js删除表格中的一行的一个小练习
代码: <!DOCTYPE html> <html lang="ch"><head><meta charset="UTF-8&q ...
前端之表格，表单，列表
## 本资源由 itjc8.com 收集 --- typora-copy-images-to: media --- > 第01阶段.前端基础.表格 # HTML 第二天目标能够利用表格.列表和 ...
根据需求增加或删除表格行
根据需求增加或删除表格行 ------------------------------------- 开发工具与关键技术:Visual Studio 2015 C# 作者:林敏静撰写时间:2019年 ...
通过按钮添加、删除表格及表单元素
写页面的时候有个需求:通过点击"添加""删除"按钮,添加和删除表格里的一行.表格里除了文字还有些按钮.下拉选框之类的类似于这种. 刚学前端很多知识都欠缺,查了些 ...
5如何将表格的一行数据清空_微信公众号推文中如何自定义添加表格？
微信公众号发的图文消息里经常需要有表格,因为表格进行数据展现更直观明了,所以接下来就给大家分享一下如何自定义添加表格.打开小蚂蚁编辑器,在编辑区点击鼠标右键,在出现的选项中选择[插入表格]. 系统会默 ...

前端删除表格某一行信息怎么实现

使用layui的方法

使用ajax的方法

前端删除表格某一行信息怎么实现相关推荐

最新文章

热门文章