Ajax打开弹出分页层并保存多选框选中数据【原创

来源:https://www.sucaihuo.com/js/567.html 2015-11-18 05:48浏览(6329) 收藏

这是后台经常用到的ajax分页效果,首先打开订单列表弹出层,然后选择多选款,点击分页也可保留刚才选中的数据,最后点击保存按钮,以Ajax形式提交到数据库中去。提示:弹出层用的bootstrap的nodal方法,已经封装在jquery.js中。
Ajax打开弹出分页层并保存多选框选中数据
分类:悬浮层/弹出层 > 弹窗 难易:中级
下载资源 下载积分: 220 积分

绑定单选按钮、全选按钮和切换分页数据

$("#windown_box").delegate(".checkbox_one", "click", function() { //绑定单选按钮
    isCheckAll();
    getOrderIdsChose();
}).delegate(".checkbox_all", "click", function() { //绑定全选按钮
    var checked = $(this).attr("checked");
    if (checked == "checked") {
        $(".checkbox_one").attr("checked", "checked");
    } else {
        $(".checkbox_one").removeAttr("checked");
    }
    getOrderIdsChose();
}).delegate(".page a", "click", function() { //绑定分页切换对应的数据
    var page = parseInt($(this).attr("data-page"));
    getPage(page);
})

Ajax传参分页

function getPage(page) {
    $("#orders").html("<div class='loading'><img src='images/loading.gif' alt='loading'></div>")
    var page = page > 0 ? page : 1;
    $.post("ajax.php", {p: page}, function(data) {
        $("#orders").html(data);
        var order_ids = $("#order_ids").val();
        if (order_ids) {
            var order_ids_arr = order_ids.split(",");
            for (var i = 0; i < order_ids_arr.length; i++) {
                $("input.checkbox_one[value=" + order_ids_arr[i] + "]").attr("checked", "checked")
            }
        }
        isCheckAll();
    })
}
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:https://www.sucaihuo.com/js/567.html
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2