全选框操作及批量操作

一、全选框

1、查看选框

input中的checkbox类型

   <table class="table table-striped sortable">
                        <thead>
                        <tr>
                            <th>
                                <input id="allboxs" onclick="allcheck()" type="checkbox"/>
                            </th>
                            <th>任务ID</th>
                            <th>任务名称</th>
                            <th>Bean名称</th>
                            <th>执行方法</th>
                            <th>参数</th>
                            <th>cron表达式</th>
                            <th>状态</th>
                            <th>描述</th>
                            <th>创建日期</th>
                            <th>修改日期</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <!--/*@thymesVar id="jobs" type="job"*/-->
                        <tr th:each="job:${jobs}">
                            <td>
                                <input  th:name="${job.getJobId()}" type="checkbox" />
                            </td>
                            <td  th:text="${job.jobId}">
                            </td>
                            <td>[[${job.appName}]]</td>
                            <td th:text="${job.beanName}"></td>
                            <td th:text="${job.methodName}"></td>
                            <td th:text="${job.params}"></td>
                            <td th:text="${job.cronExpression}"></td>
                            <td th:text="${job.status==0?'运行中':'已暂停'}"></td>
                            <td th:text="${job.remark}"></td>
                            <!--使用时间格式化工具-->
                            <td th:text="${job.creatTime}"></td>
                            <td th:text="${job.updateTime}"></td>
                            <!--操作-->
                            <td>
                                <a class="btn btn-sm btn-primary" th:href="@{/job/updateJob/}+${job.getJobId()}">修改</a>
                                <a class="btn btn-sm bth-danger" th:href="@{/job/deleteJob/}+${job.getJobId()}">删除</a>
                                <a class="btn btn-sm btn-success" th:href="@{/job/pauseJob/}+${job.getJobId()}" >暂停</a>
                                <a class="btn btn-sm btn-warning" th:href="@{/job/resumeJob/}+${job.getJobId()}">恢复</a>
                                <a class="btn btn-sm bth-info" th:href="@{/job/runJob/}+${job.getJobId()}">立即执行</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>

JS

2、组件

 <script th:src="@{/js/jquery.min.js}"></script>

3、全选框设置

function allcheck() {
            console.log(22222);
            var nn = $("#allboxs").is(":checked"); //判断th中的checkbox是否被选中，如果被选中则nn为true，反之为false
            if(nn == true) {
                var namebox = $("input[type^='checkbox']");  //获取name值为boxs的所有input
                for(i = 0; i < namebox.length; i++) {
                    namebox[i].checked=true;    //js操作选中checkbox
                }
            }
            if(nn == false) {
                var namebox = $("input[type^='checkbox']");
                for(i = 0; i < namebox.length; i++) {
                    namebox[i].checked=false;
                }
            }
        }

二、不同操作的批量设置

接上

  <script>
      
        /*批量暂停*/
        function allPause() {
            var namebox = $("input[type^='checkbox']");  //获取name值为boxs的所有input
            var ids=[];
            for(i = 0; i < namebox.length; i++) {
                if(namebox[i].checked)
                {//赋值给JobId
                    ids.push(namebox[i].name);
                }
            }
            console.log(ids);
            ids=JSON.stringify(ids);
            console.log(ids);
            $.ajax({url:"/job/pause",
                type:"POST",
                data:ids ,
                contentType : 'application/json;charset=utf-8',
                success:function(data){
                    if(data == 200 ){
                        alert("批量暂停成功");
                        window.location.reload();
                    }else{
                        alert("批量暂停失败")
                    }
                }});
        }
        /*批量恢复*/
        function allResume() {
            var namebox = $("input[type^='checkbox']");  //获取name值为boxs的所有input
            var ids=[];
            for(i = 0; i < namebox.length; i++) {
                if(namebox[i].checked)
                {
                    ids.push(namebox[i].name);
                }
            }
            console.log(ids);
            ids=JSON.stringify(ids);
            console.log(ids);
            $.ajax({url:"/job/resume",
                type:"POST",
                data:ids ,
                contentType : 'application/json;charset=utf-8',
                success:function(data){
                    if(data == 200 ){
                        alert("批量恢复成功");
                        window.location.reload();
                    }else{
                        alert("批量恢复失败")
                    }
                }});
        }

        /*批量删除*/
        function allDelete() {
            var namebox = $("input[type^='checkbox']");  //获取name值为boxs的所有input
            var ids=[];
            for(i = 0; i < namebox.length; i++) {
                if(namebox[i].checked)
                {
                    ids.push(namebox[i].name);
                }
            }
            console.log(ids);
            ids=JSON.stringify(ids);
            console.log(ids);
            $.ajax({
                url:"/job/delete",
                type:"POST",
                data:ids ,
                contentType : 'application/json;charset=utf-8',
                success :  function(data){
                    if(data == 200 ){
                        alert("删除成功");
                        window.location.reload();
                    }else{
                        alert("删除失败")
                    }
                }});
        }

        /*批量立即执行*/
        function allRun() {
            var namebox = $("input[type^='checkbox']");  //获取name值为boxs的所有input
            var ids=[];
            for(i = 0; i < namebox.length; i++) {
                if(namebox[i].checked)
                {
                    ids.push(namebox[i].name);
                }
            }
            console.log(ids);
            ids=JSON.stringify(ids);
            console.log(ids);
            $.ajax({
                url:"/job/run",
                type:"POST",
                data:ids ,
                contentType : 'application/json;charset=utf-8',
                success :  function(data){
                    if(data == 200 ){
                        alert("批量立即执行成功");
                        window.location.reload();
                    }else{
                        alert("批量立即执行失败")
                    }
                }});
        }
    </script>