首页 > Web开发 > 详细

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

时间:2015-04-18 23:45:33      阅读:1013      评论:0      收藏:0      [点我收藏+]

有两种方式实现,一种方式是在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文本框并进行数据校验

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!