jquery客户端分页 分类： 网页编程【html、js】 2014-08-25 10:50 302人阅读 评论(0) 收藏

var array = [];

//显示按优惠金额层
$("#showAmountDiv").click(function () {
    showDiv("amountDiv");
});

//显示按优惠百分比层
$("#showPercentDiv").click(function () {
    showDiv("percentDiv");
});

//显示按优惠底价层
$("#showBasePriceDiv").click(function () {
    showDiv("basePriceDiv");
});

//显示各层
function showDiv(divName) {
    //验证活动名称是否为空
    if (checkInput.checkPromotionName()) {
        //验证活动周期是否合法
        if (checkInput.checkStartTime() && checkInput.checkEndTime()) {
            if ($("#txtStartTime").val() > $("#txtEndTime").val()) {
                $("#helpDateTime").html("开始日期只能小于等于结束日期"); return false;
            }
            init();
            if (divName == "amountDiv") {
                //弹出层时，清掉历史输入的信息
                $("#txtAmount").val("");
                $("#txtAreaAmountIDs").val("一次最多1000，空格间隔");
                
                //显示优惠金额层
                $('#amountDiv').modal('show');
            }
            else if (divName == "percentDiv") {
                //弹出层时，清掉历史输入的信息
                $("#txtPercent").val("");
                $("#txtAreaPercentIDs").val("一次最多1000，空格间隔");
                
                //显示优惠百分比层
                $('#percentDiv').modal('show');
            }
            else if (divName == "basePriceDiv") {
                //弹出层时，清掉历史输入的信息
                $("#txtAreaBasePriceIDs").val("一次最多1000，空格间隔");
                
                //显示优惠底价层
                $('#basePriceDiv').modal('show');
            }
        }
    }
}

// 检查输入
var checkInput = {
    checkNull: function (obj, val, msg) {
        if (!val || val.length == 0) {
            obj.parent().attr("class", "control-group error");
            if (msg.selector == "#helpPromotionName") {
                msg.html("活动名称不能为空");
            }
            else if (msg.selector == "#helpDateTime") {
                msg.html("日期不能为空");
            }
            return false;
        }
        else {
            obj.parent().attr("class", "control-group success");
            msg.html("");
            return true;
        }
    },

    checkPromotionName: function () {
        var tmpPromotionName = $("#txtPromotionName").val();
        var msg = $("#helpPromotionName");
        return this.checkNull($("#txtPromotionName"), tmpPromotionName, msg);
    },

    checkStartTime: function () {
        var tmpStartTime = $("#txtStartTime").val();
        var msg = $("#helpDateTime");
        return this.checkNull($("#txtStartTime"), tmpStartTime, msg);
    },

    checkEndTime: function () {
        var tmpEndTime = $("#txtEndTime").val();
        var msg = $("#helpDateTime");
        return this.checkNull($("#txtEndTime"), tmpEndTime, msg);
    }
};

$("#txtPromotionName").blur(function () {
    checkInput.checkPromotionName();
});


function init() {
    $("#successAmountIDs").html("");
    $("#failureAmountIDs").html("");

    $("#successPercentIDs").html("");
    $("#failurePercentIDs").html("");

    $("#successBasePriceIDs").html("");
    $("#failureBasePriceIDs").html("");
}

//添加（按优惠金额、按百分比、按底价）
function btnAdd(kind) {
    init();
    var money;
    var ids;
    var aptype;

    if (kind == "txtAmount") {
        aptype = 1;
        money = $("#txtAmount").val();
        if (!money || money.length == 0) {
            $("#helpAmount").html("请输入金额"); return false;
        }
        if (!(/^\+?[1-9][0-9]*$/.test(money))) {
            $("#helpAmount").html("金额必须为正整数"); return false;
        }

        ids = $.trim($("#txtAreaAmountIDs").val());
        if (!ids || ids.length == 0) {
            $("#failureAmountIDs").html("请输入产品id"); return false;
        }
    }
    else if (kind == "txtPercent") {
        aptype = 2;
        money = $("#txtPercent").val();
        if (!money || money.length == 0) {
            $("#helpPercent").html("请输入百分比数字"); return false;
        }
        if (!(/^\+?[1-9][0-9]*$/.test(money))) {
            $("#helpPercent").html("百分比必须为正整数"); return false;
        }
        if (money > 100) {
            $("#helpPercent").html("优惠百分比不能超过100%"); return false;
        }
        money = money + "%";

        ids = $.trim($("#txtAreaPercentIDs").val());
        if (!ids || ids.length == 0) {
            $("#failurePercentIDs").html("请输入产品id"); return false;
        }
    }
    else if (kind == "txtBasePrice") {
        aptype = 3;
        money = 0;
        ids = $.trim($("#txtAreaBasePriceIDs").val());
        if (!ids || ids.length == 0) {
            $("#failureBasePriceIDs").html("请输入产品id"); return false;
        }
    }

    //过滤空格获取产品id数组
    var idArray = ids.split(/\s+/); //格式，以逗号分隔：1,2,3
    var length = idArray.length;

    if (length > 1000) {
        alert("每次添加的产品id不能超过1000"); return false;
    }

    var len = array.length;
    //检测产品id
    for (var i = 0; i < length; i++) {
        //输入是否为整数
        if (!((/^(\+|-)?\d+$/.test(idArray[i])) || idArray[i] < 0)) {
            if (kind == "txtAmount") {
                $("#failureAmountIDs").html("产品id输入有误"); return false;
            } else if (kind == "txtPercent") {
                $("#failurePercentIDs").html("产品id输入有误"); return false;
            } else if (kind == "txtBasePrice") {
                $("#failureBasePriceIDs").html("产品id输入有误"); return false;
            }
        }

        //表格中是否已添加过
        for (j = 0; j < len; j++) {
            if(array[j].indexOf(idArray[i])>=0){
                if (kind == "txtAmount") {
                    $("#failureAmountIDs").html(idArray[i] + "已添加过"); return false;
                } else if (kind == "txtPercent") {
                    $("#failurePercentIDs").html(idArray[i] + "已添加过"); return false;
                } else if (kind == "txtBasePrice") {
                    $("#failureBasePriceIDs").html(idArray[i] + "已添加过"); return false;
                }
            }
        }
    }

    

    $.post('../Ajax/AjaxComm.aspx', {
        ajaxType: 'promotionEdit',
        type: 's',
        productIDs: idArray.toString(),
        promotionID: $("#promotionID").val()
    }, function (res) {
        var data = JSON.parse(res);
        if (data && data.result) {
            var list = data.message;
            var len = list.length;

            backInfo(len, data.noinfoids, kind);

            //动态添加到页面中
            for (i = 0; i < len; i++) {
                var builder = "";
                builder += "<tr>";
                builder += "<td style='text-align:center; padding:7px;'>" + list[i].ProductID + "</td>";
                builder += "<td>" + list[i].ProductName + "</td>";
                builder += "<td>" + list[i].ProductType + "</td>";
                builder += "<td>" + list[i].APBasePrice + "</td>";
                builder += "<td>" + list[i].SalePrice + "</td>";
                builder += "<td>" + money + "</td>";
                builder += "<td>" + $("#txtStartTime").val() + "</td>";
                builder += "<td>" + $("#txtEndTime").val() + "</td>";
                builder += "<td><a href='#' onclick='btnRemove(" + list[i].ProductID + ")'>删除</a></td>";
                builder += "<td><input type='hidden' value='" + aptype + "'/><input type='hidden' value='" + list[i].APSalePrice + "'/></td>";
                builder += "</tr>";

                array.push(builder);
            }
            goPage(1, 10);
        } else {
            if (kind == "txtAmount") {
                $("#failureAmountIDs").html(data.message); return false;
            } else if (kind == "txtPercent") {
                $("#failurePercentIDs").html(data.message); return false;
            } else if (kind == "txtBasePrice") {
                $("#failureBasePriceIDs").html(data.message); return false;
            }
        }
    });
}

//添加产品成功时，显示成功多少个，失败多少个(以及失败的id)
function backInfo(len, failInfoIds, kind) {
    var failLen = failInfoIds == "" ? 0 : failInfoIds.split(' ').length;
    failInfo = "失败：" + failLen + "个" + (failLen == 0 ? "" : "，分别为：" + failInfoIds);

    if (kind == "txtAmount") {
        $("#successAmountIDs").html("成功：" + len + "个");
        $("#failureAmountIDs").html(failInfo);
    } else if (kind == "txtPercent") {
        $("#successPercentIDs").html("成功：" + len + "个");
        $("#failurePercentIDs").html(failInfo);
    } else if (kind == "txtBasePrice") {
        $("#successBasePriceIDs").html("成功：" + len + "个");
        $("#failureBasePriceIDs").html(failInfo);
    }
}

//分页
function goPage(pno, psize) {
    var num = array.length; //表格行数

    var totalPage = 0; //总页数
    var pageSize = psize; //每页显示行数
    if (num / pageSize > parseInt(num / pageSize)) {
        totalPage = parseInt(num / pageSize) + 1;
    } else {
        totalPage = parseInt(num / pageSize);
    }
    var currentPage = pno; //当前页数
    var startRow = (currentPage - 1) * pageSize; //开始显示的行   
    var endRow = currentPage * pageSize; //结束显示的行   
    endRow = (endRow > num) ? num : endRow;

    //在每次翻页前，移除上次添加的，这样页面内容只会显示翻页后的
    $("#tabID tbody tr").eq(1).nextAll().remove();

    for (startRow; startRow < endRow; startRow++) {
        $("#tabID tbody").append(array[startRow]);
    }

    var tempStr = "共" + num + "条记录    分" + totalPage + "页    当前第" + currentPage + "页    ";
    if (currentPage > 1) {
        tempStr += "<a href=\"#\" onClick=\"goPage(" + (1) + "," + psize + ")\">首页</a>   ";
    } else {
        tempStr += "首页   ";
    }
    if (currentPage > 1) {
        tempStr += "<a href=\"#\" onClick=\"goPage(" + (currentPage - 1) + "," + psize + ")\">上一页</a>   "
    } else {
        tempStr += "上一页   ";
    }
    if (currentPage < totalPage) {
        tempStr += "<a href=\"#\" onClick=\"goPage(" + (currentPage + 1) + "," + psize + ")\">下一页</a>   ";
    } else {
        tempStr += "下一页   ";
    }
    if (currentPage < totalPage) {
        tempStr += "<a href=\"#\" onClick=\"goPage(" + (totalPage) + "," + psize + ")\">尾页</a>";
    } else {
        tempStr += "尾页";
    }

    //如果没有div，则创建
    var divElem = document.getElementById("barcon");
    if(divElem==null)
    {
        $("#tabID").parent().append("<br/><div style='text-align:right' id='barcon'></div>");
    }
    document.getElementById("barcon").innerHTML = tempStr;
}

//删除产品
function btnRemove(id) {
    if (confirm("确认删除此产品？")) {
        for (i = 0; i < array.length; i++) {
            var productID = $(array[i]).find("td").eq(0).text();
            if (id == productID) {
                array.splice(i, 1);
                break;
            }
        }

        goPage(1, 10);
    }
}


//保存或提交
function SaveOrSubmit(status) {
    //获取活动id
    var promotionID = $("#promotionID").val();

    //保存时检查活动名称以及活动周期
    if (checkInput.checkPromotionName()) {
        if (checkInput.checkStartTime() && checkInput.checkEndTime()) {
            if ($("#txtStartTime").val() > $("#txtEndTime").val()) {
                $("#helpDateTime").html("开始日期只能小于等于结束日期"); return false;
            }
            else {
                $("#btnSave").attr("disabled", "disabled");
                $("#btnSubmit").attr("disabled", "disabled");

                var promotion = GetPromotion(status); //活动对象
                var list = GetProductDetaiList(); //产品对象数组

                checkProductID(promotionID, promotion, list);  //保存或提交
            }
        }
    }
}

//保存或提交时调用的ajax方法
function checkProductID(promotionID, promotion, list) {
    $.ajax({
        url: '../Ajax/AjaxComm.aspx?ajaxType=promotionEdit&type=a',
        timeout: 10000,
        type: 'post',
        data: { promotionid: promotionID, model: JSON.stringify(promotion), detaillist: JSON.stringify(list) },
        success: function (res) {
            var data = JSON.parse(res);

            $("#btnSave").removeAttr("disabled");
            $("#btnSubmit").removeAttr("disabled");

            if (data && data.result) {
                $("#promotionID").val(data.newid); //将返回的活动id赋值给页面中的隐藏字段
            }
            alert(data.message);
        },
        complete: function (XMLHttpRequest, status) { 
            if (status == 'timeout') {//超时,status还有success,error等值的情况
                alert("超时");
            }
        }
    });
}

//获取活动对象
function GetPromotion(status) {
    var promotion = new Object();
    promotion.PromotionName = $("#txtPromotionName").val();
    promotion.PromotionType = 2;
    promotion.PromotionStartDate = $("#txtStartTime").val();
    promotion.PromotionEndDate = $("#txtEndTime").val();
    promotion.PromotionDesc = $("#txtAreaDesc").val();
    promotion.Status = status;

    return promotion;
}

//获取产品详细信息
function GetProductDetaiList() {
    var length = array.length;
    var list = [];
    for (i = 0; i < length; i++) {
        var tdList = $(array[i]).find("td");
        var detail = new Object();   //产品对象
        
        detail.ProductID = tdList.eq(0).text();
        var apBasePrice = tdList.eq(3).text();
        detail.Price = apBasePrice;
        detail.SalePrice = tdList.eq(4).text();
        
        var type = tdList.eq(9).find("input").eq(0).val(); //优惠金额、优惠百分比、底价
        var apSalePrice = tdList.eq(9).find("input").eq(1).val(); //卖价(优惠按百分比、优惠按底价时所需)
        var apPrice = tdList.eq(5).text();

        detail.APType = type;
        detail.APPrice = type == 2 ? apPrice.replace("%", "") : apPrice;
        detail.APSalePrice = type == 2 ? Math.floor(parseInt(apSalePrice) * parseFloat(detail.APPrice.length == 2 ? "0." + detail.APPrice : "1")) : (type == 3 ? parseInt(apSalePrice) - parseInt(apBasePrice) : apPrice);
        list.push(detail);
    }
    return list;
}



//按优惠金额产品ID输入框提示语
var txtAreaAmount = $("#txtAreaAmountIDs");
txtAreaAmount.focus(function () {
    if (txtAreaAmount.val() == "一次最多1000，空格间隔") {
        txtAreaAmount.val("");
    }
});
txtAreaAmount.blur(function () {
    if (txtAreaAmount.val() == "") {
        txtAreaAmount.val("一次最多1000，空格间隔");
    }
});

//按优惠百分比产品ID输入框提示语
var txtAreaPercent = $("#txtAreaPercentIDs");
txtAreaPercent.focus(function () {
    if (txtAreaPercent.val() == "一次最多1000，空格间隔") {
        txtAreaPercent.val("");
    }
});
txtAreaPercent.blur(function () {
    if (txtAreaPercent.val() == "") {
        txtAreaPercent.val("一次最多1000，空格间隔");
    }
});

//按底价输入框提示语
var txtAreaBasePrice = $("#txtAreaBasePriceIDs");
txtAreaBasePrice.focus(function () {
    if (txtAreaBasePrice.val() == "一次最多1000，空格间隔") {
        txtAreaBasePrice.val("");
    }
});
txtAreaBasePrice.blur(function () {
    if (txtAreaBasePrice.val() == "") {
        txtAreaBasePrice.val("一次最多1000，空格间隔");
    }
});

版权声明：本文为博主原创文章，未经博主允许不得转载。