Ajax复选框多选删除的实现
来源:互联网 发布:matlab周期方波编程 编辑:程序博客网 时间:2024/06/15 08:12
AJAX多选删除的思路是通过控制器从后台删除数据,然后前台的数据是不会刷新的,我们需要用jQuery把前台的数据也删掉。
首先,引用jquery
- <script src="{{asset('lib/js/jquery-2.0.3.min.js')}}"></script>
然后,写出一个个的复选框,其中之一是这样
- ...
- <tr>
- <td><input type="checkbox" name="chk" class="chk" value="{{$c->id}}"></td>
- <td>{{$c->user->name}}</td>
- </tr>
- ...
接着,写出全选/反选功能和删除按钮
- <input type="checkbox" name="allcheck" id="all" value="0">
- <input type="submit" class="btn btn-danger" id='deletesome' value="删除选中">
- <input type="hidden" name="delete" id='delete' value=""> //他负责存放勾选的复选框中的VALUE
最后,我们来写JS,这里是多选删除
- $(function(){
- $("#deletesome").click(function(){
- $.ajax({
- url:"/deletesuggestionsajax",
- type:"get",
- dataType:"json",
- data:"delete="+$(this).next().val(),
- success:function(data){
- if(data.status == 1){
- $(":checked").parent().parent().remove(); //删除所有选中的,用的时候注意删除对象的正确选择
- }else{
- alert('系统故障');
- }
- }
- });
- });
- })
这里是单个的删除,就是在每条后面跟个删除按钮,那时候用这个
- $(function(){
- $(".ajaxdelete").click(function(){
- // console.log($(this).next().val());
- var me=this; //先做个闭包,否则在success里不能用$(this)
- $.ajax({
- url:"/deletesuggestionajax",
- type:"get",
- dataType:"json",
- data:"id="+$(this).next().val(),
- success:function(data){
- if(data.status == 1){
- $(me).parent().parent().remove(); //删除当前的这个
- }else{
- alert('系统故障');
- }
- }
- });
- });
- })
阅读全文
0 0
- Ajax复选框多选删除的实现
- Ajax复选框多选删除的实现
- 复选框实现全选删除
- Jquery-1实现简单的复选框删除增加操作
- JS实现复选框的全选和批量删除功能
- [基础]由复选框实现的批量删除
- JS实现复选框的全选和批量删除功能
- 使用JavaScript实现单击复选框实现全选与全不选功能并通过ajax实现批量删除功能
- jquery复选框checkbox实现删除
- 复选框checkbox实现批量删除
- Datagridvew复选单元格实现多行删除
- jquery复选框checkbox实现删除
- jquery复选框checkbox实现删除
- jsp:选中复选框实现删除功能
- Tapestry5 实现复选框多选
- AJAX实现添加删除
- 通过ajax实现删除
- javascript实现复选框全选/全不选,与asp删除选中的相应记录
- Java异常、断言、日志与调试
- NYOJ-635 Oh, my goddess C语言
- 1010. Radix (25)
- jdk安装配置环境变量以及测试
- 初识AOP
- Ajax复选框多选删除的实现
- 吃货福利get-今日美食food微信小程序
- 文章标题
- 博士之路
- [LeetCode]526. Beautiful Arrangement
- PHP服务器的网页显示空白
- 将Vim打造成服务器端IDE
- Bean 后处理器
- LVS(Linux virtual Server)