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，空格間隔");
    }
});

版權聲明：本文爲博主原創文章，未經博主容許不得轉載。