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 参数是一个对象，它包含系列特性： url：动作的 URL onSubmit：提交之前的回调函数 success：提交成功之后的回调函数 |
| load | data | 加载记录来填充表单。 data 参数可以是一个字符串或者对象类型，字符串作为一个远程 URL，否则作为一个本地记录。 |
| 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 | 显示在小数点后面的最大精度。 |
方法
其方法扩展自 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' 时如何过滤数据。这个函数有两个参数： q：用户输入的文字 row：列表中的行数据。 返回 true 就允许显示该行。 | |
| 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 的值。 |