EasyUI Form 表单

通过 $.fn.form.defaults 重写默认的 defaults。

表单（form）提供多种方法来执行带有表单字段的动作，比如 ajax 提交、加载、清除，等等。当提交表单时，调用 ‘validate‘ 方法来检查表单是否有效。

用法

创建一个简单的 HTML 表单。构建表单并给 id、action、method 赋值。

<form id="ff" method="post">
    <div>
        <label for="name">Name:</label>
        <input class="easyui-validatebox" type="text" name="name" data-options="required:true" />
    </div>
    <div>
        <label for="email">Email:</label>
        <input class="easyui-validatebox" type="text" name="email" data-options="validType:‘email‘" />
    </div>
    ...
</form>

让表单（form）成为 ajax 提交的表单（form）

$(‘#ff‘).form({
    url:...,
    onSubmit: function(){
        // do some check
        // return false to prevent submit;
    },
    success:function(data){
        alert(data)
    }
});
// submit the form
$(‘#ff‘).submit();

去做一个提交动作

// call ‘submit‘ method of form plugin to submit the form
$(‘#ff‘).form(‘submit‘, {
    url:...,
    onSubmit: function(){
        // do some check
        // return false to prevent submit;
    },
    success:function(data){
        alert(data)
    }
});

通过额外的参数提交

$(‘#ff‘).form(‘submit‘, {
    url:...,
    onSubmit: function(param){
        param.p1 = ‘value1‘;
        param.p2 = ‘value2‘;
    }
});

处理提交响应

提交一个 ajax 表单（form）是非常简单的。当提交完成时用户可以获得响应数据。请注意，响应数据是来自服务器的原始数据。对响应数据的解析动作要求获得正确的数据。

例如，响应数据假设是 JSON 格式，一个典型的响应数据如下所示：

{
    "success": true,
    "message": "Message sent successfully."
}

现在在 ‘success‘ 回调函数中处理 JSON 字符串。

$(‘#ff‘).form(‘submit‘, {
    success: function(data){
        var data = eval(‘(‘ + data + ‘)‘); // change the JSON string to javascript object
        if (data.success){
            alert(data.message)
        }
    }
});

属性

事件

方法

EasyUI Validatebox 验证框

通过 $.fn.validatebox.defaults 重写默认的 defaults。

验证框（validatebox）是为了验证表单输入字段而设计的。如果用户输入无效的值，它将改变背景颜色，显示警告图标和提示消息。验证框（validatebox）可与表单（form）插件集成，防止提交无效的字段。

依赖

• tooltip

用法

从标记创建验证框（validatebox）。

<input id="vv" class="easyui-validatebox" data-options="required:true,validType:‘email‘">

使用 javascript 创建验证框（validatebox）。

<input id="vv">

$(‘#vv‘).validatebox({
    required: true,
    validType: ‘email‘
});

检查密码和重新输入密码是相同的。

// extend the ‘equals‘ rule
$.extend($.fn.validatebox.defaults.rules, {
    equals: {
        validator: function(value,param){
            return value == $(param[0]).val();
        },
        message: ‘Field do not match.‘
    }
});

<input id="pwd" name="pwd" type="password" class="easyui-validatebox" data-options="required:true">
<input id="rpwd" name="rpwd" type="password" class="easyui-validatebox"
    required="required" validType="equals[‘#pwd‘]">

验证规则

验证规则是通过使用 required 和 validType 属性来定义的，这里是已经实施的规则：

• email：匹配 email 正则表达式规则。
• url：匹配 URL 正则表达式规则。
• length[0,100]：允许从 x 到 y 个字符。
• remote[‘http://.../action.do‘,‘paramName‘]：发送 ajax 请求来验证值，成功时返回 ‘true‘ 。

要自定义验证规则，重写 $.fn.validatebox.defaults.rules，来定义一个验证函数和无效的信息。例如，定义一个 minLength 验证类型：

$.extend($.fn.validatebox.defaults.rules, {
    minLength: {
        validator: function(value, param){
            return value.length >= param[0];
        },
        message: ‘Please enter at least {0} characters.‘
    }
});

现在您可以使用这个 minLength 验证类型来定义一个至少输入5个字符的输入框：

<input class="easyui-validatebox" data-options="validType:‘minLength[5]‘">

属性

方法

EasyUI Combobox 组合框

扩展自 $.fn.combo.defaults。通过 $.fn.combobox.defaults 重写默认的 defaults。

组合框（combobox）显示一个可编辑的文本框和下拉列表，用户可以从下拉列表中选择一个或多个值。用户可以直接输入文本到列表的顶部，或者从列表中选择一个或多个现成的值。

依赖

• combo

用法

从带有预定义结构的 <select> 元素创建组合框（combobox）。

<select id="cc" class="easyui-combobox" name="dept" style="width:200px;">
    <option value="aa">aitem1</option>
    <option>bitem2</option>
    <option>bitem3</option>
    <option>ditem4</option>
    <option>eitem5</option>
</select>

从 <input> 标记创建组合框（combobox）。

<input id="cc" class="easyui-combobox" name="dept"
    data-options="valueField:‘id‘,textField:‘text‘,url:‘get_data.php‘">

使用 javascript 创建组合框（combobox）。

<input id="cc" name="dept" value="aa">

$(‘#cc‘).combobox({
    url:‘combobox_data.json‘,
    valueField:‘id‘,
    textField:‘text‘
});

创建两个依赖的组合框（combobox）。

<input id="cc1" class="easyui-combobox" data-options="
    valueField: ‘id‘,
    textField: ‘text‘,
    url: ‘get_data1.php‘,
    onSelect: function(rec){
    var url = ‘get_data2.php?id=‘+rec.id;
    $(‘#cc2‘).combobox(‘reload‘, url);
    }">
<input id="cc2" class="easyui-combobox" data-options="valueField:‘id‘,textField:‘text‘">

json 数据格式的示例：

[{
    "id":1,
    "text":"text1"
},{
    "id":2,
    "text":"text2"
},{
    "id":3,
    "text":"text3",
    "selected":true
},{
    "id":4,
    "text":"text4"
},{
    "id":5,
    "text":"text5"
}]

属性

该属性扩展自组合（combo），下面是为组合框（combobox）添加的属性。

事件

该事件扩展自组合（combo），下面是为组合框（combobox）添加的事件。

方法

该方法扩展自组合（combo），下面是为组合框（combobox）添加或重写的方法。

EasyUI Combo 组合

扩展自 $.fn.validatebox.defaults。通过 $.fn.combo.defaults 重写默认的 defaults。

组合（combo）是在 html 页面上显示一个可编辑的文本框和下拉面板。它是用于创建其他复杂的组合组件（比如：组合框 combobox、组合树 combotree、组合网格 combogrid，等等）的基础组件。

依赖

• validatebox
• panel

用法

组合（combo）可以使用 javascript 从 <select> 或 <input> 元素进行创建。请注意，从标记创建组合（combo）是无效的。

<input id="cc" value="001">

$(‘#cc‘).combo({
    required:true,
    multiple:true
});

属性

该属性扩展自验证框（validatebox），下面是为组合（combo）添加的属性。

事件

方法

该方法扩展自验证框（validatebox），下面是为组合（combo）添加的方法。

EasyUI Combotree 组合树

扩展自 $.fn.combo.defaults 和 $.fn.tree.defaults。通过 $.fn.combotree.defaults 重写默认的 defaults。

组合树（combotree）把选择控件和下拉树结合起来。它与组合框（combobox）相似，不同的是把列表替换成树组件。组合树（combotree）支持带有用于多选的树状态复选框的树。

依赖

• combo
• tree

用法

从标记创建组合树（combotree）。

<select id="cc" class="easyui-combotree" style="width:200px;"
    data-options="url:‘get_data.php‘,required:true">
</select>

使用 javascript 创建组合树（combotree）。

<input id="cc" value="01">

$(‘#cc‘).combotree({
    url: ‘get_data.php‘,
    required: true
});

属性

该属性扩展自组合（combo）和树（tree），下面是为组合树（combotree）添加或重写的属性。

事件

该事件扩展自组合（combo）和树（tree）

方法

该方法扩展自组合（combo），下面是为组合树（combotree）添加或重写的方法。