关于easyuivalidatebox验证和easyui自定义验证的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于EasyUIdatagriddatetimebox扩展、Easyuidat
关于easyui validatebox验证和easyui自定义验证的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于EasyUI datagrid datetimebox 扩展、Easyui datagrid editor 修改DateBox 返回值格式、easyui datagrid的editor编辑器如何为validatebox控件添加改变事件、easyui datebox 只读设置等相关知识的信息别忘了在本站进行查找喔。
本文目录一览：- easyui validatebox验证（easyui自定义验证）
- EasyUI datagrid datetimebox 扩展
- Easyui datagrid editor 修改DateBox 返回值格式
- easyui datagrid的editor编辑器如何为validatebox控件添加改变事件
- easyui datebox 只读设置
easyui validatebox验证（easyui自定义验证）
<div>
<prehttps://www.jb51.cc/tag/rush/" target="_blank">rush:xhtml;">
<html xmlns="http://www.w3.org/1999/xhtml">
网址验证：
长度验证：
手机验证：
邮编验证：
账号验证：
汉字验证：
远程验证：用户名已存在"/>
EasyUI datagrid datetimebox 扩展
在用 EasyUI 做东西，有的地方需要日期携带时间的控件。各种蛋疼让我受不了，自己就挠着自己的猴脑，折腾了半天，终于折腾出来了！
继承 EasyUI 进行扩展自定义的格式
/** 扩展自定义的日期类 ***/
$.fn.datebox.defaults.formatter = function(date){
var y = date.getFullYear();
var m = date.getMonth()+1;
var d = date.getDate();
var h = date.getHours() > 9 ? date.getHours() : ''0''+date.getHours();
var mm = date.getMinutes() > 9 ? date.getMinutes() : ''0''+date.getMinutes();
var s = date.getSeconds() > 9 ? date.getSeconds() : ''0''+date.getSeconds();
return y+''-''+m+''-''+d+'' ''+h+":"+mm+":"+s;
}
// 时间格式化
Date.prototype.format = function(format){
if(!format){
format = "yyyy-MM-dd hh:mm:ss";
}
var o = {
"M+": this.getMonth() + 1, // month
"d+": this.getDate(), // day
"h+": this.getHours(), // hour
"m+": this.getMinutes(), // minute
"s+": this.getSeconds(), // second
"q+": Math.floor((this.getMonth() + 3) / 3), // quarter
"S": this.getMilliseconds()
// millisecond
};
if (/(y+)/.test(format)) {
format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
}
for (var k in o) {
if (new RegExp("(" + k + ")").test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" +o[k]).length));
}
}
return format;
};
/*** 扩展 editors 的 datetimebox 方法 *****/
$.extend($.fn.datagrid.defaults.editors, {
numberspinner: {
init: function(container, options){
var input = $(''<input type="text">'').appendTo(container);
return input.numberspinner(options);
},
destroy: function(target){
$(target).numberspinner(''destroy'');
},
getValue: function(target){
return $(target).numberspinner(''getValue'');
},
setValue: function(target, value){
$(target).numberspinner(''setValue'',value);
},
resize: function(target, width){
$(target).numberspinner(''resize'',width);
}
},
datetimebox: {//datetimebox 就是你要自定义 editor 的名称
init: function(container, options){
var editor = $(''<input />'').appendTo(container);
editor.enableEdit = false;
editor.datetimebox(options);
return editor;
},
getValue: function(target){
var new_str = $(target).datetimebox(''getValue'').replace(/:/g,''-'');
new_str = new_str.replace(/ /g,''-'');
var arr = new_str.split("-");
var datum = new Date(Date.UTC(arr[0],arr[1]-1,arr[2],arr[3]-8,arr[4],arr[5]));
var timeStamp = datum.getTime();
return new Date(timeStamp).format("yyyy-MM-dd hh:mm:ss");
//return timeStamp;
},
setValue: function(target, value){
if(value)
$(target).datetimebox(''setValue'',new Date(value).format("yyyy-MM-dd hh:mm:ss"));
else
$(target).datetimebox(''setValue'',new Date().format("yyyy-MM-dd hh:mm:ss"));
},
resize: function(target, width){
$(target).datetimebox(''resize'',width);
},
destroy: function(target){
$(target).datetimebox(''destroy'');
}
}
});
具体用法：
{field:''bidDate'',title:'' 报价日期 '',width:100,align:''center'',sortable:true, editor:{
type:''datebox'',
options:{
editable:false,
showSeconds: true,
okText:'' 确定''
}
}
},
{field:''bidDate'',title:'' 报价日期 '',width:100,align:''center'',sortable:true, editor:{
type:''datetimebox'',
options:{
editable:false,
showSeconds: true,
okText:'' 确定''
}
}
},
Easyui datagrid editor 修改DateBox 返回值格式
见到http://www.jeasyuicn.com/post-3.html 写的这个自定义的扩展。和要达到的效果不理想。
1999-01-02 -----------》 1999.01.02
有好多办法：
1.上面的扩展插件是最理想的，只是那源码没公开，不知道里面会遇到什么问题。所以采用返回格式设置。
2.在源码包 local文件夹里面找到easyui-lang-zh_CN.js 直接修改格式，（侵入性比较高）
3.定义公公的修改js如demo中dateboxformat：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Date Format - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Date Format</h2>
<p>Different date formats are applied to different DateBox components.</p>
<div ></div>
<input ></input>
<input data-options="formatter:myformatter,parser:myparser"></input>
<script type="text/javascript">
function myformatter(date){
var y = date.getFullYear();
var m = date.getMonth()+1;
var d = date.getDate();
return y+''-''+(m<10?(''0''+m):m)+''-''+(d<10?(''0''+d):d);
}
function myparser(s){
if (!s) return new Date();
var ss = (s.split(''-''));
var y = parseInt(ss[0],10);
var m = parseInt(ss[1],10);
var d = parseInt(ss[2],10);
if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
return new Date(y,m-1,d);
} else {
return new Date();
}
}
</script>
</body>
</html>比较推荐第三种。低侵入。
例如;
{field:''logDate'',title:''时间'',width:100,editor:{type:''datebox'',options:{required:true,formatter:myformatter,parser:myparser}}}达到要求了。呵呵，编程真愉快。
easyui datagrid的editor编辑器如何为validatebox控件添加改变事件
项目中需要为行编辑器Editor的某个列的文本框添加改变事件
需求：新增行时，为用户名输入特殊字符进行验证，不允许保存用户数据
html页面
<table id="gridlist" data-bind="datagrid:grid" >
<thead>
<tr>
<th field="ck" checkbox="true" readOnly:true ></th>
<th field="OptimisticLockField" hidden="true"></th>
<th field="UserCode" sortable="true" align="left" width="80" editor="{type:''validatebox'',options:{required: true }}" >用户名 </th>
<th field="UserName" sortable="true" align="left" width="200" editor="{type:''validatebox'',options:{required: true }}" >名称 </th>
<th field="OriginalPassword" sortable="true" align="left" width="200" >密码 </th>
<th field="Org" sortable="true" align="left" width="200" editor="{type:''lookup'',options:{required:true,lookupType:''cloud.PcsOrg'',window:{title:''所属机构''},queryParams:{State:9,Ou:false}}}" formatter="formatOrg" >所属机构 </th>
<th field="IsEnable" sortable="true" align="center" width="120" editor="{type:''checkbox'',options:{on:1,off:0}}" formatter="com.formatCheckbox" >是否可用</th>
<th field="IsAdmin" align="center" width="120" editor="{type:''checkbox'',options:{on:1,off:0}}" formatter="com.formatCheckbox">是否管理员</th>
<th field="LoginCount" sortable="true" align="right" width="120" >登录次数</th>
<th field="LastLoginDate" sortable="true" align="left" width="135" formatter="com.formatDate">最后登录日期</th>
<th field="LastLoginOU" align="left" width="170" hidden="true" >最后登录组织</th>
<th field="OrganizeNames" align="left" width="170">最后登录组织</th>
<th field="Permit" align="center" width="320" formatter="formatterButton"> 操作 </th>
<th field="Description" align="left" width="150" editor="text">描述</th>
</tr>
</thead>
</table>js代码：
//创建editor编辑器之后执行事件
this.grid.OnAfterCreateEditor = function (editors,row) {
//编辑器userCode添加改变事件
if (row != undefined && row._isnew!=undefined) {
editors["UserCode"].target.bind("change",function()
{
var getUser = editors["UserCode"].target.val();
//判断新增状态下用户名只能使用数字或着字母或着下划线
if (!/^[\w]+$/.test(getUser)) {
com.message(''error'', ''用户名只能数字、字母、下划线.'');
return;
}
});
}
}页面效果：
总结：
使用easyui的datagrid的OnAfterCreateEditor事件，通过 editors["UserCode"].target.bind("change",function(){ } 绑定改变事件，其中获取文本框的值的语法是：
editors["UserCode"].target.val();
//创建editor编辑器之后执行事件
this.grid.OnAfterCreateEditor = function (editors,row) {
//编辑器userCode添加改变事件
if (row != undefined && row._isnew!=undefined) {
editors["UserCode"].target.bind("change",function()
{
var getUser = editors["UserCode"].target.val();
//判断新增状态下用户名只能使用数字或着字母或着下划线
if (!/^[\w]+$/.test(getUser)) {
com.message(''error'', ''用户名只能数字、字母、下划线.'');
return;
}
});
}
}
easyui datebox 只读设置
easyui datebox设置为不可手动输入内容，只能点击选择：
<inputdata-options="editable:false" />解释：
datebox是继承combo的，combo里有这个属性。
今天关于easyui validatebox验证和easyui自定义验证的介绍到此结束，谢谢您的阅读，有关EasyUI datagrid datetimebox 扩展、Easyui datagrid editor 修改DateBox 返回值格式、easyui datagrid的editor编辑器如何为validatebox控件添加改变事件、easyui datebox 只读设置等更多相关知识的信息可以在本站进行查询。
本文标签：
