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);
  });
})

回复

我来回复
  • 暂无回复内容