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