目录

1. 目标：要实现的效果

2. 相关定义

2.1. 右击菜单定义

2.2. Field 定义

2.3. 重写 Text Editors

2.4. 扩展datagrid 方法 

3. 具体事件方法

1. 目标：要实现的效果

1.  单击编辑表格
2. 右击，弹出右击菜单
3. 编辑后自动保存数据

2. 相关定义

2.1. 右击菜单定义

采用 class="easyui-menu" 定义，增加点击事件TE()

<div id="rightClickMenu" class="easyui-menu" style="width: 80px; display: none;">   
    <div id="btn_intro" data-options="iconCls:'icon-ok'" onClick="TE()">右击</div>
</div>

2.2. Field 定义

 [{field:'EZLPlan',title:'编辑内容',width:200,
        editor:{
	        	type:'text',
	        	options:{
		        	//required:true,
		        	//height:'200px'
		        }
	     }
        
  }],
 onClickCell:onClickCell,
 onAfterEdit:afterEdit

2.3. 重写 Text Editors

$.extend($.fn.datagrid.defaults.editors, {
	    text: {
	        init: function (container, options) {
	            var input = $('<textarea style="height:100px">').appendTo(container);
	            //var input = container.append($('<textarea style="height:100px">'));
	            curElement = input[0];
	            input.bind('contextmenu', function (e) {
	                e.preventDefault();
	                $('#rightClickMenu').menu('show', {
	                    left: e.pageX,
	                    top: e.pageY
	                });
	            });
	            input.mouseup(function (e) {
	            	curElement = e.target;
	            	window.clipboardContent = getSelectionText(e.target);
	            	//console.log(window.clipboardContent);
	        	});
	            return input;
	        },
	        getValue: function (target) {
	            return $(target).val();
	        },
	        setValue: function (target, value) {
	            $(target).val(value);
	        },
	        resize: function (target, width) {
	            var input = $(target);
	            if ($.boxModel == true) {
	                input.width(width - (input.outerWidth() - input.width()));
	            } else {
	                input.width(width);
	            }
	        }
	    }
	});

2.4. 扩展datagrid 方法 

•  为datagrid表格 扩展 editCell方法

$.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);
	            for (var i = 0; i < fields.length; i++) {
	                var col = $(this).datagrid('getColumnOption', fields[i]);
	                col.editor = col.editor1;
	            }
	        });
	    }
	});

3. 具体事件方法

var editIndex = -1;
var editField = "";
var curElement = null;

function onClickCell(index, field,value) {
	//if ((editIndex >= 0)&& ((editIndex != index)||(field!=editField))) {
	if (editIndex >= 0)  {
        PageLogicObj.m_ItemGrid.endEdit(editIndex)
        editIndex = -1;
		editField="";
        curElement = null;
    }
    onDBClickCell(index, field,value);
}

function onDBClickCell(index, field,value) {
	var selected = PageLogicObj.m_ItemGrid.getSelected();
	/*if(selected && selected.Status == "D"){
		$.messager.popover({ msg: '已删除记录不能编辑', type: 'alert' });
        return;
	}*/
    if (editIndex < 0) {
	    PageLogicObj.m_ItemGrid.selectRow(index)
	    PageLogicObj.m_ItemGrid.editCell({
		    index: index,
            field: field
		})
        editIndex = index;
        editField=field;
    }
}

function afterEdit(index, row, changes) {
    var _key=""
    console.log(row)
    for(var key in changes)
    {
		_key=key   
	} 
    if(_key!="")
    {
		var _value=changes[_key]
		console.log(_value)
		$.m({
			ClassName:"DHCDoc.PW.BS.NSubExt",
			MethodName:"EditContent",
			UserId:session['LOGON.USERID'],
			SID:row.SID,
			ZLPlan:row.EZLPlan,
			BCNote:row.SubmitContent
		},function(data){
			data = data.split("^")
			if(data[0]==1)
			{
				$.messager.popover({msg: '保存成功！',type:'success',timeout: 1000});				
			}else
			{
				$.messager.popover({msg: data[1],type:'alert',timeout: 1000});
			}
			PageLogicObj.m_ItemGrid.reload();
			$("td").removeClass("datagrid-value-changed");
		});	
	}
}
	
function referHandler() {
    if (editIndex < 0) {
        return;
    }
    var row = PageLogicObj.m_ItemGrid.getRows()[editIndex];
    var EpisodeID = row.EpisodeID;
    var PatientID=""
    var url="dhcem.patemrque.csp?&EpisodeID="+EpisodeID+"&PatientID="+PatientID+"&targetName=Attitude"+"&TextValue="; //+obj.text;
   
   	window.parent.parent.InsQuote = function (result) {
			websys_showModal("close");
			 var curPosition = getCursortPosition(curElement);
    		updateRefer(curElement, result, curPosition);
		}
		
		
    websys_showModal({
			url:url,
			title:'引用',
			width:1300,height:600,
			CallBackFunc:function(result){
				websys_showModal("close");
			}
		});
		

}
function getCursortPosition(obj) {
    var cursorIndex = 0;
    if (document.selection) {
        // IE Support
        obj.focus();
        var range = document.selection.createRange();
        range.moveStart('character', -obj.value.length);
        cursorIndex = range.text.length;
    } else if (obj.selectionStart || obj.selectionStart == 0) {
        // another support
        cursorIndex = obj.selectionStart;
    }
    return cursorIndex;
}
function updateRefer(curElement, editContent, curPosition) {
    var startText = curPosition == 0 ? '' : curElement.value.substring(0, curPosition);
    if (startText.trim() == '/') {
        startText = '';
    }
    var endText = curElement.value.substring(curPosition);
    curElement.value = startText + editContent + endText;
}