1.實現合並列，且文字顯示居左，背景為固定顏色

效果圖：

實現代碼：

 1 $(‘#tab‘).datagrid({
 2     title : ‘‘,         //表格標題
 3     iconCls : ‘icon-list‘,  //表格圖標
 4     nowrap : false,         //是否只顯示一行，即文本過多是否省略部分。
 5     striped : false,
 6     fitColumns : true,         //防止水平滾動
 7     scrollbarSize : 0,         //去掉右側滾動條列
 8     collapsible : false
 
,    //是否可折疊的 
 9     //striped:true,//隔行變色
10     loadMsg : "loading....",
11     //singleSelect:true,
12     checkOnSelect:false,
13     fit:true,
14     //rownumbers : true,
15     data:[
16 
17           {
18               "1":"張三",
19               "2":"18700002233",
20               "3":"13700365214",
21               "4":"XXXXXXXXXXXX",
 
22               "5":"1000",
23               "6":"賓客姓名",
24               "7":"賓客姓名",
25               "8":"賓客姓名",
26               "9":"2017-5-21 20:57:17",
27               "10":"500",
28               "11":"標準間",
29               "12":"A101",
30               "13":"會員"
31           }
32           ,{"1":"備註","2":"我是備註"}
 
33          ],
34     onLoadSuccess:function(){
52         $(this).datagrid(‘mergeCells‘,{  
53             index:1,
54             field:"2",
55             //field: rowFildName,  
56             colspan:12
57         }); 
59         $(this).parent().find(".datagrid-td-merged").children(‘div‘)[0].style.textAlign="left";
61         var that = $(this).parent().find(".datagrid-td-merged").parent()[0];
62         that.style.height="40px";
64             $(that).css("background-color","#FAFAFA");
65             $(that).prev().css("background-color","#FAFAFA");
66         
67     },

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: ‘請輸入整數‘
    }
}); 

記錄項目中easyui的運用