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

有两种方式实现,一种方式是在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);
			}
		}
	}
});



郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。