列表页 删除操作(单选/多选)

列表页 删除操作(单选/多选)

• js css选择器 jQuery each() js中json数组对象转字符串

html

<div class="app_list_cont user_news_list app_history_lists clear">
                <table>
                    <tr>
                        <th class="select_del">
                            <em class="app_checkbox_btn">
                                <span><i class="">√</i></span>
                            </em>
                        </th>
                        <th>标题</th>
                        <th>内容</th>
                        <th>时间</th>
                    </tr>
                    <c:forEach items="${page.list }" var="comment">
                    <tr class="single_list">
                        <td class="single_del">
                            <em class="app_checkbox_btn">
                                <span><i class="" data-parentId="${comment.id}"  data-commentId="${comment.commentId}">√</i></span>
                            </em>
                        </td>
                        <td>${comment.title }</td>
                        <td>${comment.cont }</td>
                        <td>${comment.commentDate }</td>
                    </tr>
                    </c:forEach>

                </table>

js

    <link rel="stylesheet" type="text/css" href="css/app-backstage.css">
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <script type="text/javascript" src="js/jquery-3.2.0.min.js"></script>
<script src="js/base.js"></script>


<script type="text/javascript">
$(function(){

    //删除全选
    $(".select_del").on("click",function(){
        if($(this).find(".app_checkbox_btn span i").hasClass("app_checkbox_btn_i")){
            $(".app_checkbox_btn span i").removeClass("app_checkbox_btn_i");
        }else{
            $(".app_checkbox_btn span i").addClass("app_checkbox_btn_i");
        }
    });
    //删除单选
    $(".single_del").on("click",function(){
        $(this).find(".app_checkbox_btn i").toggleClass("app_checkbox_btn_i");
    })
    //删除操作
    $(".circular_btn_red").off().on("click",function(){
        if($(".single_list .app_checkbox_btn_i").length < 1){
            errorBombBox("请选择需要删除的精选回复");
            return false; //防止自动刷新页面
        }else{
            publicBox("删除精选回复", "确定删除选中的内容?", "");
            $("#determine").off().on("click",function(){
                $(".app_mask,.delete_box").fadeOut();
                var data={};//声明data对象
                var dataJson=[]; //声明数组      []表示数组,元素任意;    {}表示对象
                $(".single_list .app_checkbox_btn_i").each(function(){
                    var subJson = {parentId : $(this).attr("data-parentId") , commentId : $(this).attr("data-commentId")};
                    dataJson.push(subJson);
                })
                //将数组对象转换为字符串
                var jsonStr = JSON.stringify(dataJson);
                data["ids"] = jsonStr;
                data["reason"] = "删除原因";

              //var jsonStr = [{'parentId:'11' , 'commentId':20} , {'parentId':'22' , 'commentId':26},{'parentId':'33' , 'commentId':30}]
                //dataType : 'json',
                //data : {'ids':jsonStr},


                ajaxRequest( "/backstage/del.do",
                        data, 
                        function(msg){
                           if(msg.extension == "1"){
                               window.location.reload();
                           }else{
                               errorBombBox(msg.message);//调报错弹框
                           }
                        }, 1);

            })
            return false;
        }

    });

  });
</script>

ajax工具

/**
 * Ajax请求
 * @param url 请求URL
 * @param data 数据
 * @param callback 回调方法
 */
function ajaxRequest(url, data, callback,isJson){
    /*"&dround="+ Math.round(Math.random()*100)*/
    if(isNotNull(data)){
        if(isJson == 1){
            data["dround"]= Math.round(Math.random()*100);
        }else{
            data += "&dround="+ Math.round(Math.random()*100);
        }

    }
    $.ajax({
           type: "POST",
           url: url,
           data: data,
           async:false,
           dataType:"json",
           contentType: "application/x-www-form-urlencoded;charset=UTF-8",
           success: function(msg){
               console.log(msg);
               if(callback == undefined){
                   pop_reload(msg.message)
               }else{
                   callback(msg);
               }
           },
           statusCode:{401:function(){
               window.location.href=vbmappDomain;//重新加载首页，需要登录就会直接跳到登录页
             }
           }
     });
}

/**
 * Ajax请求(跨域)
 * @param url 请求URL
 * @param data 数据
 * @param callback 回调方法
 */
function ajaxRequestJsonp(url, data, callback){
    /*"&dround="+ Math.round(Math.random()*100)*/
    if(isNotNull(data)){
        data += "&dround="+ Math.round(Math.random()*100)
    }
    $.ajax({
           type: "POST",
           url: url,
           data: data,
           async:false,
           dataType:"jsonp",
           jsonp: "callbackIngCare",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
           contentType: "application/x-www-form-urlencoded;charset=UTF-8",
           success: function(msg){
               if(callback == undefined){
                   pop_reload(msg.message)
               }else{
                   callback(msg);
               }
           },
           statusCode:{401:function(){
               window.location.href=vbmappDomain;//重新加载首页，需要登录就会直接跳到登录页
             }
           }
     });
}

---