文档章节

Jquery EasyUI封装简化操作

深圳大道
 深圳大道
发布于 2016/12/29 15:39
字数 2211
阅读 8
收藏 0
//confirm 
function Confirm(msg, control) {
    $.messager.confirm('确认', msg, function (r) {
        if (r) {
            eval(control.toString().slice(11));
        }
    });
    return false;
}

//load
function Load() {
    $("<div class=\"datagrid-mask\"></div>").css({ display: "block", width: "100%", height: $(window).height() }).appendTo("body");
    $("<div class=\"datagrid-mask-msg\"></div>").html("正在运行,请稍候。。。").appendTo("body").css({ display: "block", left: ($(document.body).outerWidth(true) - 190) / 2, top: ($(window).height() - 45) / 2 });
}

//display Load
function dispalyLoad() {
    $(".datagrid-mask").remove();
    $(".datagrid-mask-msg").remove();
}

//弹出提醒框alert
function showMsg(title, msg, isAlert) {
    if (isAlert !== undefined && isAlert) {
        $.messager.alert(title, msg);
    } else {
        $.messager.show({
            title: title,
            msg: msg,
            showType: 'show'
        });
    }
}

//删除确认confirm
function deleteConfirm() {
    return showConfirm('温馨提示', '确定要删除吗?');
}

//弹出确认框confirm
function showConfirm(title, msg, callback) {
    $.messager.confirm(title, msg, function (r) {
        if (r) {
            if (jQuery.isFunction(callback))
                callback.call();
        }
    });
}

//进度条
function showProcess(isShow, title, msg) {
    if (!isShow) {
        $.messager.progress('close');
        return;
    }
    var win = $.messager.progress({
        title: title,
        msg: msg
    });
}

//弹出框体window
function showMyWindow(title, href, width, height, modal, minimizable, maximizable) {

    $('#myWindow').window({

        title: title,

        width: width === undefined ? 600 : width,

        height: height === undefined ? 400 : height,

        content: '<iframe scrolling="yes" frameborder="0"  src="' + href + '" style="width:100%;height:98%;"></iframe>',

        //        href: href === undefined ? null : href,

        modal: modal === undefined ? true : modal,

        minimizable: minimizable === undefined ? false : minimizable,

        maximizable: maximizable === undefined ? false : maximizable,

        shadow: false,

        cache: false,

        closed: false,

        collapsible: false,

        resizable: false,

        loadingMessage: '正在加载数据,请稍等片刻......'

    });

}

//关闭弹出框体 window
function closeMyWindow() {

    $('#myWindow').window('close');

}

/**
*清空指定表单中的内容,参数为目标form的id
*注:在使用Jquery EasyUI的弹出窗口录入新增内容时,每次打开必须清空上次输入的历史
*数据,此时通常采用的方法是对每个输入组件进行置空操作:$("#name").val(""),这样做,
*当输入组件比较多时会很繁琐,产生的js代码很长,这时可以将所有的输入组件放入个form表单
*中,然后调用以下方法即可。
*
*@param formId将要清空内容的form表单的id
*/
function resetContent(formId) {
    var clearForm = document.getElementById(formId);
    if (null != clearForm && typeof (clearForm) != "undefined") {
        clearForm.reset();
    }
}

/**
*刷新DataGrid列表(适用于Jquery Easy Ui中的dataGrid)
*注:建议采用此方法来刷新DataGrid列表数据(也即重新加载数据),不建议直接使用语句
*$('#dataTableId').datagrid('reload');来刷新列表数据,因为采用后者,如果日后
*在修改项目时,要在系统中的所有刷新处进行其他一些操作,那么你将要修改系统中所有涉及刷新
*的代码,这个工作量非常大,而且容易遗漏;但是如果使用本方法来刷新列表,那么对于这种修
*该需求将很容易做到,而去不会出错,不遗漏。
*
*@paramdataTableId将要刷新数据的DataGrid依赖的table列表id
*/
function flashTable(dataTableId) {
    $('#' + dataTableId).datagrid('reload');
}
/**
*取消DataGrid中的行选择(适用于Jquery Easy Ui中的dataGrid)
*注意:解决了无法取消"全选checkbox"的选择,不过,前提是必须将列表展示
*数据的DataGrid所依赖的Table放入html文档的最全面,至少该table前没有
*其他checkbox组件。
*
*@paramdataTableId将要取消所选数据记录的目标table列表id
*/
function clearSelect(dataTableId) {
    $('#' + dataTableId).datagrid('clearSelections');
    //取消选择DataGrid中的全选
    $("input[type='checkbox']").eq(0).attr("checked", false);
}

/**
*关闭Jquery EasyUi的弹出窗口(适用于Jquery Easy Ui)
*
*@paramdialogId将要关闭窗口的id
*/
function closeDialog(dialogId) {
    $('#' + dialogId).dialog('close');
}

/**
*自适应表格的宽度处理(适用于Jquery Easy Ui中的dataGrid的列宽),
*注:可以实现列表的各列宽度跟着浏览宽度的变化而变化,即采用该方法来设置DataGrid
*的列宽可以在不同分辨率的浏览器下自动伸缩从而满足不同分辨率浏览器的要求
*使用方法:(如:{field:'ymName',title:'编号',width:fillsize(0.08),align:'center'},)
*
*@parampercent当前列的列宽所占整个窗口宽度的百分比(以小数形式出现,如0.3代表30%)
*
*@return通过当前窗口和对应的百分比计算出来的具体宽度
*/
function fillsize(percent) {
    var bodyWidth = document.body.clientWidth;
    return (bodyWidth - 90) * percent;
}

/**
* 获取所选记录行(单选)
*
* @paramdataTableId目标记录所在的DataGrid列表的table的id
* @paramerrorMessage 如果没有选择一行(即没有选择或选择了多行)的提示信息
*
* @return 所选记录行对象,如果返回值为null,或者"null"(有时浏览器将null转换成了字符串"null")说明没有
*选择一行记录。
*/
function getSingleSelectRow(dataTableId, errorMessage) {
    var rows = $('#' + dataTableId).datagrid('getSelections');
    var num = rows.length;
    if (num == 1) {
        return rows[0];
    } else {
        $.messager.alert('提示消息', errorMessage, 'info');
        return null;
    }
}

/**
* 在DataGrid中获取所选记录的id,多个id用逗号分隔
* 注:该方法使用的前提是:DataGrid的idField属性对应到列表Json数据中的字段名必须为id
* @paramdataTableId目标记录所在的DataGrid列表table的id
*
* @return 所选记录的id字符串(多个id用逗号隔开)
*/
function getSelectIds(dataTableId, noOneSelectMessage) {
    var rows = $('#' + dataTableId).datagrid('getSelections');
    var num = rows.length;
    var ids = null;
    if (num < 1) {
        if (null != noOneSelectMessage) $.messager.alert('提示消息', noOneSelectMessage, 'info');
        return null;
    } else {
        for (var i = 0; i < num; i++) {
            if (null == ids || i == 0) {
                ids = rows[i].id;
            } else {
                ids = ids + "," + rows[i].id;
            }
        }
        return ids;
    }
}

/**
*删除所选记录(适用于Jquery Easy Ui中的dataGrid)(删除的依据字段是id)
*注:该方法会自动将所选记录的id(DataGrid的idField属性对应到列表Json数据中的字段名必须为id)
*动态组装成字符串,多个id使用逗号隔开(如:1,2,3,8,10),然后存放入变量ids中传入后台,后台
*可以使用该参数名从request对象中获取所有id值字符串,此时在组装sql或者hql语句时可以采用in
*关键字来处理,简介方便。
*另外,后台代码必须在操作完之后以ajax的形式返回Json格式的提示信息,提示的json格式信息中必须有一个
*message字段,存放本次删除操作成功与失败等一些提示操作用户的信息。
*
*@paramdataTableId将要删除记录所在的列表table的id
*@paramrequestURL与后台服务器进行交互,进行具体删除操作的请求路径
*@paramconfirmMessage 删除确认信息
*/

function deleteNoteById(dataTableId, requestURL, confirmMessage) {
    if (null == confirmMessage || typeof (confirmMessage) == "undefined" || "" == confirmMessage) {
        confirmMessage = "确定删除所选记录?";
    }
    var rows = $('#' + dataTableId).datagrid('getSelections');
    var num = rows.length;
    var ids = null;
    if (num < 1) {
        $.messager.alert('提示消息', '请选择你要删除的记录!', 'info');
    } else {
        $.messager.confirm('确认', confirmMessage, function (r) {
            if (r) {
                for (var i = 0; i < num; i++) {
                    if (null == ids || i == 0) {
                        ids = rows[i].id;
                    } else {
                        ids = ids + "," + rows[i].id;
                    }
                }
                $.getJSON(requestURL, { "ids": ids }, function (data) {
                    if (null != data && null != data.message && "" != data.message) {
                        $.messager.alert('提示消息', data.message, 'info');
                        flashTable(dataTableId);
                    } else {
                        $.messager.alert('提示消息', '删除失败!', 'warning');
                    }
                    clearSelect(dataTableId);
                });
            }
        });
    }
}

$(function(){  
    /*************************可直接调用的校验方法***************************/  
    /*
    notNull('age','年龄不能为空');  
    reapet('password','repassword','两次输入不相同');  
    number('age','只能为数字');  
    cellPhone('phone','手机号格式不正确');  
    phone('phone','电话号码格式不正确');  
    email('email','邮箱格式不正确');  
    unique('username','unique.html','name');  
    form('form','user_regist.html');  
    */
    //不为空函数  
    notNull = function(id, msg){  
        $('#'+id).validatebox({  
            required: true,  
            missingMessage: msg  
        });  
    }  
    //重复函数  
    reapet = function(id, re_id, msg){  
        id = '#'+id;  
        $('#'+re_id).validatebox({  
            validType: "reapet['"+id+"','"+msg+"']"  
        });  
    };  
    //数字  
    number = function(id, msg){  
        $('#'+id).validatebox({  
            validType: 'number["'+msg+'"]'  
        });  
    };  
    //手机号码  
    cellPhone = function(id, msg){  
        $('#'+id).validatebox({  
            validType: 'cellPhone["'+msg+'"]'  
        });  
    };  
    //电话号码  
    phone = function(id, msg){  
        $('#'+id).validatebox({  
            validType: 'phone["'+msg+'"]'  
        });  
    };  
    //邮箱  
    email = function(id,msg){  
        $('#'+id).validatebox({  
            validType: 'email',  
            invalidMessage: msg  
        });  
    };  
    //url  
    url = function(id, msg){  
        $('#'+id).validatebox({  
            validType: 'url',  
            invalidMessage: msg  
        });  
    };  
    //ip  
    ip = function(id, msg){  
        $('#'+id).validatebox({  
            validType: 'ip["'+msg+'"]'  
        });  
    };  
    /** 
     * 提交后台进行唯一性校验 
     * @param id:校验元素的id,url: 提交的地址,paramName: 传入值的参数名称 
     */  
    unique = function(id, url, paramName){  
        $('#'+id).validatebox({  
            validType: 'unique["'+url+'","'+id+'","'+paramName+'"]'  
        });  
    };  
    //提交,数据无效时阻止提交  
    form = function(id, url){  
         $("#"+id).form({  
            url: url,  
            onSubmit: function(){  
                return $(this).form('validate');  
            },  
            success: function(data){  
                alert(data);  
            }  
       });  
    };  
    /*************************不为空校验 required="true"********************************/  
    //在HMTL标签中加入required="true"可进行不能为空校验  
    $("*").each(function(){  
        if($(this).attr('required')){  
            $(this).validatebox({  
                required: true,  
                missingMessage: '不能为空'  
            });  
        }  
    });  
    //当使用struts标签时,加入属性required="true"能过下面代码实现不能为空校验  
    //注意:struts标签需用label   
    $('span').each(function(){  
        //遍历所有span标签,检验是否设有class="required"  
        if($(this).attr('class')=='required'){  
            $("#"+$(this).parent().attr('for')).validatebox({  
                required: true,  
                missingMessage: '不能为空'  
            });  
        }  
    });  
      
    /*************************自定义方法********************************/  
    /** 
     *自定义的校验方法(校验两次密码是否相同) 
     * @param param为传入第一次输入的密码框的id 
     * @call repeat['#id'] 
     */  
    $.extend($.fn.validatebox.defaults.rules,{  
        reapet: {  
            validator: function(value, param){  
                var pwd = $(param[0]).attr('value');   
                if(pwd != value){  
                    return false;  
                }  
                return true;  
            },  
            message: '{1}'  
        }  
    });  
          
    //利用正则进行数字校验  
    $.extend($.fn.validatebox.defaults.rules, {  
        number: {  
        validator: function(value, param){  
           return /^-?(?:/d+|/d{1,3}(?:,/d{3})+)(?:/./d+)?$/.test(value);  
       },  
        message: '{0}'  
    }  
    });  
    //手机号  
    $.extend($.fn.validatebox.defaults.rules,{  
        cellPhone: {  
        validator: function(value, param){  
                return /^0{0,1}(13[4-9]|15[7-9]|15[0-2]|18[7-8])[0-9]{8}$/.test(value);  
            },  
        message: '{0}'  
        }  
    });  
    /** 
     * 电话号码 
     * 匹配格式:11位手机号码 
     * 3-4位区号,7-8位直播号码,1-4位分机号 
     * 如:12345678901、1234-12345678-1234 
     */  
    $.extend($.fn.validatebox.defaults.rules,{  
        phone: {  
        validator: function(value, param){  
                return /(/d{11})|^((/d{7,8})|(/d{4}|/d{3})-(/d{7,8})|(/d{4}|/d{3})-(/d{7,8})-(/d{4}|/d{3}|/d{2}|/d{1})|(/d{7,8})-(/d{4}|/d{3}|/d{2}|/d{1}))$/.test(value);  
            },  
        message: '{0}'  
        }  
    });  
    //ip校验  
    $.extend($.fn.validatebox.defaults.rules,{  
        ip: {  
        validator: function(value, param){  
                return /^((2[0-4]/d|25[0-5]|[01]?/d/d?)/.){3}(2[0-4]/d|25[0-5]|[01]?/d/d?)$/.test(value);  
            },  
        message: '{0}'  
        }  
    });  
    //唯一性校验  
    $.extend($.fn.validatebox.defaults.rules,{  
        unique: {  
            validator: function(value, param){  
                value = $('#'+param[1]).attr('value');  
                $('#'+param[1]).load(param[0]+"?"+param[2]+"="+value,  
                function(responseText, textStatus, XMLHttpRequest){  
                    if(responseText) //后台返回true或者false  
                        return true;      
                });  
                return false;  
            },  
            message: '用户名已存在'  
        }  
    });  
});

本文转载自:http://blog.csdn.net/smartsmile2012/article/details/40657667

深圳大道
粉丝 3
博文 877
码字总数 0
作品 0
深圳
架构师
私信 提问
jQuery EasyUI快速入门实战教程(一)-入门

1、jQuery EasyUI概述 jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,...

神码小风
2018/06/28
0
0
jQuery EasyUI入门视频教程【20讲】

jQuery EasyUI入门视频教程【20讲】 jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。非职业讲师孙宇讲授,全...

Amamatthew
2014/09/28
1K
0
JQuery EasyUi之界面设计——前言与界面效果(一)

如果冯巩的开场白是“观众朋友们,我想死你们了”,那么我的开场白是“最近一直很忙,很久没有发文了”。 前面说过了EXT.NET,这里顺便再说说JQuery EasyUI。为啥我会选择JQuery EasyUI呢?主...

易水寒丶开源
2015/10/27
212
0
EasyUI 1.5.x Of Insdep Theme 1.0.0 RC1 美化主题大包已发布

关于 Insdep theme是基于EasyUI 1.5.x 的一款免费的美化主题包,拥有百度编辑器、cropper、Highcharts、justgage、plupload等各类适应本主题的第三方插件美化补丁。并且各类常用Jquery插件正...

magicweng
2017/02/22
6.3K
24
jQuery EasyUI DataGrid Checkbox 数据设定与取值

有关 jQuery EasyUI DataGrid 的相关资料,可以前往官网查看, jQuery EasyUI 官网 jQuery EasyUI Documentation DataGrid Demo CheckBox select on DataGrid...

Amamatthew
2014/10/10
239
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Cloud Sleuth 整合 feign 源码分析

org.springframework.cloud.sleuth.instrument.web.client.feign.TraceFeignClient 包括创建span一些参数

xiaomin0322
14分钟前
2
0
Less 延伸

extend 是一个 Less 伪类,它通过使用 :extend 选择器在一个选择器中扩展其他选择器样式。 扩展语法 扩展可以是附加到选择器,也可以是集中放置在规则,看上去像是带有选择器参数的可选伪类,...

凌兮洛
14分钟前
2
0
RedHat 7.0系统中安装mysql 5.7.22

在安装之前,首先要查看的是,你的系统中有没有已经安装过的情况。键入rpm -qa|grep mysql,如果无任何显示,则表示没有安装过相关组件,如果有,则根据显示出来的名字,键入rpm -e --nodeps...

最菜最菜之小菜鸟
20分钟前
2
0
RPA:企业信息孤岛的“克星”

为了降本增效,近来世界范围内掀起一股流程优化的热潮,转型升级成为众多企业时刻挂在嘴边的热词。不过在企业数字化转型的过程中,信息孤岛的出现,往往成为了企业升级的绊脚石。 信息孤岛:...

UiBot
20分钟前
2
0
我的测试

我的测试

daiison
20分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部