Ajax模式Edit页面支持JS,操作页面表单AjaxEdit.js

/**
 * Ajax模式Edit页面支持JS
 */

var submitInProgress = false;
function AjaxEdit(selector) {
    this.selector = selector;
    this.rules = {};
    this.targetUrl = null;
    this.beforeCheck = null;
    this.beforeSubmit = null;
    this.afterSuccess = null;
    this.afterFailure = null;
}
AjaxEdit.prototype.setTargetUrl = function(url) {
    this.targetUrl=url;
};
AjaxEdit.prototype.getTargetUrl = function() {
    return this.targetUrl;
};
AjaxEdit.prototype.bindForm = function() {
    var innerForm = $(this.selector);
    var innerFormValidRules = this.rules;
    var innerFormBeforeCheck = this.beforeCheck;
    var innerFormBeforeSubmit = this.beforeSubmit;
    var innerFormAfterSuccess = this.afterSuccess;
    var innerFormAfterFailure = this.afterFailure;
    //下面两个临时变量的值,用于callback中使用。
    var innerXMLHttpRequest="";
    var innerTextStatus="";
    var ajaxEdit=this;
    
    
    
    var validDataOpt={
        label:".form_label",
        showAllError:true,//所以校验一起执行
        ajaxPost:false,
        ignoreHidden:false,
        tiptype:function(msg,o,cssctl){
            //msg:提示信息;
            //o:{obj:*,type:*,curform:*}, obj指向的是当前验证的表单元素(或表单对象),type指示提示的状态,值为1、2、3、4, 1:正在检测/提交数据,2:通过验证,3:验证失败,4:提示ignore状态, curform为当前form对象;
            //cssctl:内置的提示信息样式控制函数,该函数需传入两个参数:显示提示信息的对象 和 当前提示的状态(既形参o中的type);
            if(!o.obj.is("form")){//验证表单元素时o.obj为该表单元素,全部验证通过提交表单时o.obj为该表单对象;
                if(o.type==3){
                    o.obj. attr("title", msg);
                    $(o.obj).qtip({ // Grab some elements to apply the tooltip to
                        hide : false,
                        overwrite : false,
                        content: {
                            text: msg
                        },
                        position: {
                            my: 'top left',  // Position my top left...
                            at: 'bottom left', // at the bottom right of...
                            target:$(o.obj) // my target
                        },
                        show : {
                            event : false,
                            ready : true,
                            tips : false,
                        }
                    });
                }else{
                    $(o.obj).qtip('destroy');
                }
            }else{//全部验证通过
                layer.msg('ALL OK');
            }
        },
        beforeCheck:function(curform){
            //在表单提交执行验证之前执行的函数,curform参数是当前表单对象。
            //这里明确return false的话将不会继续执行验证操作;
            if(innerFormBeforeCheck!=null){
                innerFormBeforeCheck();
            }
        },
        beforeSubmit:function(curform){
            //在验证成功后,表单提交前执行的函数,curform参数是当前表单对象。
            //这里明确return false的话表单将不会提交;
            if(innerFormBeforeSubmit!=null){
                return innerFormBeforeSubmit();
            }
        },
        callback:function(curform){//
            if (submitInProgress) {
                return false;
            }

            submitInProgress = true;
            
            $.ajax({
                // 提交数据的类型 POST GET
                type : "POST",
                // 提交的网址
                url : ajaxEdit.getTargetUrl(),
                // 提交的数据
                data : innerForm.serialize(),
                // 返回数据的格式
                datatype : "json",
                // "xml", "html", "script", "json", "jsonp", "text".
                // 在请求之前调用的函数
                beforeSend : function() {
                    layer.load();
                },
                // 成功返回之后调用的函数
                success : function(data) {
                    var result = eval(data);
                    var messageText = "";
                    var success = true;
                    layer.closeAll('loading');
                    if (result.status == "200") {
                        messageText = '操作成功';
                        layer.msg(messageText);
                        if(innerFormAfterSuccess!=null){
                            innerFormAfterSuccess(result);
                        }
                    } else {
                        success= false;
                        messageText = '操作失败:' + result.statusText;
                        layer.alert(messageText);
                        if(innerFormAfterFailure!=null){
                            innerFormAfterFailure(innerXMLHttpRequest, innerTextStatus);
                        }
                    }
                    
                    innerXMLHttpRequest = null;
                    innerTextStatus = null;
                    
                },
                // 调用执行后调用的函数
                complete : function(XMLHttpRequest, textStatus) {
                    //alert(XMLHttpRequest.responseText);
                    //alert(textStatus);
                    submitInProgress = false;
                    //调用成功后设置这两个临时变量的值,用于callback中使用。
                    innerXMLHttpRequest=XMLHttpRequest;
                    innerTextStatus = textStatus;
                },
                // 调用出错执行的函数
                error : function(XMLHttpRequest, textStatus, errorThrown) {
                    layer.alert(XMLHttpRequest.responseText);
                    //layer.msg("Ajax提交错误");
                    layer.closeAll('loading');
                },
                clearForm : true,
            });
            return false;
        }
    };
    var fromValid=$(this.selector).Validform(validDataOpt);
    if(innerFormValidRules!=null)    fromValid.addRule(innerFormValidRules);
    
};

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值