jquery easy ui 1.3.4 表单（7）

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-属性说明

width:宽

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="width: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--属性、方法、事件

width:组件的宽度

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="width: 80px;"

required="required" data-options="min:'08:30',showSeconds:true" />

2、js创建方式

<input id="ss" style="width: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="width: 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函数处理请求成功户的操作