1 概要

1. easyui とは何ですか?

easyui は、jQuery をベースにしたユーザーインターフェイスプラグインのコレクションです。つまり、easyui で使用される主要なテクノロジは jQuery であり、ユーザーインターフェイスに表示されるプラグインを提供します。

2. Easyui は HTML プラグインの拡張機能であるため、easyui を使用してプラグインを作成するには、対応する HTML プラグインと組み合わせる必要があります。たとえば、easyui が提供する validateboxtextboxfilebox dateboxdatatimebox を使用する必要があります。タグに実装します。

3.data-options

は、プラグインをインスタンス化するために使用されます。つまり、easyui 基本プラグインに新しい機能を追加するために、新しい機能は data-options 属性に書き込むことができます。属性値を単一引用符で囲み、2 つの属性をカンマで区切ります。新機能を個別にリストすることもできます。

4. 各プラグインは、他のプラグインを追加するためのコンテナとみなすことができます。追加方法は次のとおりです:

ツールバーの追加など、対応する属性を通じて他のプラグインの ID を参照します。 toolbar="#toolbar" およびボタンの追加 button="#buttons"。

5. プラグイン関数呼び出しの構文形式:

$(selector).插件名("方法名"[参数值]);

ログイン後にコピー

6.href reload url

href: 静的読み込み、指定されたページ情報を読み込みます。
reload: ボタンをクリックして指定されたページ情報をロードするなどのイベントによって駆動される動的ロード。
url: サーバーリソースを指し、サーバーからデータを取得します。

II datagrid データグリッド

1. 機能

データグリッドは主に、Ajax を通じてデータベースから取得したデータを表形式で表示するために使用されます。

2. サーバーによって返される json 文字列形式:

"rows":[{},{}]",total":int数据

ログイン後にコピー

3. データグリッドは HTML

タグに基づいて構築されます。

4. ページがロードされた後、datagrid は Ajax を通じてサーバーからデータを自動的に取得します。プラグインをインスタンス化するときに URL を指定する必要があります。

5.datagrid属性

ツールバーを追加します:toolbar="#toolbar"。
行番号を表示します: rownumbers="true"。
単一行の選択のみを許可します:singleSelect="true"。
列をテーブルの幅に合わせます: fitColumns="true":。
ページネーションバーを表示: pagination="true"。

6. 列ヘッダー

<thead>  <tr><th field="在此列显示的数据库字段"width="">列标题</th><th field="在此列显示的数据库字段"width="">列标题</th>  </tr></thead>

ログイン後にコピー

7. 選択された行を取得します

var row=$(selector).datagrid("getSelected")

ログイン後にコピー

行は、ID、データ形式を含むすべてのデータを含む、選択された行を表します:リー

8. フォーム内のデータは、変更後に再ロードする必要があります:

{name01:"value01",name02:"value02"}

ログイン後にコピー

3 つのフォーム

1. form("clear"): フォームをクリアします。

2. データのロード

$(selector).datagrid("reload");

ログイン後にコピー

3. フォームの送信

$(selector).form("load",{name:"myName"});//加载自定义数据
$(selector).form("load",row);//加载datagrid选中行数据

ログイン後にコピー

Ajax の戻りデータを処理する必要がない場合、送信は次のように省略できます:

$(selector).form('submit',{
                           url:xxx,
                           onSubmit:function(){
                                    return $(this).form("validate")；//验证，只要在前台验证通过后才提交
                                               },
                           success:function(){}//处理返回结果
})

ログイン後にコピー

4. easyui を使用するフォームを送信した後、フォームは自動的にジャンプしません。ジャンプする必要がある場合は、

window.location.href="" などのコールバック関数にジャンプリソースを設定する必要があります。

以上がEasyuiとはの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。