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);  
            }  
        }  
    }  
});


赞(52) 打赏
未经允许不得转载:优客志 » 前端设计
分享到:

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏