jQuery EasyUI フォームプラグイン -Form フォーム

jQuery EasyUI 插件jQuery EasyUI プラグイン

$.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)
        }
    }
});

プロパティ

名前 タイプ 説明 デフォルト値
url string 送信するフォームアクションの URL。 null

イベント

名前 パラメータ 説明
onSubmit param 送信前にトリガーされ、false を返すと送信アクションを阻止します。
success data フォームの送信が成功したときにトリガーされます。
onBeforeLoad param リクエストを発行してデータをロードする前にトリガーされます。false を返すとこのアクションをキャンセルします。
onLoadSuccess data フォームデータがロードされたときにトリガーされます。
onLoadError none フォームデータのロード中に何らかのエラーが発生したときにトリガーされます。

メソッド

名前 パラメータ 説明
submit options 送信アクションを実行します。options パラメータはオブジェクトで、次のプロパティを含みます：
url：アクションの URL
onSubmit：送信前のコールバック関数
success：送信成功後のコールバック関数

次の例は、有効なフォームを送信し、フォームの重複送信を回避する方法を示しています。
$.messager.progress();    // display the progress bar
$('#ff').form('submit', {
    url: ...,
    onSubmit: function(){
        var isValid = $(this).form('validate');
        if (!isValid){
            $.messager.progress('close');    // hide progress bar while the form is invalid
        }
        return isValid;    // return false will stop the form submission
    },
    success: function(){
        $.messager.progress('close');    // hide progress bar while submit successfully
    }
});
load data レコードをロードしてフォームを埋めます。data パラメータは文字列またはオブジェクト型です。文字列はリモート URL として扱われ、それ以外はローカルレコードとして扱われます。

コード例：
$('#ff').form('load','get_data.php');    // load from URL

$('#ff').form('load',{
    name:'name2',
    email:'[email protected]',
    subject:'subject2',
    message:'message2',
    language:5
});
clear none フォームデータをクリアします。
reset none フォームデータをリセットします。このメソッドはバージョン 1.3.2 以降で使用できます。
validate none フォームフィールドの検証を実行し、すべてのフィールドが有効な場合に true を返します。このメソッドは validatebox プラグインと一緒に使用します。
enableValidation none 検証を有効にします。このメソッドはバージョン 1.3.4 以降で使用できます。
disableValidation none 検証を無効にします。このメソッドはバージョン 1.3.4 以降で使用できます。
jQuery EasyUI 插件jQuery EasyUI プラグイン その他の拡張機能