/** 
 * 依赖样式：icon-help（easyui icon.css中） 
 * .icon-help{ 
 *  background:url('icons/help.png') no-repeat center center; 
 * } 
 */
(function($) {  
    $.fn.extend({  
        /** 
         * 制作帮助信息<br>
         * 基于保单范围内，也可是其他指定范围，在指定控件位置后（以内嵌方式）显示帮助图标，鼠标移入后显示帮助信息<br>
         * 页面布局动态变化时，容易出现错位现象，通过setInterval()监控重新设置位置
         * @param json
         */  
        helptip: function(json){
        	var pairs = {};
        	for(var key in json){
        		var $target = $(this).find("input[name='" + key + "']").parent();
        		var $helpTip = $("<div name='_helptips' class='icon-help'> </div>");
        		$("body").append($helpTip);
        		$helpTip.css({
        			cursor: 'pointer',
        			position: 'absolute',
        			display: 'none',
        			height: 22,
        			width: 18
        		});
        		$target.width($target.width() - $helpTip.width());
        		
        		$helpTip.tooltip({
        			position : 'right',
        			content : '<span style="color:#fff">' + json[key].description + '</span>',
        			onShow : function() {
        				$(this).tooltip('tip').css({
        					backgroundColor : '#666',
        					borderColor : '#666'
        				});
        			}
        		});
        		pairs[key] = {target:$target, helpTip:$helpTip};
        	}
        	setInterval(function(){
        		for(var key in pairs){
        			if(pairs[key].target.is(":visible")){
            			pairs[key].helpTip.show('fast').offset({
            				left:pairs[key].target.offset().left + pairs[key].target.width() + 4,
            				top: pairs[key].target.offset().top
            			});
        			} else {
        				pairs[key].helpTip.hide();
        			}
        		}
        	}, 100);
        }
    });
})(jQuery);


// 调用示例
$(document).ready(function(){
	var helpTipsJSON = {
			risktype:{name:"", description:"L--寿险 A--意外险 H--健康险"},
			riskprop:{name:"", description:"L--长险(Long)、M--一年期险(Middle)、S--极短期险(Short)"},
	};
	$("#defLMRiskInfoFm").helptip(helpTipsJSON);
});

/*
依赖的样式
.flow-right-menu{
	position: fixed;
	z-index: 1000;
}
.flow-right-menu-btn{
	background: url("./flow-right-menu-show.png") no-repeat;
	width: 48px;
	height: 48px;
	margin-left: 1em;
	margin-bottom: -2.6em;
	z-index: 2000;
}
.flow-right-menu-btn:HOVER{
	cursor: pointer;
}
.flow-right-menu li{
	border: 1px solid #95B8E7;
	border-left: 6px solid #95B8E7;
	color: #0E2D5F;
	line-height: 1.5em;
	list-style-type: circle;
	padding: .5em 1em;
}
.flow-right-menu li:HOVER{
	border: 1px solid #FF9900;
	border-left: 4px solid #FF9900;
	border-right: 1px solid #FF9900;
	background-color: #FFFFCE;
	color: #0080FF;
	cursor: pointer;
}
.flow-right-menu li.selected{
	border: 1px solid #F8FE01;
	border-left: 4px solid #F8FE01;
	border-right: 1px solid #F8FE01;
	background-color: #FF9900;
	color: #fff;
}
*/



/**
 * 右侧浮动菜单插件
 * @param $
 */
(function($){
	$.flowmenu = function(options, param){
		if(null == options || options == undefined) options = "open";
		if (typeof options != 'string'){
			param = options;
			options = "open";
		}
		var method = $.flowmenu.methods[options];
		return method ? method(param) : null;
	},
	$.flowmenu.methods = {
		/**
		 * 显示右侧浮动菜单，且默认第一个菜单选中
		 * @param param
		 *    参数示例：
		 *    [{name:'', text: '', callback: null}]
		 *    name: 菜单唯一标识
		 *    text: 显示的菜单名
		 *    callback: 菜单点击回调函数，若当前即为显示的菜单项，则不会执行回调动作
		 * @returns
		 */
		open: function(param){
			var $containerDiv = $(".flow-right-menu");
			if($containerDiv.length > 0) return $containerDiv;
			
			$containerDiv = $("<div/>").addClass("flow-right-menu");
			$("body").append($containerDiv);
			
			$("<div/>").addClass("flow-right-menu-btn").appendTo($containerDiv).bind("click", function(ev){
				var w = $(window).width();
				var sw = $containerDiv.width();
				if($(".flow-right-menu ul").is(":visible")){
					$(".flow-right-menu ul").slideUp('fast', function(){
						var l = $(window).width() - $containerDiv.width() * 1/3;
						$(".flow-right-menu").animate({left: l});
					});
				} else {
					var l = sw > w ? w : (w - sw - 2);
					$(".flow-right-menu").animate({left: l}, function(){
						$(".flow-right-menu ul").slideDown('fast');
					});
				}
			});
			
			var $ul = $("<ul/>").appendTo($containerDiv);
			if(null == param || param == undefined){
			} else {
				for (var int = 0; int < param.length; int++) {
					var menuJSON = param[int];
					var $li = $("<li/>").attr({
						name : menuJSON.name
					}).html(menuJSON.text).appendTo($ul);
					if(menuJSON.callback){
						$li.bind("click", {fn: menuJSON.callback}, function(ev){
							if("selected" == $(this).attr("class")){
								return;
							}
							$.flowmenu("select", $(this).attr("name"));
							ev.data.fn();
						})
					}
				}
				$ul.find("li:first").addClass("selected");
			}
			
			var sh = $containerDiv.height();
			var sw = $containerDiv.width();
			$containerDiv.width(sw);
			function _resize(){
				var w = $(window).width(), h = $(window).height();
				var t = sh > h ? 0 : (h - sh) / 4;
				if($(".flow-right-menu ul").is(":visible")){
					var l = sw > w ? w : (w - sw - 2);
		    		$containerDiv.css({left: l, top: t});
				} else {
					var l = w - sw * 1/3;
		    		$containerDiv.css({left: l, top: t});
				}
			}
			_resize();
			$(window).bind('resize', function(){
				_resize();
			})
			return $containerDiv;
		},
		/**
		 * 设置指定菜单被选中
		 * @param param 菜单唯一标识
		 * @returns
		 */
		select: function(param){
			$(".flow-right-menu li").removeClass("selected");
			$(".flow-right-menu li[name=" + param + "]").addClass("selected");
		}
	}
})(jQuery);

// 调用示例
$(document).ready(function(){
	var menuJSONArray = [
	    {name:'easyui_1', text: 'easyui_1', callback: function(){alert('easyui_1');}},
	    {name:'easyui_2', text: 'easyui_2', callback: function(){alert('easyui_2');}},
	    {name:'easyui_3', text: 'easyui_3', callback: function(){alert('easyui_3');}},
	    {name:'easyui_4', text: 'easyui_4', callback: function(){alert('easyui_4');}},
	    {name:'easyui_5', text: 'easyui_5', callback: function(){alert('easyui_5');}},
	    {name:'easyui_0', text: 'easyui_0', callback: function(){alert('easyui_0');}}
	];
	// 右侧浮动菜单
	$.flowmenu(menuJSONArray);
//	$.flowmenu("open", menuJSONArray);
	$.flowmenu("select", "easyui_3");
});

/**
 * form扩展
 * @param $
 */
$.extend($.fn.form.methods, {
	/**
	 * getData 获取数据接口
	 * http://www.easyui.info/archives/138.html
	 * 用法示例：
	 * $("#formID").form("getData");
	 * $("#formID").form("getData", true);
	 * @param jq
	 * @param params 设置为true的话，会把string型"true"和"false"字符串值转化为boolean型。不区分大小写。
	 */
	getData: function(jq, params){
		var oRet = {};
		var formArray = jq.serializeArray();
		for(var i in formArray){
			var v = formArray[i].value;
			if (params){
				v = (v.toLocaleLowerCase() == "true" || v.toLocaleLowerCase() == "false") ? v.toLocaleLowerCase() == "true" : v;
			}
			if (typeof(oRet[formArray[i].name]) == 'undefined') {
				oRet[formArray[i].name] = v;
			} else {
				oRet[formArray[i].name] += "," + v;
			}
		}
		return oRet;
	},
	/**
	 * 获取指定控件值
	 * 用法示例：
	 * $("#formID").form("getValue");
	 * @param jq
	 * @param name 控件的name属性值
	 * @param value 设置的value值
	 */
	getValue : function(jq, name){
		var data = jq.form("getData");
		return data[name];
	},
	/**
	 * 设置指定控件值
	 * 用法示例：
	 * $("#formID").form("setValue", {name: "email", value: "test@qq.com"});
	 * @param jq
	 * @param params 控件的name/value属性键值对
	 */
	setValue : function(jq, params) {
		var json = {name: '', value: ''};
		$.extend(true, json, params);
		return jq.each(function() {
			var data = $(this).form("getData");
			data[json.name] = json.value;
			$(this).form("load", data);
		});
	},
	/**
	 * 是否禁用，针对form表单中所有的input[文本框、复选框、单选框],select[下拉选],多行文本框[textarea]
	 * 参考：http://caizi12.iteye.com/blog/1734143
	 * 用法示例：
	 * $("#form").form("disabled"); 同 $("#form").form("disabled", true);
	 * $("#form").form("disabled", false);
	 * @param jq
	 * @param flag：true-禁用；false-取消禁用；
	 *             不定义时，默认为true-禁用
	 */
	disabled: function(jq, flag){
		flag = null == flag || flag == undefined?true:flag;
		jq.form("readonly", flag);
		jq.find(":input").attr("disabled",flag);
	},
	/**
	 * 是否只读，针对form表单中所有的input[文本框、复选框、单选框],select[下拉选],多行文本框[textarea]
	 * 用法示例：
	 * $("#form").form("readonly"); 同 $("#form").form("readonly", true);
	 * $("#form").form("readonly", false);
	 * @param jq
	 * @param flag：true-只读；false-取消只读；
	 *             不定义时，默认为true-只读
	 */
	readonly: function(jq, flag){
		flag = null == flag || flag == undefined?true:flag;
		jq.find(":input").attr("readonly",flag);
		
//		jq.find(":text").attr("readonly",flag);
//		jq.find("textarea").attr("disabled",flag);
//		jq.find("select").attr("disabled",flag);
		jq.find(":radio").attr("disabled",flag);
		jq.find(":checkbox").attr("disabled",flag);
		
		// 禁用jquery easyui中的下拉选（使用input生成的combox）
		jq.find(".easyui-combobox").combobox('readonly', flag);
		
		// 禁用jquery easyui中的下拉选（使用select生成的combox）
//		jq.find("select[class='combobox-f combo-f']").each(function() {
//			if (this.id) {
//				$("#" + this.id).combobox(attr);
//			}
//		});  
	      
	    // 禁用jquery easyui中的日期组件dataBox
		jq.find(".easyui-datebox").datebox('readonly', flag);
	}
});

/**
 * 单元格单击编辑，及禁用单元格单击编辑扩展
 * EasyUI中文站 1.4.2 - jQuery EasyUI 
 * http://92ui.net/index.aspx 
 * 需再扩展：
 * 移除焦点后自动提交
 * 
 * 调用示例：
 * $("#dg").datagrid('enableCellEditing');
 * $("#dg").datagrid('disabledCellEditing');
 */
$.extend($.fn.datagrid.methods, {
    editCell : function(jq, param) {  
        return jq.each(function() {  
            var opts = $(this).datagrid('options');  
            var fields = $(this).datagrid('getColumnFields', true).concat(  
                    $(this).datagrid('getColumnFields'));  
            for (var i = 0; i < fields.length; i++) {  
                var col = $(this).datagrid('getColumnOption', fields[i]);  
                col.editor1 = col.editor;  
                if (fields[i] != param.field) {  
                    col.editor = null;  
                }  
            }  
            $(this).datagrid('beginEdit', param.index);  
            var ed = $(this).datagrid('getEditor', param);  
            if (ed) {  
                if ($(ed.target).hasClass('textbox-f')) {  
                    $(ed.target).textbox('textbox').focus();  
                } else {  
                    $(ed.target).focus();  
                }  
            }  
            for (var i = 0; i < fields.length; i++) {  
                var col = $(this).datagrid('getColumnOption', fields[i]);  
                col.editor = col.editor1;  
            }  
        });  
    },
    /**
     * 开启单元格单击编辑
     */
    enableCellEditing : function(jq) {  
        return jq.each(function() {  
            var dg = $(this);  
            var opts = dg.datagrid('options');  
            opts.oldOnClickCell = opts.onClickCell;  
            opts.onClickCell = function(index, field) {  
                if (opts.editIndex != undefined) {  
                    if (dg.datagrid('validateRow', opts.editIndex)) {  
                        dg.datagrid('endEdit', opts.editIndex);  
                        opts.editIndex = undefined;  
                    } else {  
                        return;  
                    }  
                }  
                dg.datagrid('selectRow', index).datagrid('editCell', {  
                    index : index,  
                    field : field  
                });  
                opts.editIndex = index;  
                opts.oldOnClickCell.call(this, index, field);  
            }  
        });  
    },
    /**
     * 禁用单元格单击编辑
     */
    disabledCellEditing: function(jq){
    	
    }
});

$.extend($.fn.datagrid.methods, {
	/**
	 * 自动合并表体<br>
	 * 从左向右合并，右边列能合并的行是右边列已合并的范围
	 * @param {} jq
	 * @param [] fields 需合并的列，columns中的field值组成的数组
	 * @return {}
	 */
	autoMergeCells : function(jq, fields) {
		/**
		 * 
		 * @param col 起始列
		 * @param startrow 起始索引
		 * @param endrow 结束索引
		 * @param allcols 列数据集合
		 * @param target grid对象
		 * @param [] fields 需合并的列，columns中的field值组成的数组
		 */
		function megerCol(col,startrow,endrow,allcols,target,fields){
			var colArrar = allcols[col];
			var startIndex = startrow;
			var field = fields[col];
			for(var i=(startIndex+1);i<=endrow;i++){
				if(colArrar[i] == colArrar[startIndex]){
					if(i == endrow){
						var rowspan = i-startIndex+1;
						//合并单元格
						target.datagrid('mergeCells', {
		                    index : startIndex,
		                    field : field,
		                    rowspan : rowspan
		                 });
						if(col+1 < fields.length){
							megerCol(col+1,startIndex,i,allcols,target,fields); 
						}
					}else{
						continue;	
					}
				}else{
					if(startIndex != (i-1)){
						var rowspan = i-startIndex;
						//合并单元格
						target.datagrid('mergeCells', {
		                    index : startIndex,
		                    field : field,
		                    rowspan : rowspan
		                 });
						if(col+1 < fields.length){
							megerCol(col+1,startIndex,i-1,allcols,target,fields);
						}
					}
					startIndex = i;
				}
			}
		};
		return jq.each(function() {
			var target = $(this);
			if (!fields) {
				fields = target.datagrid("getColumnFields");
			}
			var allfileldValue = [];
			var rows = target.datagrid("getRows");
			//循环fileld得到所有行的数据数组
			for (var j = 0; j < fields.length; j++) {
				var fileldValue = [];
				for (var i = 0; i < rows.length; i++) {
					var row = rows[i];
					fileldValue.push(row[fields[j]]);
				}
				allfileldValue.push(fileldValue);
			}
			megerCol(0, 0, rows.length - 1, allfileldValue, target, fields);
		});
	}
});

调用示例：
$("#testTable").datagrid("autoMergeCells");
or
$("#testTable").datagrid("autoMergeCells", ['price1', 'price2']);

$.extend($.fn.datagrid.methods, {
   /** 
    * 开打提示功能   
    * @param {} jq   
    * @param {} params 提示消息框的样式   
    * @return {}   
    */
    showCellTip: function (jq, params) {
        function showTip(data, td, e) {
            if ($(td).text() == "")
                return;
            data.tooltip.text($(td).text()).css({
                top: (e.pageY) + 'px',
                left: (e.pageX) + 'px',
                'z-index': $.fn.window.defaults.zIndex,
                display: 'block'
            });
        };
        return jq.each(function () {
            var grid = $(this);
            var options = $(this).data('datagrid');
            if (!options.tooltip) {
                var panel = grid.datagrid('getPanel').panel('panel');
                var defaultCls = {
                    'border': '1px solid #333',
                    'padding': '0.5em',
                    'color': '#333',
                    'background': '#f7f5d1',
                    'position': 'absolute',
                    'max-width': '200px',
                    'border-radius': '4px',
                    '-moz-border-radius': '4px',
                    '-webkit-border-radius': '4px',
                    'display': 'none'
                }
                var tooltip = $("<div id='celltip'></div>").appendTo('body');
                tooltip.css($.extend({}, defaultCls, params.cls));
                options.tooltip = tooltip;
                panel.find('.datagrid-body').each(function () {
                    var delegateEle = $(this).find('> div.datagrid-body-inner').length
                            ? $(this).find('> div.datagrid-body-inner')[0]
                            : this;
                    $(delegateEle).undelegate('td', 'mouseover').undelegate(
                            'td', 'mouseout').undelegate('td', 'mousemove')
                            .delegate('td', {
                                'mouseover': function (e) {
                                    if (params.delay) {
                                        if (options.tipDelayTime)
                                            clearTimeout(options.tipDelayTime);
                                        var that = this;
                                        options.tipDelayTime = setTimeout(
                                                function () {
                                                    showTip(options, that, e);
                                                }, params.delay);
                                    } else {
                                        showTip(options, this, e);
                                    }

                                },
                                'mouseout': function (e) {
                                    if (options.tipDelayTime)
                                        clearTimeout(options.tipDelayTime);
                                    options.tooltip.css({
                                        'display': 'none'
                                    });
                                },
                                'mousemove': function (e) {
                                    var that = this;
                                    if (options.tipDelayTime) {
                                        clearTimeout(options.tipDelayTime);
                                        options.tipDelayTime = setTimeout(
                                                function () {
                                                    showTip(options, that, e);
                                                }, params.delay);
                                    } else {
                                        showTip(options, that, e);
                                    }
                                }
                            });
                });

            }

        });
    },
   /** 
    * 关闭消息提示功能   
    * @param {} jq   
    * @return {}   
    */
    hideCellTip: function (jq) {
        return jq.each(function () {
            var data = $(this).data('datagrid');
            if (data.tooltip) {
                data.tooltip.remove();
                data.tooltip = null;
                var panel = $(this).datagrid('getPanel').panel('panel');
                panel.find('.datagrid-body').undelegate('td',
                                'mouseover').undelegate('td', 'mouseout')
                                .undelegate('td', 'mousemove')
            }
            if (data.tipDelayTime) {
                clearTimeout(data.tipDelayTime);
                data.tipDelayTime = null;
            }
        });
    }
});

// 示例
$productTables.datagrid('showCellTip', {
    onlyShowInterrupt: false,     //是否只有在文字被截断时才显示tip，默认值为false             
    position: 'bottom',   //tip的位置，可以为top,botom,right,left
    cls: { 'background-color': '#D1EEEE' },  //tip的样式
    delay: 100   //tip 响应时间
});

$productTables.datagrid('hideCellTip');

$.extend($.fn.datagrid.methods,{
	// 表头右击字段显隐菜单
    showHideFieldsMenu : function(jq) {
        var menuID = jq.attr("id") + "_context_menu";
        var $contextMenu = $("#" + menuID);
        if ($contextMenu.length > 0) {
            return;
        }
        var fieldArray = jq.datagrid('getColumnFields');
        if (null == fieldArray || fieldArray == undefined) {
            return;
        }
        $contextMenu = $('<div class="easyui-menu" style="width:100px;"></div>').appendTo('body');
        $contextMenu.attr("id", menuID);
        var $fieldHTML = $('<div><span>显示/隐藏列</span></div>').appendTo($contextMenu);
        var $filedsList = $('<div class="menu-content" style="text-align:left"/>').appendTo($fieldHTML);
        
        var $menuItemList = $("<ul class='menu-table-fields'/>");
        for (var i = 0; i < fieldArray.length; i++) {
        	var checkboxID = menuID + "_checkbox_" + i;
            var $checkBox = $('<input type="checkbox">').attr("id", checkboxID);
            var $label = $('<label>' + jq.datagrid('getColumnOption', fieldArray[i]).title + '</label>');
            $label.attr("for", checkboxID);
            var $menuItem = $('<li />').append($checkBox).append($label);
            if (jq.datagrid('getColumnOption', fieldArray[i]).hidden == true) {
                $checkBox.attr('checked', true);
            }
            $checkBox.bind('click', {
                $jq : jq,
                field : fieldArray[i]
            }, function(ev) {
                var flag = ev.data.$jq.datagrid('getColumnOption', ev.data.field).hidden;
                $(this).attr('checked', !flag);
                var action = flag ? "showColumn" : "hideColumn";
                ev.data.$jq.datagrid(action, ev.data.field);
            });
            $checkBox.bind('mouseover', function(){
            	$(this).css('cursor', 'pointer');
            }).bind('mouseleft', function() {  
                $(this).css('cursor', 'none');  
            });
            $label.bind('mouseover', function(){
            	$(this).css('cursor', 'pointer');
            }).bind('mouseleft', function() {  
                $(this).css('cursor', 'none');  
            });
            $menuItemList.append($menuItem);
        }
        $filedsList.append($menuItemList);
        $.parser.parse();
        jq.datagrid({
            onHeaderContextMenu : function(e, field) {
                e.preventDefault();
                $contextMenu.menu('show', {
                    left : $(event.target).offset().left,
                    top : $(event.target).offset().top + 10
                });
            }
        });
    }
});

相关CSS：
ul.menu-table-fields li{
	list-style: none;
	line-height: 2.1em;
	margin-left: -3em;
	border-bottom: 1px solid #C1C1C1;
}

ul.menu-table-fields li:HOVER{
	background-color: #C1CDCD;
}

$.extend($.fn.datagrid.methods,{
    columnMoving: function(jq){
        return jq.each(function(){
            var target = this;
            var cells = $(this).datagrid('getPanel').find('div.datagrid-header td[field]');
            cells.draggable({
                revert:true,
                cursor:'pointer',
                edge:5,
                proxy:function(source){
                    var p = $('<div class="tree-node-proxy tree-dnd-no" style="position:absolute;border:1px solid #ff0000"/>').appendTo('body');
                    p.html($(source).text());
                    p.hide();
                    return p;
                },
                onBeforeDrag:function(e){
                    e.data.startLeft = $(this).offset().left;
                    e.data.startTop = $(this).offset().top;
                },
                onStartDrag: function(){
                    $(this).draggable('proxy').css({
                        left:-10000,
                        top:-10000
                    });
                },
                onDrag:function(e){
                    $(this).draggable('proxy').show().css({
                        left:e.pageX+15,
                        top:e.pageY+15
                    });
                    return false;
                }
            }).droppable({
                accept:'td[field]',
                onDragOver:function(e,source){
                    $(source).draggable('proxy').removeClass('tree-dnd-no').addClass('tree-dnd-yes');
                    $(this).css('border-left','1px solid #ff0000');
                },
                onDragLeave:function(e,source){
                    $(source).draggable('proxy').removeClass('tree-dnd-yes').addClass('tree-dnd-no');
                    $(this).css('border-left',0);
                },
                onDrop:function(e,source){
                    $(this).css('border-left',0);
                    var fromField = $(source).attr('field');
                    var toField = $(this).attr('field');
                    setTimeout(function(){
                        moveField(fromField,toField);
                        $(target).datagrid();
                        $(target).datagrid('columnMoving');
                    },0);
                }
            });
            // move field to another location  
            function moveField(from,to){
                var columns = $(target).datagrid('options').columns;
                var cc = columns[0];
                var c = _remove(from);
                if (c){
                    _insert(to,c);
                }
                
                function _remove(field){
                    for(var i=0; i<cc.length; i++){
                        if (cc[i].field == field){
                            var c = cc[i];
                            cc.splice(i,1);
                            return c;
                        }
                    }
                    return null;
                }
                function _insert(field,c){
                    var newcc = new Array();
                    for(var i=0; i<cc.length; i++){
                        if (cc[i].field == field){
                            newcc.push(c);
                        }
                        newcc.push(cc[i]);
                    }
                    columns[0] = newcc;
                }
            }
        });
    }
});

// 调用示例
$('#tt').datagrid({  
//    url: 'datagrid_data3.json',  
    title: 'DataGrid',  
    width: 700,  
    height: 220,  
    fitColumns: true,  
    nowrap:false,  
    rownumbers:true,  
    showFooter:true,  
    columns:[[
        {field:'itemid',title:'Item ID',width:80},  
        {field:'productid',title:'Product ID',width:120},  
        {field:'listprice',title:'List Price',width:80,align:'right'},  
        {field:'unitcost',title:'Unit Cost',width:80,align:'right'},  
        {field:'attr1',title:'Attribute',width:250, hidden:true},  
        {field:'status',title:'Status',width:60,align:'center'}  
    ]]
}).datagrid("columnMoving");

$.extend($.fn.datagrid.methods,{
    showHideFieldsMenu : function(jq) {
        var menuID = jq.attr("id") + "_context_menu";
        var $contextMenu = $("#" + menuID);
        if ($contextMenu.length > 0) {
            return;
        }
        var fieldArray = jq.datagrid('getColumnFields');
        if (null == fieldArray || fieldArray == undefined) {
            return;
        }
        $contextMenu = $('<div class="easyui-menu" style="width:100px;"></div>').appendTo('body');
        $contextMenu.attr("id", menuID);
        var $fieldHTML = $('<div><span>显示/隐藏列</span></div>').appendTo($contextMenu);
        var $filedsList = $('<div class="menu-content" style="text-align:left;padding:10px"/>').appendTo($fieldHTML);
        for (var i = 0; i < fieldArray.length; i++) {
            var $checkBox = $('<input type="checkbox">');
            var $label = $('<span>' + jq.datagrid('getColumnOption', fieldArray[i]).title + '</span>');
            var $menuItem = $('<div style="padding-left:-2em;"/>').append($checkBox).append($label);
            if (jq.datagrid('getColumnOption', fieldArray[i]).hidden == true) {
                $checkBox.attr('checked', true);
            }
            $checkBox.bind('click', {
                $jq : jq,
                field : fieldArray[i]
            }, function(ev) {
                var flag = ev.data.$jq.datagrid('getColumnOption', ev.data.field).hidden;
                $(this).attr('checked', !flag);
                var action = flag ? "showColumn" : "hideColumn";
                ev.data.$jq.datagrid(action, ev.data.field);
            });
            $label.bind('mouseover', function() {
                $(this).css('cursor', 'pointer');
            }).bind('mouseleft', function() {
                $(this).css('cursor', 'none');
            }).bind('click', {$jq : jq,
                    checkbox : $checkBox,
                    field : fieldArray[i]
                }, function(ev) {
                    var flag = ev.data.$jq.datagrid('getColumnOption', ev.data.field).hidden;
                    ev.data.checkbox.attr('checked', !flag);
                    var action = flag ? "showColumn" : "hideColumn";
                    ev.data.$jq.datagrid(action, ev.data.field);
            });
            $filedsList.append($menuItem);
        }
        $.parser.parse();
        jq.datagrid({
            onHeaderContextMenu : function(e, field) {
                e.preventDefault();
                $contextMenu.menu('show', {
                    left : event.pageX,
                    top : event.pageY
                });
            }
        });
    }
});


// 使用
$('#tt').datagrid({  
//    url: 'datagrid_data3.json',  
    title: 'DataGrid',  
    width: 700,  
    height: 220,  
    fitColumns: true,  
    nowrap:false,  
    rownumbers:true,  
    showFooter:true,  
    columns:[[
        {field:'itemid',title:'Item ID',width:80},  
        {field:'productid',title:'Product ID',width:120},  
        {field:'listprice',title:'List Price',width:80,align:'right'},  
        {field:'unitcost',title:'Unit Cost',width:80,align:'right'},  
        {field:'attr1',title:'Attribute',width:250, hidden:true},  
        {field:'status',title:'Status',width:60,align:'center'}  
    ]]
}).datagrid("showHideFieldsMenu");

// http://blog.csdn.net/qwlovedzm/article/details/6676525
// EasyUI 验证框使用方法:
/*****************************************************
missingMessage：未填写时显示的信息
validType：验证类型见下示例
invalidMessage：无效的数据类型时显示的信息
required="true" 必填项
class="easyui-validatebox" 文本验证
class="easyui-numberbox" 数字验证
*****************************************************/

// validator返回false时给出提示，如：
<input class="easyui-textbox" data-options="required:true,validType:['isBlank']">
// 若有多个校验时，可用数组表示，如：validType:['email','length[0,20]']


/**
 * validatebox扩展
 */
$.extend($.fn.validatebox.defaults.rules, {
	isInteger : {
		validator: function (value, param) {
            return /^\d+$/.test(value);
        },
        message: '请输入整数'
	},

	//增加去掉文本输入框前后空格扩展校验
	minLength: {
	    validator: function(value, param){
	        return $.trim(value).length >= param[0];
	    },
	    message: '该输入项为必输项'
	},
	
	length: {
	    validator: function(value, param){
	        var len=$.trim(value).length; 
	        return len>=param[0]&&len<=param[1]; 
	    },
        message:"输入长度必须介于{0}和{1}." 
	},
	
	isPositiveInteger : {
		validator: function (value, param) {
            return /^[1-9]\d*$/.test(value);
        },
        message: '请输入正整数'
	},
	
	numInteger: {
	    validator: function(value, param){
	        var len=$.trim(value).length; 
	        return len>=param[0]&&len<=param[1]; 
	    },
        message:"必须为{0}位整数." 
	},
	betweenValue: {
	    validator: function(value, param){
	        return value>=param[0]&&value<=param[1]; 
	    },
        message:"最大记录数只能为{0}至{1}的整数." 
	},
	emails: {
		validator: function(value, param){
			if(null == value || value == undefined || "" == value.trim() || "" == value){
				return true;
			}
			var reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
			var mail = value.split(",");
			var valid = true;
			for(var i=0 ;i < mail.length;i++){
				if("" != mail[i] ){
					valid=reg.test(mail[i]);
					if(! valid){
						break ;
					}
				}
			}
			return valid;
	    },
        message:"请输入有效电子邮件,多邮箱请用英文“,”隔开" 
	}

});

/**
 * 自定义datagrid编辑器
 * LG mis中的range编辑框：在同一单元格中显示两个文本框录入
 */
$.extend($.fn.datagrid.defaults.editors, {
	rangeEditor : {
		init : function(container, options) {
			var $editorContainer = $('<div/>');
			var $input = $('<input class="easyui-validatebox" type="text">').width(30);
			$editorContainer.append($input.clone()).append($("<span> - </span>")).append($input.clone());
			$editorContainer.appendTo(container);
			$editorContainer.find("input").validatebox({
				required: true,
				validType: "isInteger"
			});
			return $editorContainer;
		},
		getValue : function(target) {
			var inputArray = $(target).find("input");
			return $(inputArray[0]).val() + "-" + $(inputArray[1]).val();
		},
		setValue : function(target, value) {
			var inputArray = $(target).find("input");
			if(null == value || $.trim(value) == ""){
				$(inputArray[0]).val("");
				$(inputArray[1]).val("");
			}else{
				var index = value.indexOf("-");
				if(index < 0){
					$(inputArray[0]).val(value);
					$(inputArray[1]).val("");
				}else{
					$(inputArray[0]).val(value.substring(0, index));
					$(inputArray[1]).val(value.substring(index + 1));
				}
			}
		},
		resize : function(target, width) {
			if ($.boxModel == true) {
				$(target).width(width - ($(target).outerWidth() - $(target).width()) - 10);
			} else {
				$(target).width(width - 10);
			}
		}
	}
});