JQuery easyui datagrid 单元格编辑时，使用浮动的textarea文本框并进行数据校验

标签：jquery

有两种方式实现，一种方式是在html中验证，一种方式是在js中进行验证

方式一：

 <th data-options="filed:‘remark‘,width:200,editor:{type:‘textarea‘}">备注</th> 

方式二：

<th data-options="filed:‘remark‘,width:200,editor:{type:‘textarea‘, options:{validType:‘maxLength[150]‘}}">备注</th>

// 长度校验
$.extend($.fn.validatebox.defaults.rules,{
	maxLength: {
  		validator: function(value, param){
  			if(value.length > param[0]){
  				return false;
  			}
  			return true;
  		},
  		message: "请输入的内容小于{0}个字符."
  	}
})   
// 解决datagrid中单击修改单元格时，textarea会自动将datagrid表格行撑大的问题
$.extend($.fn.datagrid.defaults.editors,{
	textarea: {
		init: function(container, options){
			// var input = $("<textarea class='datagrid-editable-input' style='position:absolute; padding:0px; margin-top:-12px; height:120px; resize:none;' data-options=\"required:true,validType:'maxLength[10]'\"></textarea>").validatebox(options).appendTo(container);
			var input = $("<textarea class='datagrid-editable-input' style='position:absolute; padding:0px; margin-top:-12px; height:120px; resize:none;'></textarea>").validatebox(options).appendTo(container);
		  		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);
			}
		}
	}
});

JQuery easyui datagrid 单元格编辑时，使用浮动的textarea文本框并进行数据校验

标签：jquery

原文地址：http://blog.csdn.net/xiaokui_wingfly/article/details/45117423