easyui1.32 各种问题汇总

问题一

场景：tab切换，每个tab里用div放一个dataGrid,默认display:none隐藏，当display:'block'的时候,dataGrid会显示不全，仅显示一条线。

解决方法：切换到当前tab的时候执行方法 $("#tableid").datagrid("resize");即可解决。

http://bbs.csdn.net/topics/390666562

问题二

场景：dataGrid单元格添加超链接，想点击修改，如何获取当前行数据的问题。

$('#templateGrid').datagrid({
        columns:[[
            {
                title:'',
                field: 'id',
                checkbox:true,
                width:10
            }
            {
                title: '修改',
                align:'center',
                field: 'modify',
                width:50,
                formatter:function(value,row,index){
                    return '<a href="javascript:;" style="color:#00a9ff">修改</a>'
                }
            
        ]],
        onClickCell:function(rowIndex, field, value){//修改弹层
            if(field=='modify'){
                var row = $('#templateGrid').datagrid('getData').rows[rowIndex];
                console.info(row)//当前行数据

      }

问题三

 //弹层比如Dialog里的表单装载dataGrid选择行数据的便捷方法

$('#xx').form('load',{
                    ruleName:row.ruleName
}) 　

问题四

场景：弹层里动态生成表单比如combobox，下拉列表看不见的问题

比如我在用layer做弹层的时候，由于layer的层级比较高，combobox的下拉列表就看不到，造成展不开的错觉，实际上是由于下拉列表被弹层所覆盖，如果用layer做弹层，只需要修改layer源码查找
z-index,改小一点就行。

问题五

datagrid删除选择的行或者多行

function delRows(dgName) {
    var rows = $(dgName).datagrid("getSelections");
    var copyRows = [];
    for (var j = 0; j < rows.length; j++) {
        copyRows.push(rows[j]);
    }
    for (var i = 0; i < copyRows.length; i++) {
        var index = $(dgName).datagrid('getRowIndex', copyRows[i]);
        $(dgName).datagrid('deleteRow', index);
    }
}

delRows('#templateGrid')

问题六

datebox和datetimebox样式修改,替换原基础风格metro风格easyui.css里日历部分

.calendar {
    border-width: 1px;
    border-style: solid;
    /*  padding: 1px;*/
    overflow: hidden;
    font-size: 12px;
}
.calendar table {
    border-collapse: separate;
    font-size: 12px;
    width: 100%;
    height: 100%;
}
.calendar-body thead tr th{
    border-bottom:1px solid #ccc;
    font-weight:normal;
    color:#333;
    height: 21px!important;
    line-height: 21px!important;
}
.calendar-body tbody tr td{
    height: 21px!important;
    line-height: 21px!important;
    background-color: #fff;
    color: #333;
}
.calendar-selected{
    background-color: #F32043!important;
    color: #fff!important;
    border:none!important;
}
.calendar-day.calendar-hover{
    background:#f54766!important;
    color:#fff;
    border:none!important;
}
.datebox-button{padding:5px 0!important;}
.datebox-button a{
    border: 1px solid #ccc;
    height: 20px;
    line-height: 20px;
    padding:0 6px;
    font-weight:normal;
    color:#333;
    display:inline-block;
}
.datebox-button a:hover{
    background:#F6F6F6; color:#333
}
.calendar-noborder {
    border: 0;
}
.calendar-header {
    position: relative;
    height: 22px;
    padding:5px 0;
    background-color: #D91600;
}
.calendar-title {
    text-align: center;
    height: 22px;
}
.calendar-title span {
    position: relative;
    display: inline-block;
    top: 2px;
    padding: 0 3px;
    height: 18px;
    line-height: 18px;
    cursor: pointer;
    -moz-border-radius: 0px 0px 0px 0px;
    -webkit-border-radius: 0px 0px 0px 0px;
    border-radius: 0px 0px 0px 0px;
    color:#fff
}
.calendar-prevmonth,
.calendar-nextmonth,
.calendar-prevyear,
.calendar-nextyear {
    position: absolute;
    top: 50%;
    margin-top: -7px;
    width: 14px;
    height: 14px;
    cursor: pointer;
    font-size: 1px;
    -moz-border-radius: 0px 0px 0px 0px;
    -webkit-border-radius: 0px 0px 0px 0px;
    border-radius: 0px 0px 0px 0px;
}
.calendar-prevmonth {
    left: 20px;
    background: url('images/calendar_arrows.png') no-repeat -18px -2px;
}
.calendar-nextmonth {
    right: 20px;
    background: url('images/calendar_arrows.png') no-repeat -34px -2px;
}
.calendar-prevyear {
    left: 3px;
    background: url('images/calendar_arrows.png') no-repeat -1px -2px;
}
.calendar-nextyear {
    right: 3px;
    background: url('images/calendar_arrows.png') no-repeat -49px -2px;
}
.calendar-body {
    position: relative;
}
.calendar-body th,
.calendar-body td {
    text-align: center;
}
.calendar-day {
    border: 0;
    /*  padding: 1px;*/
    cursor: pointer;
    -moz-border-radius: 0px 0px 0px 0px;
    -webkit-border-radius: 0px 0px 0px 0px;
    border-radius: 0px 0px 0px 0px;
}
.calendar-other-month {
    /*  opacity: 0.3;
      filter: alpha(opacity=30);*/
    color:#999!important;
}
.calendar-other-month:hover{
    color:#fff!important;
}
.calendar-menu {
    position: absolute;
    top: 0;
    left: 0;
    width: 180px;
    height: 150px;
    padding: 5px;
    font-size: 12px;
    display: none;
    overflow: hidden;
}
.calendar-menu-year-inner {
    text-align: center;
    padding-bottom: 5px;
}
.calendar-menu-year {
    width: 40px;
    text-align: center;
    border-width: 1px;
    border-style: solid;
    margin: 0;
    padding: 2px;
    font-weight: bold;
}
.calendar-menu-prev,
.calendar-menu-next {
    display: inline-block;
    width: 21px;
    height: 21px;
    vertical-align: top;
    cursor: pointer;
    -moz-border-radius: 0px 0px 0px 0px;
    -webkit-border-radius: 0px 0px 0px 0px;
    border-radius: 0px 0px 0px 0px;
}
.calendar-menu-prev {
    margin-right: 10px;
    background: url('images/calendar_arrows.png') no-repeat 2px 2px;
}
.calendar-menu-next {
    margin-left: 10px;
    background: url('images/calendar_arrows.png') no-repeat -45px 2px;
}
.calendar-menu-month {
    text-align: center;
    cursor: pointer;
    font-weight: bold;
    -moz-border-radius: 0px 0px 0px 0px;
    -webkit-border-radius: 0px 0px 0px 0px;
    border-radius: 0px 0px 0px 0px;
}
.calendar-body th,
.calendar-menu-month {
    color: #919191;
}
.calendar-day {
    color: #444;
}
.calendar-sunday {
    color: #CC2222;
}
.calendar-saturday {
    color: #00ee00;
}
.calendar-today {
    color: #0000ff;
}
.calendar-menu-year {
    border-color: #ddd;
}
.calendar {
    border-color: #ddd;
}
.calendar-header {
    background: #D91600;
}
.calendar-body,
.calendar-menu {
    background: #fff;
}
.calendar-body th {
    background: #fff;
}
.calendar-hover,
.calendar-nav-hover,
.calendar-menu-hover {
    background-color: #F54766;
    color: #444;
}
.calendar-hover {
    border: 1px solid #ddd;
    padding: 0;
}
.calendar-selected {
    background-color: #CCE6FF;
    color: #000;
    border: 1px solid #99cdff;
    padding: 0;
}
.datebox-calendar-inner {
    height: 190px;
}
.datebox-calendar-inner .spinner{margin-left:3px!important;}
.datebox-button {
    height: 18px;
    margin:5px;
    margin-top:0;
    font-size: 12px;
    text-align: center;
}
.datebox-current,
.datebox-close,
.datebox-ok {
    text-decoration: none;
    /*  font-weight: bold;
      opacity: 0.6;
      filter: alpha(opacity=60);*/
}
.datebox-current,
.datebox-close {
    float: left;
}
.datebox-close {
    float: right;
}
.datebox-button-hover {
    opacity: 1.0;
    filter: alpha(opacity=100);
}
.datebox .combo-arrow {
    background-image: url('images/datebox_arrow.png');
    background-position: center center;
}
.combo.datebox{padding-right:10px;}
.datebox-button {
    background-color: #fff;
}
.datebox-current,
.datebox-close,
.datebox-ok {
    color: #777;
}　　

JS部分修改：搜索下面两部分进行修改宽度，默认width:180

$.fn.calendar.defaults={width:240,height:180...
$.fn.datebox.defaults=$.extend({},$.fn.combo.defaults,{panelWidth:240...

图片替换：calendar_arrows（白色）  spinner_arrows两张图片

　　 

最终效果：

　　

问题七

datagrid行内单元格鼠标悬浮改变其内容为查看详情

    var _grid = $('#templateGrid').datagrid({
        //...列
        onLoadSuccess: function () { //鼠标悬停效果
            var tableTd = $('div.datagrid-body td[field="selection"]'); //selection是列名
            tableTd.each(function () {
                var _this = $(this);
                var index = _this.parent('tr').attr('datagrid-row-index');
                var rows = _grid.datagrid('getRows');
                var currentRow = rows[index];
                var currentValue = currentRow.selection  //selection是列名
                _this.mouseenter(function () {
                    _this.find('a').text('查看详情')
                }).mouseleave(function () {
                    _this.find('a').text(currentValue)
                })
            });
        }
    })

　问题八

datagrid列字段太多，当没有数据时，字段显示不全，滚动条不出现的问题

    给datagrid配置属性时设置一个事件:
            onBeforeLoad:function () {
                $(this).prev(".datagrid-view2").children(".datagrid-body").html("<div style='width:" + $(this).prev(".datagrid-view2").find(".datagrid-header-row").width() + "px;border:solid 0px;height:1px;'></div>");
            }
    注:datagrid如果配置了属性fitColumns:true要删掉

    当装载表格数据时重写onBeforeLoad方法
    $('#sampleGrid').datagrid({
        onBeforeLoad: null, //重写onBeforeLoad方法
        'data': data
    });

　问题九

   日历时间框的格式化

 $('.easyui-datebox').datebox({
        formatter:function(date){
            var y = date.getFullYear();
            var m = date.getMonth()+1;
            var d = date.getDate();
            return y+'-'+m+'-'+d;
        }
    }) //date的格式化yyyy-mm-dd

    $('.easyui-datetimebox').datetimebox({
        formatter:function(date){
            var y = date.getFullYear();
            var m = date.getMonth()+1;
            var d = date.getDate();
            var h = date.getHours();
            var min = date.getMinutes();
            var sec = date.getSeconds();
            var str = y+'/'+(m<10?('0'+m):m)+'/'+(d<10?('0'+d):d)+'/'+' '+(h<10?('0'+h):h)+':'+(min<10?('0'+min):min)+':'+(sec<10?('0'+sec):sec);
            return str;
        }
    });//datetime的格式化yyyy/m/d h:m:s

　问题十

   validaebox自定义验证规则添加

 //扩展验证规则
    $.fn.validatebox.defaults = {
        required: false,
        validType: null,
        missingMessage: '输入不能为空.',
        invalidMessage: null,
        rules: {
            email:{
                validator: function(value){
                    return /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i.test(value);
                },
                message: '请输入正确的邮箱地址.'
            },
            url: {
                validator: function(value){
                    return /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(value);
                },
                message: '请输入正确的URL链接.'
            },
            //定义字符输入数量的区间（length）
            length: {
                validator: function(value, param){
                    var len = $.trim(value).length;
                    return len >= param[0] && len <= param[1]
                },
                message: '内容长度介于{0}和{1}之间.'
            },
            //定义字符最小输入数量（minLength）
            minLength: {
                validator: function(value, param){
                    return value.length >= param[0];
                },
                message: '最少输入 {0} 个字符.'
            },
            //定义字符最大输入数量（maxLength）
            maxLength: {
                validator: function(value, param){
                    return value.length <= param[0];
                },
                message: '最多输入 {0} 个字符.'
            },
            //自定义正则校验表达式（regExp）
            regExp: {
                validator: function (value, param) {
                    console.info(param[0])
                    var regExp = param[0];
                    var re = new RegExp(regExp);
                    return re.test(value);
                },
                message: '{1}'
            },
            //自定义校验函数接口（checker）
            checker: {
                validator: function (value, param) {
                    var checker = param[0];
                    if ($.isFunction(checker)) {
                        return checker(value);
                    }
                    return true;
                },
                message: '{1}'
            },
            phone: {
                validator: function(value) {
                    return /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value);
                },
                message: '请输入正确的电话号码.'
            },
            mobile: {
                validator: function(value) {
                    return /^1\d{10}$/.test(value);
                },
                message: '手机号码不正确.'
            },
            idcard: {
                validator: function(value) {
                    return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value);
                },
                message: '身份证号码不正确.'
            },
            ip: {
                validator: function(value) {
                    return /^([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$/.test(value);
                },
                message: 'ip地址格式不正确.'
            },
            text: {
                validator: function(value) {
                    return /^[A-Za-z0-9\u4e00-\u9fa5]+$/.test(value);
                },
                message: '只能输入数字字母中文不允许有符号.'
            },
            number: {
                validator: function(value) {
                    return /^[+-]?\d+(\.\d+)?$/.test(value);
                },
                message: '只能输入数字正负数或小数.'
            }
        }
    };
    
    //使用说明
    //是否必须输入（required）
    using(["validatebox"], function () {
        $('#validatebox1').validatebox({
            required: true
        });
    });

    //定义字符最小输入数量（minLength）
    using(["validatebox"], function () {
        $('#validatebox2').validatebox({
            required: true,
            validType:'minLength[5]'
        });
    });

    //定义字符最大输入数量（maxLength）
    using(["validatebox"], function () {
        $('#validatebox3').validatebox({
            required: true,
            validType:'maxLength[5]'
        });
    });

    //定义字符输入数量的区间（length）
    using(["validatebox"], function () {
        $('#validatebox4').validatebox({
            required: true,
            validType:'length[1,5]'
        });
    });

    //自定义正则校验表达式（regExp）
    using(["validatebox"], function () {
        $('#validatebox6').validatebox({
            required: true,
            validType:"regExp['^[A-Za-z]*$','必须为字母']"
        });
    });

    //自定义校验函数接口（checker）
    var customFn=function(value){
        if(/^\d*$/.test(value)){
            return true;
        }else{
            return false;
        }
    }
    using(["validatebox"], function () {
        $('#validatebox7').validatebox({
            required: true,
            validType:"checker[customFn,'必须为符合自定义校验函数的输入值（这里假定必须为数字）']"
        });
    });

    //定义输入类型邮件（inputType-email）
    using(["validatebox"], function () {
        $('#validatebox9').validatebox({
            required: true,
            validType:'email'
        });
    });
    //定义输入类型电话号码（inputType-phone）
    using(["validatebox"], function () {
        $('#validatebox10').validatebox({
            required: true,
            validType:'phone'
        });
    });

    //定义输入类型手机号码（inputType-mobile）
    using(["validatebox"], function () {
        $('#validatebox12').validatebox({
            required: true,
            validType:'mobile'
        });
    });
    //定义输入类型身份证号码（inputType-idcard）
    using(["validatebox"], function () {
        $('#validatebox13').validatebox({
            required: true,
            validType:'idcard'
        });
    });
    //定义输入类型IP地址（inputType-ip）
    using(["validatebox"], function () {
        $('#validatebox14').validatebox({
            required: true,
            validType:'ip'
        });
    });
    //定义输入类型文本（inputType-text）
    using(["validatebox"], function () {
        $('#validatebox15').validatebox({
            required: true,
            validType:'text'
        });
    });
    //定义输入类型数字（inputType-number）
    using(["validatebox"], function () {
        $('#validatebox16').validatebox({
            required: true,
            validType:'number'
        });
    });

 

easyui sleect下拉框插件独立版:
https://files.cnblogs.com/files/leyi/easyuiSelect.rar