Jquery EasyUI封装简化操作

//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: ‘用户名已存在‘
        }
    });
});  
时间: 2025-01-18 02:32:49

Jquery EasyUI封装简化操作的相关文章

jquery easyui 封装

使用easyui datagrid部分,主要是节省了写一堆html代码. 通过封装,可以节省每个页面都写一堆easyui的代码,相对要简单一些,个人觉得,毕竟是自己做的,难免自我感觉好些,哈哈. 封装好了之后,只需要在html中引用各种需要库,并在body中写<table id="myid"><table> 然后js中调用baseGrid('myid',"focus_ft","<{:U('Focus/focuslist')}&

springmvc + jquery easyui实现分页显示

如有不明白的地方,戏迎加入QQ群交流:66728073 一,下载并导入jquery easyui的导 <link rel="stylesheet" type="text/css" href="<%=basePath%>js/jquery-easyui-1.4/themes/default/easyui.css"> <link rel="stylesheet" type="text/css

JQuery EasyUI DataGrid 获取属性值

在Jquery EasyUI中返回操作的时候,根据当前页返回到数据选取页: var grid = $('#datagrid'); var options = grid.datagrid('getPager').data("pagination").options; var curr = options.pageNumber; var total = options.total; var max = Math.ceil(total/options.pageSize);

jQuery中对AJAX操作的封装函数

jQuery提供了6个简化AJAX操作的函数,每个都可以代替元素AJAX中的四步代码! (1)$('xxx').load()         jQuery对象函数 (2)$.get()                   jQuery全局函数 (3)$.post()                 jQuery全局函数 (4)$.getScript()          jQuery全局函数 (5)$.getJSON()           jQuery全局函数 (6)$.ajax()     

Jquery easyui开启行编辑模式增删改操作

来源:http://www.cnblogs.com/nyzhai/archive/2013/05/14/3077152.html Jquery easyui开启行编辑模式增删改操作先上图 Html代码: <table id="dd"> </table> 引入JS文件和CSS样式 <script src="http://www.cnblogs.com/Resources/jquery-easyui-1.2.3/jquery-1.4.4.min.js

[转]Jquery easyui开启行编辑模式增删改操作

本文转自:http://www.cnblogs.com/nyzhai/archive/2013/05/14/3077152.html Jquery easyui开启行编辑模式增删改操作先上图 Html代码: <table id="dd"> </table> 引入JS文件和CSS样式 <script src="http://www.cnblogs.com/Resources/jquery-easyui-1.2.3/jquery-1.4.4.min.

Jquery基础之事件操作

事件是用户操作时页面或页面加载时引发的用来完成javascript和HTML之间的交互操作.常见的元素点击事件.鼠标事件.键盘输入事件等,较传Javascript 相比JQuery增加并扩展了基本的事件处理机制,极大的增强了事件处理的能力. 一.DOM加载事件 页面加载完毕后浏览器会通过javascript为Dom元素加载事件,使用Javascript时候使用的是window.onload方法,而Jquery使用的是$(document).ready()方法,下表 展示两个事件的异同.    w

JQuery中Ajax的操作

Java软件开发中,后台中我们可以通过各种框架,像SSH等进行对代码的封装,方便我们对Java代码的编写,例如,Struts,SpringMVC对从前台到action的流程进行封装控制,使我们只需要进行一些简单配置就可以实现:而Spring进行了对各种对象的管理进行封装,提供了AOP编程的方式,大大方便了我们:而Hibernate和IBatis则是对JDBC代码进行封装,不需要我们每次都写那些重复而繁杂的JDBC代码. 前台呢,对于页面一些效果,验证等,我们都是通过JavaScript语言进行完

jquery.easyui代码详解,和遇到的问题,提供大家在使用的时候少走弯路(一)

初次使用jquery.easyui这个东东,虽然简单,但还是很费力的去研究了一下使用,在使用过程中遇到的问题,下面代码会详细的注释到 引用的文件jquery.min.js              jquery.easyui.min.js 样式:icon.css         easyui.css 页面初始化easy ui 插件 <html xmlns="http://www.w3.org/1999/xhtml"> <div class="cg-op&qu