Form 表单
用法
1. <form id="ff" method="post">
2. ...
3. </form>
使 form 成为 ajax 提交的 form 。
1. $('#ff').form({
2. url:...,
3. onSubmit: function(){
4. // 做某些检查
5. // 返回 false 来阻止提交
6. },
7. success:function(data){
8. alert(data)
9. }
10. });
11. // 提交 form
12. $('#ff').submit();
去做一个提交动作。
1. // 调用 form 插件的 'submit' 方法来提交 form
2. $('#ff').form('submit', {
3. url:...,
4. onSubmit: function(){
5. // 做某些检查
6. // 返回 false 来阻止提交
7. },
8. success:function(data){
9. alert(data)
10. }
11. });
特性
名称 | 类型 | 说明 | 默认值 |
url | string | 表单提交动作的 URL。 | null |
事件
名称 | 参数 | 说明 |
onSubmit | none | 提交前触发,返回 false 来阻止提交动作。 |
success | data | 当表单提交成功时触发。 |
onBeforeLoad | param | 发出请求加载数据之前触发。返回 false 就取消这个动作。 |
onLoadSuccess | data | 当表单数据加载时触发。 |
onLoadError | none | 加载表单数据时发生某些错误的时候触发。 |
方法
名称 | 参数 | 说明 |
submit | options | 做提交动作, options 参数是一个对象,它包含系列特性: |
load | data | 加载记录来填充表单。 |
clear | none | 清除表单数据。 |
validate | none | 进行表单字段验证,当全部字段都有效时返回 true 。这个方法和 validatebox 插件一起使用。 |
注意:Form表单用于提交数据,封装成POJOs对象,进行数据库的CRUD操作。使用Form表单进行提交数据,常使用Validate进行表单验证,以使数据格式正确。
ValidateBox验证框
用 $.fn.validatebox.defaults 重写了 defaults。
用法
1. <input id="vv" required="true" validType="email">
1. $('#vv').validatebox({
2. required:true
3. });
验证规则
验证规则是通过使用 required 和 validType 特性来定义的, 这里是已经实施的规则:
- email:匹配 email 正则表达式规则
- url:匹配 URL 正则表达式规则
- length[0,100]:允许从 x 到 y 个字符
- remote['http://.../action.do','paramName']:发送 ajax 请求来验证值,成功时返回 'true' 。
要自定义验证规则,重写 $.fn.validatebox.defaults.rules ,来定义一个验证函数和无效的信息。例如,定义一个 minLength 验证类型:
<script type = "text/javascript">
1. $.extend($.fn.validatebox.defaults.rules, { 解释,第一个参数表示通过$.extend重写了一个默认的validatebox方法。第二个参数是一个Json对象,对象的值也是一个Json对象。
2. minLength: {
3. validator: function(value, param){
4. return value.length >= param[0];
5. },
6. message: 'Please enter at least {0} characters.'
7. }
8. });
</script>
现在你可以使用这个 minLength 验证类型,去定义一个至少输入5个字符的输入框:
1. <input class="easyui-validatebox" validType="minLength[5]">
特性
名称 | 类型 | 说明 | 默认值 |
required | boolean | 定义是否字段应被输入。 | false |
validType | string | 定义字段的验证类型,比如 email、url,等等。 | null |
missingMessage | string | 当文本框是空时出现的提示文字。 | This field is required. |
invalidMessage | string | 当文本框的内容无效时出现的提示文字。 | null |
方法
名称 | 参数 | 说明 |
destroy | none | 移除并且销毁这个组件。 |
validate | none | 进行验证以判定文本框的内容是否有效。 |
isValid | none | 调用 validate 方法并且返回验证结果,true 或者 false。 |
使用validatebox进行表单验证,可以创建自己 自定义验证规则,重写 $.fn.validatebox.defaults.rules ,$.extend($.fn.validatebox.defaults.rules,{
midLength:{
validator:function(value,param){
return value.length >= param[0] && value.length <= param[1];
},
message :'用户名必须在2到五个字符之间!'
};
})
<td> <input type ="text" name="username" class="easyui-validatebox"required="true" validType="midLength[2,5] value= """/></td>
如何对年龄进行校验:
NumberBox数字框
扩展自 $.fn.validatebox.defaults,用 $.fn.numberbox.defaults 重写了 defaults 。
依赖
- validatebox
用法
1. <input type="text" id="nn"></input>
1. $('#nn').numberbox({
2. min:0,
3. precision:2,
requird:true
4. });
特性
其特性扩展自 validatebox,下列是为 numberbox 增加的特性。
名称 | 类型 | 说明 | 默认值 |
disabled | boolean | 定义是否禁用该域。 | false |
min | number | 允许的最小值。 | null |
max | number | 允许的最大值。 | null |
precision | number | 显示在小数点后面的最大精度。 | 0 |
方法
其方法扩展自 validatebox,下列是为 numberbox 追加或重写的方法。
名称 | 参数 | 说明 |
disable | none | 禁用该域。 |
enable | none | 启用该域。 |
fix | none | 把值固定为有效的值。 |
如何对日期进行校验:
DateBox日期框
扩展自 $.fn.combo.defaults。用 $.fn.datebox.defaults 重写了 defaults。
依赖
- combo
- calendar
用法
1. <input id="dd" type="text"></input>
1. $('#birthday').datebox({ //通过id选择器,选中出生日期,添加配置项
2. required:true ,
missingMessage ''生日必填"
3. });
特性
其特性扩展自 combo,下列是为 datebox 增加的特性。
名称 | 类型 | 说明 | 默认值 |
panelWidth | number | 下拉日历面板的宽度。 | 180 |
panelHeight | number | 下拉日历面板的高度。 | auto |
currentText | string | 当前日期按钮上显示的文字。 | Today |
closeText | string | 关闭按钮上显示的文字。 | Close |
okText | string | 确定按钮上显示的文字。 | Ok |
disabled | boolean | 为 true 时禁用该域。 | false |
formatter | function | 格式化日期的函数,此函数有一个 'date' 参数,并返回一个字符串值。 |
|
parser | function | 解析日期字符串的函数,此函数有一个 'date' 字符串参数,并返回一个日期值。 |
|
事件
名称 | 参数 | 说明 |
onSelect | date | 当用户选择一个日期时触发。 |
方法
其方法扩展自 combo,下列是为 datebox 重写的方法。
名称 | 参数 | 说明 |
options | none | 返回 options 对象。 |
calendar | none | 获取 calendar 对象。 |
setValue | value | 设置 datebox 的值。 |
<td>出生日期</td>
<td><input id ="birthday" type ="text" name-"birthday" value = "" /></td>
- combo组合
扩展自 $.fn.validatebox.defaults 。 用 $.fn.combo.defaults 重写了 defaults 。
依赖
- validatebox
- panel
用法
1. <input id="cc" value="001">
2. <select id="cc"></select>
1. $('#cc').combo({
2. required:true,
3. multiple:true
4. });
特性
其特性扩展自 validatebox,下列是为 combo 增加的特性:
名称 | 类型 | 说明 | 默认值 |
Width | number | 组件的宽度。 | auto |
panelWidth | number | 下拉面板的宽度。 | null |
panelHeight | number | 下拉面板的高度。 | 200 |
multiple | boolean | 定义是否支持多选。 | false |
separator | string | 多选时文本的分隔符。 | , |
editable | boolean | 定义是否用户可以往文本域中直接输入文字。 | true |
disabled | boolean | 定义是否禁用文本域。 | false |
hasDownArrow | boolean | 定义是否显示向下箭头的按钮。 | true |
Value | string | 默认值。 |
|
Delay | number | 从最后一个键的输入事件起,延迟进行搜索。 | 200 |
keyHandler | object | 当用户按键后调用的函数。默认的 keyHandler 像这样定义: keyHandler: { up: function(){}, down: function(){}, enter: function(){}, query: function(q){} } |
|
事件
说明 | 参数 | 说明 |
onShowPanel | none | 当下拉面板显示的时候触发。 |
onHidePanel | none | 当下拉面板隐藏的时候触发。 |
onChange | newValue, oldValue | 当文本域的值改变的时候触发。 |
方法
其方法扩展自 validatebox,下列是为 combo 增加的方法。
名称 | 参数 | 说明 |
options | none | 返回选项(options)对象。 |
panel | none | 返回下拉面板对象。 |
textbox | none | 返回文本框对象。 |
destroy | none | 销毁组件。 |
resize | width | 调整组件的宽度。 |
showPanel | none | 显示下拉面板。 |
hidePanel | none | 隐藏下拉面板。 |
disable | none | 禁用组件。 |
enable | none | 启用组件。 |
validate | none | 验证输入的值。 |
isValid | none | 返回验证结果。 |
clear | none | 清除组件的值。 |
getText | none | 获取输入的文本。 |
setText | text | 设置文本值。 |
getValues | none | 获取组件的值的数组。 |
setValues | values | 设置组件的值的数组。 |
getValue | none | 获取组件的值。 |
setValue | value | 设置组件的值。 |
表单提交中,所属城市显示成一个下拉框显示中国所有城市,怎么实现:
<td>所属城市</td>
<td><input name="city" class="easyui-combobox" url = "UserServlet?method=getCity" value=""
valueField= "id" textField="name"/></td>
url:用于发送一个异步的请求。返回数据,数据是以Json来传递的,把后台获得的城市数据打包成Json,
例如:List<City> clist = new ArrayLIst<City>();
clist.add(new City(1,"北京"));
clist.add(new City(2,"上海"));
clist.add(new City(3,"广州"));
JSONArray.fromObject(clist);//转换成Json格式数据
System.out.println(JSONArray.fromObject(clist).toString());
response.setContentType("text/html",charset=utf-8);
String str = JSONArray.fromObject(clist).toString();
response.getWriter().write(str);
首先导入Json的相关Jar包,利用提供的类,直接把一个对象转换成Json的数据。
ComboBox组合框
扩展自 $.fn.combo.defaults。 用 $.fn.combobox.defaults 重写了 defaults。
依赖
- combo
用法
1. <select id="cc" 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>
1. <input id="cc" name="dept" value="aa">
1. $('#cc').combobox({
2. url:'combobox_data.json',
3. valueField:'id',
4. textField:'text'
5. });
json 数据格式的示例
1. [{
2. "id":1,
3. "text":"text1"
4. },{
5. "id":2,
6. "text":"text2"
7. },{
8. "id":3,
9. "text":"text3",
10. "selected":true
11. },{
12. "id":4,
13. "text":"text4"
14. },{
15. "id":5,
16. "text":"text5"
17. }]
特性
其特性扩展自 combo,下列是为combobox 增加的特性。
名称 | 类型 | 说明 | 默认值 |
valueField | string | 绑定到 ComboBox 的 value 上的基础数据的名称。 | value |
textField | string | 绑定到 ComboBox 的 text 上的基础数据的名称。 | text |
mode | string | 定义在文本改变时如何加载列表数据。如果组合框从服务器加载就设为 'remote' 。 | local |
url | string | 从远程加载列表数据的 URL 。 | null |
method | string | 用来检索数据的 http method 。 | post |
data | array | 被加载的列表数据。 | null |
filter | function | 定义当 'mode' 设为 'local' 时如何过滤数据。这个函数有两个参数: |
|
formatter | function | 定义如何呈现行。这个函数有一个参数:row。 |
|
事件
其事件扩展自 combo,下列是为 combobox 增加的事件。
名称 | 参数 | 说明 |
onLoadSuccess | none | 当远程数据加载成功时触发。 |
onLoadError | none | 当远程数据加载失败时触发。 |
onSelect | record | 当用户选择一个列表项时触发。 |
onUnselect | record | 当用户取消选择一个列表项时触发。 |
方法
其方法扩展自 combo,下列是为 combobox 追加或重写的方法。
名称 | 参数 | 说明 |
options | none | 返回 options 对象。 |
getData | none | 返回加载的数据。 |
loadData | data | 加载本地列表数据。 |
reload | url | 请求远程的列表数据。 |
setValues | values | 把数组设置为组合框的值。 |
setValue | value | 设置组合框的值。 |
clear | none | 清除组合框的值。 |
select | value | 选择指定的选项。 |
unselect | value | 取消选择指定的选项。 |
开始时间和结束时间如何精准到时分秒:
<td>开始时间</td>
<td><input id="startTime" type="text" name="startTime" value=""/></td>
<td>结束时间</td>
<td><input id="endTime" type="text" name="startTime" value=""/></td>
DateTimeBox日期时间框
扩展自 $.fn.datebox.defaults。用 $.fn.datetimebox.defaults 重写了 defaults。
依赖
- datebox
- timespinner
用法
1. <input id="dt" type="text"></input>
1. $('#startTime').datetimebox({
2.
required:true;
missingMessage:'时间必填',
editable:false
3. });
特性
其特性扩展自 datebox,下列是为 datetimebox 增加的特性。
名称 | 类型 | 说明 | 默认值 |
showSeconds | boolean | 定义是否显示秒的信息。 | true |
方法
其方法扩展自 datebox,下列是为 datetimebox 重写的方法。
名称 | 参数 | 说明 |
options | none | 返回 options 对象。 |
spinner | none | 返回 timespinner 对象。 |
setValue | value | 设置 datetimebox 的值。 |