7.1、ValidateBox(表单验证)
使用validType属性指定验证方法
1、标签方式创建
<input type="text" class="easyui-validatebox" data-options="required:true,validType:'email'" />
2、js方式添加表单验证
$("#inp").validatebox({
required: true,
validType: 'email'
});
7.1.1ValidateBox属性方法说明
属性说明
required:是否必填
validType验证类型
delay延迟验证
missingMessage:内容为空的文本提示
invalidMessage:内容无效的文本提示
tipPosition:提示框显示位置,默right.可选值left、right
方法说明
destroy:删除销毁组件
validate:执行验证
isValid:执行验证,并返回true或者false
7.1.2、自定义验证规则
easyui已经定义好了email、url、length[0,100]、remote['url','paramName']
通过继承$.fn.validatebox.defaults.rules来重写我们的验证规则,具体做法如下
$.extend($.fn.validatebox.defaults.rules, {
pwd: {
validator: function (value, param) {
return value.length >= param[0]&&value.length<=param[1];
},
message: '输入至少{0}个字符.最多{1}个字符'
}
});
7.2、Combo（自定义下拉框）
自定义下拉框显示一个可编辑的文本框和下拉面板在html页面。这是构建其他复杂的组合部件（如：combobox,combotree,combogrid等）之前需要构建的最基本的组件。
自定义下拉框使用Javascript创建一个<select>或<input>元素。注意：使用自定义下拉框不能通过标签的方式进行创建。
$('#cc').combo({
required: true,
editable: false
});
$('#sp').appendTo($('#cc').combo('panel'));
$('#sp input').click(function () {
var v = $(this).val();
var s = $(this).next('span').text();
$('#cc').combo('setValue', v).combo('setText', s).combo('hidePanel');
});
<div id="sp">
<div style="color: #99BBE8; background: #fafafa; padding: 5px;">选择编程语言</div>
<input type="radio" name="lang" value="01" /><span>Java</span><br />
<input type="radio" name="lang" value="02" /><span>C#</span><br />
<input type="radio" name="lang" value="03" /><span>Ruby</span><br />
<input type="radio" name="lang" value="04" /><span>Basic</span><br />
<input type="radio" name="lang" value="05" /><span>Fortran</span>
</div>
combo的使用比较麻烦，不能直接设置数据，在实际的开发中我们也不会使用combobox来做下拉选择框
7.2.1、Combo-属性说明
宽
height :高
panelWidth:下拉面板的宽
panelHeight:下拉面板的高
multiple :是否支持多选
separator:多选时候的文本分割符
editable:启用
disabled:禁用
hasDownArrow:是否显示向下箭头
value:设置初始值
delay:输入搜索延迟时间，
keyHandler:用户按键函数
7.2.2Combo-方法
panel:返回下拉面板对象
textbox:返回文本框对象
showPanel:显示下拉面板
hidePanel:隐藏下拉面板
validate :执行验证
isValid:执行验证，并返回true、false结果
clear:清除文本框值
reset:重置文本框值
getText:得到文本框值
setText:设置文本框值
getValues:得到多个值
setValues:设置多个值
getValue:得到一个值
setValue:设置一个值
7.3、ComboBox-下拉选择框
ComboBox创建方式有三种，<select>标签，<input >输入框 ，js方式创建
下拉框方式（推荐使用这种）
<select id="sel" class="easyui-combobox" style="200px;">
<option value="aa">下拉1</option>
<option>下拉2</option>
<option>下拉3</option>
<option>下拉4</option>
<option>下拉5</option>
</select>
input方式
<input id="input_select" class="easyui-combobox" data-options="valueField:'id',textField:'text',url:select_data.json'" />
Js方式
$('#cc').combobox({
url:‘select_data.json',
valueField:'id',
textField:'text' });
7.3.1、ComboBox-属性说明
ComboBox 除了继承所有的Combo属性外还有一部分自己的属性，说明如下:
valueField:显示隐藏字段
textField：显示字段
mode:数据加载方式，remote远程模式、local本地模式
url:远程加载地址
method:请求方法，post、get
data:第一加载数据,data:[{}]
filter:设置本地数据过滤方法？
formatte:格式化行的显示
loader:定义远程加载方法，参数为param,success(data),error()
7.3.2、ComboBox方法、事件
事件(包含Combo事件):
onShowPanel：显示下拉面板时候触发
onHidePanel:隐藏面板时触发
onChange:内容改变时触发
onBeforeLoad:加载前触发，参数:param
onLoadSuccess:加载成功时候触发
onLoadError：加载出错的时候触发
onSelect:选择一项时候触发
onUnselect:取消选择的时候触发
方法:
getData():返回加载成功的数据
loadData(data):加载本地数据
reload(url):重新加载数据
setValues(array):设置一个数组
setValue(value):设置值
clear():清除值
select(value):选择指定项
unselect(value):取消指定项
7.4、Spinner(微调器)
spinner只能使用js方式创建
<input id="ss" value="2" />
$('#ss').spinner({
required: true,
increment: 10
});
7.4.1、Spinner--属性、方法、事件
组件的宽度
value:初始值
min:允许的最小值
max:允许的最大值。
increment:点击微调器按钮时的增量值。
editable:定义用户是否可以往文本域中直接输入值。
disabled:定义是否禁用文本域。
spin:function(down):当用户点击微调按钮时调用的函数。
destroy:销毁微调器组件。
resize:重设组件的宽度。
enable:启用组件。
disable:禁用组件。
getValue:获取组件的值。
setValue:设置组件的值。
clear:清除组件的值。
事件:
onSpinUp:当用户点击向上微调按钮时触发。
onSpinDown:当用户点击向下微调按钮时触发。
NumberSpinner（数字微调器）;
数字微调器的使用与Spinner的使用基本一样。属性、方法、事件都一样。NumberSpinner只有一个setValue方法
7.5、NumberBox(数字输入框)
disabled:定义是否禁用该域。
min:允许的最小值。
max:允许的最大值。
precision显示在小数点后面的最大精度。
decimalSeparator:整数与小数的分割符，默认"."
groupSeparator:千位分割符
prefix:前缀字符串
suffix:后缀字符串
formatter:格式化字符串，返回字符串，显示到输入框
parser:解析字符串
7.6、Calendar(日历)
1、html创建方式
<div class="easyui-calendar" ></div>
2、js创建方式
<div id="cc"></div>
$('#ccc').calendar();
calendar有一个onSelect事件,参数是一个date
$('#cc').calendar({
onSelect: function(date){
alert(date.getFullYear()+":"+(date.getMonth()+1)+":"+date.getDate());
}});
firstDay:设置一周是从星期几开始,星期天是0星期一是1
weeks:设置周如何显示
months:定义月如何显示
year:设置默认显示那一年
month:设置默认显示几月的日历
current:设置当前日期
7.7、DateBox(时间)、DateTimeBox(日期)
DateBox与DateTimeBox创建方式与Calendar的方式一样.
Datebox与DateTimeBox基本相似,datebox不包含时分秒,并且dateTimeBox是继承DateBox
使用panelWidth、panelHeight来时这种下拉面板的宽高,
使用currentText、closeText、okText分别设置选择当前时间、确定、取消按钮的文本
使用formatter属性格式化输入框的显示样式
同样他们都有一个onSelect方法
使用calendar与setValue获得日历对象和设置值,getValue得到值
通过属性showSeconds、timeSeparator这两属性分别设置
DateTimeBox组件是否显示秒默认值是true、时间之间分割符默认值
是":"
7.8、TimeSpinner(时间微调)
1、html创建方式
<input id="ss" class="easyui-timespinner" style=" 80px;"
required="required" data-options="min:'08:30',showSeconds:true" />
2、js创建方式
<input id="ss" style="80px;">
$('#ss').timespinner({
min: '08:30',
required: true,
showSeconds: true
});
7.8.1、TimeSpinner--属性方法
属性：
separator:分割符，默认":"
showSeconds:是否显示秒，默认false
highlight :设置光标初始位置，0=小时，1=分钟，2=秒
方法:
setValue (value):设置时间，$('#ss').timespinner('setValue', '17:45');
getValue:得到值
getHours:得到当前时间的小时数
getMinutes:得到当前时间的分钟数
getSeconds:得到当前时间的秒数
7.9、Slider--滑块
Slider创建方式有三种，一、<input>方式 二、<div/> 三、js 方式，下面代码是input创建方式
<input class="easyui-slider" value="5" style=" 300px;"
data-options="showTip:true,rule:[0,'|',10,'|',20,'|',30,'|',40,'|',50,'|',60,'|',70,'|'
,80,'|',90,'|',100]" />
7.9.1、Slider--属性
width宽度
height高度.
mode:的类型., 'h'(水平),'v'(垂直)
reversed:最大值与最小值位置交换
showTip:是否显示提示信息。
value:设置默认值
min:最小值.
max:最大值.
step:步长
rule 刻度标签, '|' 在刻度的旁边显示.
tipFormatter:格式化 tip提示的方法
事件:
onChange(newValue, oldValue):值发生改变时候触发
onSlideStart(value):滑块开始滑动时候触发
onSlideEnd(value):滑块结束滑动时候触发
7.10、Form(表单)
上面我们介绍了easyui扩展的一些表单控件。同时easyui也提供了表单操作方法，比如加载数据，检查数据，提交表单
$('#ff').form('submit', {
url:"请求地址"
success: function(data){
"请求成功......“
}
});
通过上面代码，我们把id为ff的表单提交到指定的地址，使用success函数处理请求成功户的操作