全选和复选 批量操作 弹框

全选和复选  批量操作 弹框

 

优美弹框提示，比alert好看多了

<link href="static/sweetalert/sweetalert.css" rel="stylesheet" />
    <script src='static/sweetalert/sweetalert.min.js'></script>

$(function(){
        var msg = "${pd.msg}";
        sweetAlert("当前操作："+msg);
    });

http://layer.layui.com/

http://www.layui.com/doc/modules/layer.html#btnAlign

 

需要引入layer弹框插件

<script type="text/javascript" src="static/js/layer.js"></script>
<link rel="stylesheet" href="static/css/layui.css" media="all">
<script src='static/js/jquery-1.9.1.min.js'></script>
//全选框
<thead>
                <tr>
                    <th width="2%" align="center"><input id="quanxuan" type="checkbox" name="checkAll"
                                                         style="position:relative;opacity:100;"></th>
                    <th width="7%">编号</th>
                    <th width="7%">人姓名</th>
                </tr>
</thead>
//单选框
<c:when test="${not empty pageList}">
                        <c:forEach items="${pageList}" var="var" varStatus="vs">
                            <tr>
                                <td align="center"><input id="${var.id}"
                                                          value="${var.id}" name="subBox" type="checkbox"
                                                          style="position:relative;opacity:100;">
                                </td>
                                <td><a href="javascript:void(-1);" style="color: blue"
                                       onclick="toDetail('${var.call_loan_nid}','${var.user_id}','${var.repayment_id}')">${var.call_loan_nid}</a>
                                </td>
                                <td>${var.cont_id_card}</td><!-- 借款人身份证号-->
                                <td>${var.telephone}</td><!-- 手机号-->
                                <td>//鼠标悬停展示全部备注
                                        <a title='${var.remark}' style="cursor: pointer;">
                                                <c:if test="${fn:length(var.remark) >= 8 }">
                                                ${fn:substring(var.remark,0,8)}...
                                            </c:if>
                                            <c:if test="${fn:length(var.remark) < 8 }">
                                                ${var.remark}
                                            </c:if>
                                        </a>
                                </td>
                            </tr>
                        </c:forEach>
                    </c:when>
// 全选/复选   可以实现全选和反选，
$(function(){
    $("#quanxuan").click(function(){
        $('input[name="subBox"]').prop("checked", this.checked);
    });
     var $subBox = $("input[name='subBox']");
     $subBox
         .click(function () {
             $("#checkAll")
                 .prop(
                     "checked",
                     $subBox.length == $("input[name='subBox']:checked").length ? true
                         : false);
         });
});

//批量操作。并且将数组数据传到后台
function layerOpen(){
//实现将数组数据遍历传递到后台
     var arrChk = $("input[name='subBox']:checked");
     var fenpais = new Array();
     (arrChk).each(function () { //each() 遍历函数
         fenpais.push(this.id)
     });
     console.log(fenpais);
    layer.confirm(
            '请选择以下审核结果：',
            {
                title:"审核",
                btn: ['审核通过', '审核拒绝', '取消'], //可以无限个按钮
                btnAlign: 'c'
                  ,btn3: function(index, layero){
                    layer.closeAll();
                  }
            },
            function(index, layero){
              window.location="blackName/checkStatusList.do?status="+'1'+"&ids="+fenpais;
              
            },
            function(index){
               window.location="blackName/checkStatusList.do?status="+'2'+"&ids="+fenpais;
            });
}

//后台controller层接受页面批量遍历的数组数据
@RequestMapping(value="/checkStatusList")
    public void checkStatusList(Page page, HttpServletRequest request,@RequestParam("ids")String[] ids){
        Map<String,Object> map=new HashMap<String,Object>();
        map.put("ids", ids);
        blackListServiceImpl.updateStatusList(map);
    }
    
    
 //分派
        $("#fenpai").click(function () {
            var arrChk = $("input[name='subBox']:checked");
            var fenpais = new Array();
            (arrChk).each(function () { //each() 遍历函数
                fenpais.push(this.id)
            });
            if (arrChk.length != 0) {
                openDialog({
                    title: "批量操作",
                    url: "taskdetails/plliangfenpailist?fpId=" + fenpais,
                    callBack: function () {
                        window.location.reload();
                    }
                });
            } else if (fenpais.length == 0) {
                layer.msg('勾选任务', {
                    icon: 5,
                    time: 2000
                })
            }
        })；
 /* 打开窗口 */弹框
    function openDialog(options) {
        var defaultOptions = {
            title: "",
            url: "",
            callBack: function () {
            }
        };
        options = $.extend(defaultOptions, options);
        layer.open({
            title: options.title,
            fixed: false,
            type: 2,
            content: options.url,
            area: ['800px', '600px'],
            end: options.callBack
        });
    }