JQ处理删除弹出模态框

最新推荐文章于 2018-12-10 18:41:09 发布

前端小易

最新推荐文章于 2018-12-10 18:41:09 发布

阅读量2.4k

点赞数 1

分类专栏： sessionStorage Javascript与JQ

本文链接：https://blog.csdn.net/ycl396232695/article/details/78424710

版权

Javascript与JQ 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

sessionStorage

2 篇文章 0 订阅

订阅专栏

在实际开发中，经常要求对于加载的表格数据进行删除，点击删除的时候弹出模态框。再到模态框上点确定删除。实现这一套逻辑很多中方法，我经常用的一种：

第一，页面的数据表格是动态加载的

$("#table_result_per").append(
    "<tr>"+
    "<td class='hidden'>"+list[i].id+"</td>"+
    "<td>"+ parseInt(i+1)+"</td>"+
    "<td>"+list[i].name+"</td>"+
    "<td>"+list[i].cellphone+"</td>"+
    "<td>"+list[i].level+"</td>"+
    "<td>"+list[i].area_name+"</td>"+
    "<td>"+list[i].unit_type+"</td>"+
    "<td>"+list[i].user_type+"</td>"+
    "<td>"+list[i].position+"</td>"+
    "<td class='td_remove hidden_btn'>"+"<a class='address_remove hidden_btn'" +
    " οnclick='deletePro(this)'>"+"</a>"+
    "</td>"+ "</tr>"
);

第二，点击删除的时候，将该行的id传到session中保存起来，并给该行设置一下id值

function deletePro(e) {
    var id=$(e).parent().siblings().eq(0).text();
    var position=$(".zjl_headCenter p:nth-child(1)").children().eq(4).text().trim().replace(/[\r\n]/g, '');

    set_model_del();//调用模态框
    sessionStorage.removeItem('ud');
    sessionStorage.setItem('ud',id);
    $(e).parent().parent().attr('id',id);//给tr设置一个id

}

第三，点击模态框上的删除按钮的时候，就要关闭模态框并将id传到后台，还有就是将页面上的行删除，具体操作如下（因为是自己以前做的项目，所以有些没用的代码）

//删除按钮----将id传到后台并将该行删除--第二步
function model_delete_id() {
    //关闭删除模态框
    cancel_model_del();
    var ud=sessionStorage.getItem('ud');
    var data={id:ud};
    $.ajax({
        type:'post',
        url:'../../../../index.php/contacts/search/delete.html',
        data:data,
        success:function (result) {
            if(result.code==1){
                // 调用模态框
                $('#result_text').html('');
                setByResult();
                $('#result_text').html("删除成功");

                if($(`#table_result_city tr[id=${ud}]`)){
                    $(`#table_result_city tr[id=${ud}]`).remove();
                }
                if($(`#table_result_per tr[id=${ud}]`)){
                    $(`#table_result_per tr[id=${ud}]`).remove();
                }
                //点击删除---删除元素以后--将页码重新刷新，并将数据重新显示页面
                $('.max_page').text(result.info.last_page);
                $('.max_page1').text(result.info.last_page);
                $('.total_number1').text(result.info.total);
                $('.total_number').text(result.info.total);

            }else if(result.code==0){
                setByResult();
                $('#result_text').html('');
                $('#result_text').html(result.msg);
            }
        },