记录项目中easyui的运用

1.实现合并列，且文字显示居左，背景为固定颜色

效果图：

实现代码：

$('#tab').datagrid({
    title : '',         //表格标题
    iconCls : 'icon-list',  //表格图标
    nowrap : false,         //是否只显示一行，即文本过多是否省略部分。
    striped : false,
    fitColumns : true,         //防止水平滚动
    scrollbarSize : 0,         //去掉右侧滚动条列
    collapsible : false,    //是否可折叠的 
    //striped:true,//隔行变色
    loadMsg : "loading....",
    //singleSelect:true,
    checkOnSelect:false,
    fit:true,
    //rownumbers : true,
    data:[

          {
              "1":"张三",
              "2":"18700002233",
              "3":"13700365214",
              "4":"XXXXXXXXXXXX",
              "5":"1000",
              "6":"宾客姓名",
              "7":"宾客姓名",
              "8":"宾客姓名",
              "9":"2017-5-21 20:57:17",
              "10":"500",
              "11":"标准间",
              "12":"A101",
              "13":"会员"
          }
          ,{"1":"备注","2":"我是备注"}
         ],
    onLoadSuccess:function(){
        $(this).datagrid('mergeCells',{  
            index:1,
            field:"2",
            //field: rowFildName,  
            colspan:12
        }); 
        $(this).parent().find(".datagrid-td-merged").children('div')[0].style.textAlign="left";
        var that = $(this).parent().find(".datagrid-td-merged").parent()[0];
        that.style.height="40px";
            $(that).css("background-color","#FAFAFA");
            $(that).prev().css("background-color","#FAFAFA");
        
    },

 2.【验证的使用 】和【自定义验证代码】：

//创建控件时 设置的代码  JS实现
$('#textboxid').textbox({
        required:true,
        missingMessage : "名称不能为空！",
        validType:['maxLength[32]'],
        invalidMessage : "最大输入长度为32个字符",
        validateOnCreate:false,//为true时在创建该组件时就进行验证
        validateOnBlur:true  //为true时在该组件失去焦点的时候进行验证
    });
//提交前的函数里 进行验证
if(!$('#texyboxid').textbox('isValid')){
    $('#texyboxid').textbox('textbox').focus(); 
    return;
}

 

//自定义验证
$.extend($.fn.validatebox.defaults.rules, {    
    minLength: {    
        validator: function(value, param){    
            return value.length >= param[0];    
        },    
        message: '请输入至少{0}个字符'   
    }
    ,maxLength: {    
        validator: function(value, param){    
            return value.length <= param[0];    
        },    
        message: '最多输入{0}个字符'   
    }
    ,mobilephone: {
        validator: function(value){
                var rex=/^1[34578]\d{9}$/;
                if(rex.test(value)){
                  return true;
                }else{
                   return false;
                }
              
            },
            message: '请输入正确的手机格式'
        }
    ,name: {
        validator: function(value){
                var rex1=/^([\u4e00-\u9fa5]){2,7}$/;
                var rex2=/^([a-zA-Z]{3,10})$/;
                if(rex1.test(value)||rex2.test(value)){
                  return true;
                }else{
                   return false;
                }
              
            },
            message: '请输入正确的姓名格式'
        }
    ,certificateType: {
        validator: function(value){
            isIDCard1=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/; 
            //身份证正则表达式(18位) 
            isIDCard2=/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
            if(isIDCard1.test(value)||isIDCard2.test(value)){
                return true;
            }else{
                return false;
            }
        },
        message: '请输入正确的证件格式'
    }
    ,number: {
        validator: function(value){
            var rex=/^-?\d+$/;
            if(rex.test(value)){
                return true;
            }else{
                return false;
            }
            
        },
        message: '请输入整数'
    }
}); 

 3.实现 【未查询到相关信息】样式：

onLoadSuccess:function(data){
        if(data.rows[0] == undefined){
                $(this).datagrid('insertRow',{
                    index: 0,    // 索引从0开始
                    row: {
                        accessAmount: '<span style="color:red;font-size:18px;">未查询到相关信息！</span>'
                    }
                });
                $(this).datagrid('mergeCells',{
                    index: 0,
                    field: 'accessAmount',
                    colspan: 5
                });
        $(this).parent().find(".datagrid-td-rownumber").css("background-color","#FAFAFA").css("border-color","#FAFAFA").children('div').html("");
                $(this).parent().find(".datagrid-td-merged").css("border-bottom-color","#FAFAFA")
                var that = $(this).parent().find(".datagrid-td-merged").parent()[0];
                $(that).hover(function(){$(that).css("background-color","#FAFAFA")});
        }
    },