js 通过全选操作来进行批量删除与批量修改

效果图

1.先说js进行全选：

//展示这么多，其实只需要看标红部分就行

<form  name="action" class="form-horizontal" role="form"  method="post" enctype="multipart/form-data" action="batch">
<div class="widget-body">
    <!--添加链接开始-->
    <button type="button"  class="btn btn-sm btn-azure btn-addon" onClick="javascript:window.location.href = '{:url('addlink')}'"> <i class="fa fa-plus"></i> 添加链接</button>
    <!--添加链接结束-->
    <!--数据进行显示-->
        <table class="table table-bordered table-hover" >
            <thead>
            <tr>
                <th style="width: 10px">
                    <label>
                    <input class="checkboxes" value="chkall" type="checkbox"   name="chkall" id="selectAll" >
                        <span class="text"></span>
                    </label>
                </th>
                <th class="text-center" >链接名称</th>
                <th class="text-center">所属位置</th>             
            </tr>
            </thead>
        <tbody id="content">
            {volist name="Link" id="lisres"}
            <tr >
                <!--显示位置-->
                    <td>
                        <label>                                                               //这个很重要
                            <input class="checkboxes" value="{$lisres.id}" type="checkbox"   name="checkbox[]" >
                            <span class="text"></span>
                         </label>
                    </td>
                     <td class="text-center">{$lisres.nav_name}</td>
                     <td class="text-center">{$lisres.nav_type}</td>

            </tr>
            {/volist}
        </tbody>
        </table>
     <!--批量移动删除操作-->
        <div class="action">
            <select class="btn-group" style="margin:10px;width: 150px" name="action" onchange="douAction()">
                <option value="0">请选择...</option>
                <option value="del_all">删除</option>
                <option value="category_move">移动至</option>
            </select>
            <select name="new_cat_id" class="btn-group" style="margin:10px;width: 150px ;display: none" >
                <option value="0">未分类</option>
                <option value="mainnav">主导航栏</option>
                <option value="top">顶部</option>
                <option value="bottom">底部</option>
            </select>
            <button class="btn shiny  " type="submit" style="margin:10px">执行</button>
        </div>
    </form>

//关键代码已经标出

<!--全选操作-->
<script type="text/javascript">
    $(function(){
        $("#selectAll").bind("click",function(){
            if($(this).prop("checked")){
                $("input[type='checkbox']").not(this).prop("checked",true);
            }else{
                $("input[type='checkbox']").not(this).prop("checked",false);
            }
        });
    });
</script>

//删除还是移动？

<!--批量操作-->
<script type="text/javascript">
    onload = function()
    {
        document.forms['action'].reset();
    }
    function douAction(){
        var frm = document.forms['action'];
        frm.elements['new_cat_id'].style.display = frm.elements['action'].value == 'category_move' ? '' : 'none';
    }

</script>

//控制器进行操作

public  function batch(){
   $data=input('post.');
   if($data['action']=='del_all'){
      //通过id吧文章找出来
      $ids=implode(',',$data['checkbox']);
      if($data!='null'){
         if(db('link')->delete($ids)){
            $this->success('删除文章成功','lis');
         }else{
            $this->error('删除文章失败','lis');

         }
      }else{
         $this->error('未选中任何数据');

      }

   }else{
      foreach($data['checkbox'] as $key=>$value){
         $Art=db('link')->where("id"==$value)->select();
         foreach($Art as $k=>$v){
            $Article=new \app\admin\model\Link();
            $res=$Article->update(['id'=>$value,'nav_type'=>$data['new_cat_id']]);
         }

      }if($res){
         $this->success('转移成功','lis');
      }else{
         $this->error('转移失败','lis');

      }


   }
}

//噗，好吧，我觉得只有我自己看的懂了，不过问题也不大，毕竟自己的笔记嘛，以后多许多看吧

js 通过全选操作来进行批量删除与批量修改

猜你喜欢