Easyuiとは

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>列标题</th>
<th>列标题</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 サイトの他の関連記事を参照してください。