jquery實現的全選和刪除功能外掛

本章節分享一個程式碼片段，它實現了全選功能，並且能夠通過ajax方式刪除資料，並沒有進行完全的功能演示。

但是也能夠基本說明外掛的功能了，需要的朋友可以做一下參考。

一.外掛程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
(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);

二.程式碼使用片段:

[JavaScript] 純文字檢視 複製程式碼
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);
  });
})