现在的位置: 首页 > easyui > Grid > datagrid > 正文
在可编辑表格中使用密码框
2012年11月19日 datagrid ⁄ 共 1318字 评论数 1 ⁄ 被围观 11,108 views+
文章目录
[隐藏]

网上有朋友询问到如何在可编辑表格中实现密码框,其实思路很简单:第一是生成type为password的input;第二是对生成好的input元素构建validatebox同时写入密码规则。

实现代码:

$.extend($.fn.datagrid.defaults.editors, {
	psw: {
		init: function(container, options) {
			var input = $('<input class="datagrid-editable-input" type="password"/>').appendTo(container);

			if(!$.fn.validatebox.defaults.rules.safepass) {
				$.extend($.fn.validatebox.defaults.rules, {
					safepass: {
						validator: function(value, param) {
							return !(/^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\}<>\?\\\/\'\"]*)|.{0,5})$|\s/.test(value));
						},
						message: '密码由字母和数字组成,至少6位'
					}
				});
			}

			input.validatebox(options);
			return input;
		},
		getValue: function(target) {
			alert($(target).val());
			alert(target.value);
			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);
			}
		}
	}
});

注意:对于validatebox的rules扩展写在editor内部了,拿到外面扩展rules也可以,效果是一样的;同时对于密码规则的正则表达式可自行修改定义。

如果想在非编辑状态也显示为*号,给密码字段加上一个formatter就可以了:

function PasswordFormatter(value) {
    return '******';
}

本想考虑着把两个密码框的校验也做进去,不过这样会使问题变得较为复杂,而且功能上也不是很需要,所以这个地方目前就实现了简单的功能。

使用方式:

<th data-options="field:'password',width:150,align:'center',editor:{type:'psw',options:{validType:'safepass',required:true}}">密码</th>

目前有 1 条留言 其中:访客:0 条, 博主:0 条 引用: 1

    给我留言

    留言无头像?


    ×