码迷，mamicode.com
首页 > 其他好文 > 详细

EasyUI笔记（五）表单

时间：2017-07-08 12:25:26      阅读：296      评论：0      收藏：0      [点我收藏+]

标签：hid   前缀   tor   解析   image   地址   prefix   不能   cal   

本系列只列出一些常用的属性、事件或方法，具体完整知识请查看API文档

Form（表单）

创建一个简单的HTML表单。构建一个包含id、action和method值的表单元素。
  1. <form id="ff" method="post">   
  2.     <div>   
  3.         <label for="name">Name:</label>   
  4.         <input class="easyui-validatebox" type="text" name="name" data-options="required:true" />   
  5.     </div>   
  6.     <div>   
  7.         <label for="email">Email:</label>   
  8.         <input class="easyui-validatebox" type="text" name="email" data-options="validType:‘email‘" />   
  9.     </div>   
  10.     ...    
  11. </form>

属性

属性名属性值类型描述默认值
urlstring提交表单动作的URL地址null

 

事件

事件名参数描述
onSubmitparam在提交之前触发，返回false可以终止提交。
successdata在表单提交成功以后触发。
onBeforeLoadparam在请求加载数据之前触发。返回false可以停止该动作。
onLoadSuccessdata在表单数据加载完成后触发。
onLoadErrornone在表单数据加载出现错误的时候触发。

ValidateBox（验证框）

validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效。如果用户输入了无效的值，它将会更改输入框的背景颜色，并且显示警告图标和提示信息。该验证框可以结合form(表单)插件并防止表单重复提交。

技术分享

通过标签创建验证框。

  1. <input id="vv" class="easyui-validatebox" data-options="required:true,validType:‘email‘" />
使用Javascript创建验证框。
  1. <input id="vv" />  
  1. $(‘#vv‘).validatebox({    
  2.     required: true,    
  3.     validType: ‘email‘   
  4. });
扩展规则
  1. $.extend($.fn.validatebox.defaults.rules,{
  2. 		equals:{
  3. 			validator:function(value,param){
  4. 				return value==param[0];
  5. 			},
  6. 			message:‘不等于5。‘
  7. 		}
  8. 	});
  9. 	
  10. 	$("#vv1").validatebox({
  11. 		required:true,
  12. 		//validType:‘equals[5]‘,
  13. 		validType:‘url‘,
  14. 		//delay:1000,
  15. 		missingMessage:‘不能为空‘,
  16. 		invalidMessage:‘请输入有效的网址。‘,		
  17. 	});

Combo（自定义下拉框）

自定义下拉框显示一个可编辑的文本框和下拉面板在html页面。这是构建其他复杂的组合部件（如：combobox,combotree,combogrid等）之前需要构建的最基本的组件。

技术分享

自定义下拉框使用Javascript创建一个<select>或<input>元素。注意：使用自定义下拉框不能通过标签的方式进行创建。

  1. <input id="combo-cc" >  
  2. <div id="combo-content">
  3. 		<div style="color:blue">select a language</div>
  4. 		<input type="radio" name="language" value="1"><span>Java</span><br/>
  5. 		<input type="radio" name="language" value="2"><span>C#</span><br/>
  6. 		<input type="radio" name="language" value="3"><span>Ruby</span><br/>
  7. 		<input type="radio" name="language" value="4"><span>Basic</span><br/>
  8. 		<input type="radio" name="language" value="5"><span>Fortran</span><br/>
  9. </div>
这里用appendTo给下拉面板添加数据源；并在单选框的点击事件中给下拉框添加数据。
  1. $("#combo-cc").combo({
  2. 		required:true,
  3. 		multiple:true,
  4. 		//width:100,
  5. 		//height:60,
  6. 		separator:‘;‘,
  7. 		editable:true,
  8. 		//readonly:true,
  9. 		//hasDownArrow:false,
  10. 		delay:1000,		
  11. 	});
  12. 	$("#combo-content").appendTo($("#combo-cc").combo("panel"));
  13. 	
  14. 	$("#combo-content input").click(function(){
  15. 		var v=$(this).val();	
  16. 		var t=$(this).next("span").text();
  17. 		$("#combo-cc").combo("setValue",v).combo("setText",t).combo("hidePanel");
  18. 	});

方法

自定义下拉框的方法扩展自validatebox(验证框)。自定义下拉框新增的方法如下：

方法名方法参数描述
optionsnone返回属性对象。
panelnone返回下拉面板对象。
textboxnone返回文本框对象。
destroynone销毁该组件。
resizewidth调整组件宽度。
showPanelnone显示下拉面板。
hidePanelnone隐藏下拉面板。
disablenone禁用组件。
enablenone启用组件。
readonlymode启用/禁用只读模式。（该方法自1.3.3版开始可用）

使用案例：

$(‘#cc‘).combo(‘readonly‘);		// 启用只读模式
$(‘#cc‘).combo(‘readonly‘, true);	// 启用只读模式
$(‘#cc‘).combo(‘readonly‘, false);	// 禁用只读模式
validatenone验证输入的值。
isValidnone返回验证结果。
clearnone清除控件的值。
resetnone重置控件的值。（该方法自1.3.2版开始可用）
getTextnone获取输入的文本。
setTexttext设置输入的文本。
getValuesnone获取组件值的数组。
setValuesvalues设置组件值的数组。
getValuenone获取组件的值。
setValuevalue设置组件的值。


ComboBox（下拉列表框）

下拉列表框显示一个可编辑文本框和下拉式列表，用户可以选择一个值或多个值。用户可以直接输入文本到列表顶部或选择一个或多个当前列表中的值。

技术分享

通过<select>元素创建一个预定义结构的下拉列表框。

  1. <select id="cc" class="easyui-combobox" name="dept" style="width:200px;">   
  2.     <option value="aa">aitem1</option>   
  3.     <option>bitem2</option>   
  4.     <option>bitem3</option>   
  5.     <option>ditem4</option>   
  6.     <option>eitem5</option>   
  7. </select>
通过<input>标签创建下拉列表框。
  1. $("#combobox-cc2").combobox({
  2. 		url:‘test.json‘,
  3. 		valueField:‘id‘,
  4. 		textField:‘text‘,
  5. 		//multiple:true,
  6. 		//separator:‘;‘
  7. 		groupField:‘type‘,
  8. 		groupFormatter:function(group){
  9. 			return ‘<span style="color:red">‘+group+‘</span>‘;
  10. 		}
  11. 	});

ComboTree（树形下拉框）

树形下拉框结合选择控件和下拉树控件。它与combobox(下拉列表框)类似，但是将下拉列表框的列表替换成了树形控件。该控件支持树状态复选框，方便多选操作。

技术分享 
使用标签创建树形下拉框。
  1. <select id="combotree-cc1" class="easyui-combotree" style="width:200px;"   
  2.         data-options="url:‘test.json‘,required:true"></select>

属性

树形下拉框属性扩展自combo(自定义下拉框)和tree(树形控件)，树形下拉框重写的属性如下：

属性名属性值类型描述默认值
editableboolean定义用户是否可以直接输入文本到字段中。false

 

 

 

 

事件

该控件的事件完全继承自combo(自定义下拉框)和tree(树形控件)。


ComboGrid（数据表格下拉框）

数据表格下拉框结合了可编辑文本框控件和下拉数据表格面板控件，该控件允许用户快速查找和选择，并且该控件提供了键盘导航支持，对行进行筛选。

技术分享

使用标签创建一个数据表格下拉框。

  1. <select id="cc" class="easyui-combogrid" name="dept" style="width:250px;"   
  2.         data-options="    
  3.             panelWidth:450,    
  4.             value:‘006‘,    
  5.             idField:‘code‘,    
  6.             textField:‘name‘,    
  7.             url:‘datagrid_data.json‘,    
  8.             columns:[[    
  9.                 {field:‘code‘,title:‘Code‘,width:60},    
  10.                 {field:‘name‘,title:‘Name‘,width:100},    
  11.                 {field:‘addr‘,title:‘Address‘,width:120},    
  12.                 {field:‘col4‘,title:‘Col41‘,width:100}    
  13.             ]]    
  14.         "></select>
使用Javascript通过已经定义的<select>或<input>标签来创建数据表格下拉框。
  1. $(‘#cc‘).combogrid({    
  2.     panelWidth:450,    
  3.     value:‘006‘,    
  4.      
  5.     idField:‘code‘,    
  6.     textField:‘name‘,    
  7.     url:‘datagrid_data.json‘,    
  8.     columns:[[    
  9.         {field:‘code‘,title:‘Code‘,width:60},    
  10.         {field:‘name‘,title:‘Name‘,width:100},    
  11.         {field:‘addr‘,title:‘Address‘,width:120},    
  12.         {field:‘col4‘,title:‘Col41‘,width:100}    
  13.     ]]    
  14. });

NumberBox（数值输入框）

数值输入框是用来限制用户只能输入数值型数据的。他可以转换一个输入的元素到其他类型，比如：数字、百分比、货币等。更多的输入类型定义依赖于‘formatter‘和‘parser‘函数。

技术分享

使用标签创建数值输入框。

  1. <input type="text" class="easyui-numberbox" value="100" data-options="min:0,precision:2"></input>
使用Javascript创建数值输入框。
  1. $(‘#nn‘).numberbox({    
  2.     min:0,    
  3.     precision:2    
  4. });

属性

数值输入框的属性扩展自validatebox(验证框)，数值输入框新增的属性如下：

属性名属性值类型描述默认值
disabledboolean是否禁用该字段。false
valuenumber默认值。
minnumber允许的最小值。null
maxnumber允许的最大值。null
precisionnumber在十进制分隔符之后显示的最大精度。（即小数点后的显示精度）0
decimalSeparatorstring使用哪一种十进制字符分隔数字的整数和小数部分。.
groupSeparatorstring使用哪一种字符分割整数组，以显示成千上万的数据。(比如：99,999,999.00中的‘,‘就是该分隔符设置。)
prefixstring前缀字符。(比如：金额的$或者￥)
suffixstring后缀字符。(比如：后置的欧元符号€)
filterfunction(e)定义如何过滤按键，当返回true时则允许输入，反之禁止。（该属性自1.3.3版开始可用）
formatterfunction(value)用于格式化数值的函数。返回字符串值以显示到输入框中。
parserfunction(s)用于解析字符串的函数。返回数值。


DateBox（日期输入框）

日期输入框结合了一个可编辑的文本框控件和允许用户选择日期的下拉日历面板控件。选择的日期会自动转变为一个有效的日期然后填充到文本框中。选定的日期也可以被格式化为预定格式。

技术分享
使用标签创建日期输入框。
  1. <input id="dd" type="text" class="easyui-datebox" required="required"></input>
使用Javascript创建日期输入框。
  1. $(‘#dd‘).datebox({    
  2.     required:true   
  3. });

属性

日期输入框扩展自combo(自定义下拉框)，日期输入框新增的属性如下：

属性名属性值类型描述默认值
panelWidthnumber下拉日历面板宽度。180
panelHeightnumber下拉日历面板高度。auto
currentTextstring显示当天按钮。Today
closeTextstring显示关闭按钮。Close
okTextstring显示OK按钮。Ok
disabledboolean该属性值为true时禁用该字段。false
buttonsarray在日历下面的按钮。（该属性自1.3.5版开始可用）

代码示例：

var buttons = $.extend([], $.fn.datebox.defaults.buttons);
buttons.splice(1, 0, {
	text: ‘MyBtn‘,
	handler: function(target){
		alert(‘click MyBtn‘);
	}
});
$(‘#dd‘).datebox({
	buttons: buttons
});
sharedCalendarstring,selector将一个日历控件共享给多个datebox控件使用。（该属性自1.3.5版开始可用）

代码示例：

<input class="easyui-datebox" sharedCalendar="#sc">
<input class="easyui-datebox" sharedCalendar="#sc">
<div id="sc" class="easyui-calendar"></div>
null
formatterfunction该函数用于格式化日期，它有一个‘date‘参数并且会返回一个字符串类型的值。下面的一个例子展示了如何重写默认的formatter函数。
$.fn.datebox.defaults.formatter = function(date){
	var y = date.getFullYear();
	var m = date.getMonth()+1;
	var d = date.getDate();
	return m+‘/‘+d+‘/‘+y;
}
parserfunction该函数用于解析一个日期字符串，它有一个‘date‘字符串参数并且会返回一个日期类型的值。下面的一个例子展示了如何重写默认的parser函数。 
$.fn.datebox.defaults.parser = function(s){
	var t = Date.parse(s);
	if (!isNaN(t)){
		return new Date(t);
	} else {
		return new Date();
	}
}

DateTimeBox（日期时间输入框）

和日期输入框类似，日期时间输入框允许用户选择日期和指定的时间并按照指定的输出格式显示。相比日期输入框，它在下拉面板中添加了一个时间微调器。

技术分享
使用标签创建日期时间输入框。
  1. <input class="easyui-datetimebox" name="birthday"     
  2.         data-options="required:true,showSeconds:false" value="3/4/2010 2:3" style="width:150px">
使用Javascript创建日期时间输入框。
  1. $(‘#dt‘).datetimebox({    
  2.     value: ‘3/4/2010 2:3‘,    
  3.     required: true,    
  4.     showSeconds: false   
  5. });

Calendar（日历）

日历控件显示一个月的日历，允许用户选择日期和移动到下一个或上一个月。默认情况下，一周的第一天是周日。它可以通过设置‘firstDay‘属性的值来更改设置。

技术分享
使用标签创建日历。
  1. <div id="cc" class="easyui-calendar" style="width:180px;height:180px;"></div>
使用Javascript创建日历。
  1. <div id="cc" style="width:180px;height:180px;"></div>  
  1. $(‘#cc‘).calendar({    
  2.     current:new Date()    
  3. });

EasyUI笔记（五）表单

标签：hid   前缀   tor   解析   image   地址   prefix   不能   cal   

原文地址：http://www.cnblogs.com/iwsx/p/7136199.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！