jquery实现的全选和删除功能插件
分类:实例代码
本章节分享一个代码片段,它实现了全选功能,并且能够通过ajax方式删除数据,并没有进行完全的功能演示。
但是也能够基本说明插件的功能了,需要的朋友可以做一下参考。
一.插件代码如下:
(function($){ $.fn.selectall = function(className) { $(this).bind('click',function(){ if($(this).attr('checked') == 'checked'){ $(this).attr("checked",false) $('.'+className).attr('checked',false); } else{ $(this).attr('checked','checked'); $('.'+className).attr('checked','checked'); } }); $('.'+className).bind('click',function(){ if($(this).attr('checked') == 'checked'){ $(this).attr("checked",false); } else{ $(this).attr('checked','checked'); } }); }; $.fn.delselect = function(className,url,fun,unselectfun){ $(this).bind('click',function(){ var selectid = ''; $("."+className).each(function(){ if($(this).attr('checked')=='checked'){ selectid+=$(this).attr('check-value')+','; } }); if(selectid){ selectid = selectid.substring(0,selectid.length-1); $.post(url,{ids:selectid},function(data){ fun(data); }); }else{ unselectfun(); } }); }; })(jQuery);
二.代码使用片段:
function DelAlert(data){ if(data == 'error'){ alert("错误~"); } else if(data=='success'){ alert("成功~"); location.reload(); } } //引入jquery,这里后台配合的是thinkphp $(function(){ //每行的checkbox需要有check-value属性来存放当前行的id //选中全部,checkAll 为选中全部的checkbox的id selctone 为每一行checkbox的class $('#checkAll').selectall('selectone'); //删除选中,deleteAll为删除全部按钮的id selectone 为每一行checkbox的class 后台接收参数ids 格式如: 1,2,3 var url = "Home/Role/delall'"; $('#deleteAll').delselect('selectone',url,function(data){ DelAlert(data); },function(){ layer.msg("没有选中内容",2,0); }); })
一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu