前端删除表格某一行信息怎么实现
2019-07-18 14:31
357 查看
使用layui的方法
1、监听行事件信息,使用的是lay-filter,
[code]table.on('tool(test)', function(obj){ }
2、删除按钮后面定义的lay-event是delete,通过lay-filter捕捉按钮事件,然后上面的 代码可以捕捉到行信息,里面的内容是
[code]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、监听行事件
先指定删除按钮
[code]<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
[code] @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
[code] public int delete(String id)throws Exception { return FireWallDAO.delete(id); }
5、编写dao
[code] public int delete(String id)throws Exception { return sqlsession.delete("FireWallDAO.delete", id); }
6、mapper是根据选中的id值删除,
[code] <delete id="delete" parameterType="String"> DELETE FROM yf_firewall_access WHERE ID=#{id} </delete>
相关文章推荐
- 不用ajax也能实现的功能!单击添加新行时可以删除这一行信息的源码
- js节点对象操作--------输入个人信息加载表格中并实现删除功能
- jQuery实现表格全选、反选、删除一行或多行、增加一行
- js实现添加删除表格的一行
- easyUI的table表格怎么实现将某一列数据之和放入新追加的一行中
- JavaScript动态实现表格添加、删除、插入、上移、下移一行功能
- jQuery 实现表格最后增加一行和删除最后一行
- jQuery实现用户信息表格的添加和删除功能
- 基于jquery的实现简单的表格中增加或删除下一行
- 基于jquery的实现简单的表格中增加或删除下一行
- 在JS表格中怎么删除一行(不是指定行,而是我表格中每行后面都有一个删除按钮,按其中一个按钮就删除那一行
- jQuery实现用户信息表格的添加、删除操作
- easyUI的table表格怎么实现将每一行中某几列数据相加放入另一列
- jquery 实现简单的表格中增加或删除下一行
- 基于jquery的实现简单的表格中增加或删除下一行
- Java删除txt中文件中某一行数据 ,怎么实现?
- js实现返回上一页,标签的事件和href,删除表格的一行
- js+jquery实现增加或删除表格中的一行数据
- JQUERY动态绘制表格,实现动态添加一行,删除一行
- 点击按钮实现表格动态添加或删除一行