ホームページ >ウェブフロントエンド >jsチュートリアル >Easyuiとは
Easyuiとは
- 怪我咯オリジナル
- 2017-06-27 11:35:442278ブラウズ
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 を指定する必要があります。 ツールバーを追加します:toolbar="#toolbar"。 行番号を表示します: rownumbers="true"。 単一行の選択のみを許可します:singleSelect="true"。 列をテーブルの幅に合わせます: fitColumns="true":。 ページネーションバーを表示: pagination="true"。 行は、ID、データ形式を含むすべてのデータを含む、選択された行を表します:リー 3 つのフォーム 2. データのロード window.location.href="" などのコールバック関数にジャンプ リソースを設定する必要があります。 以上がEasyuiとはの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。 タグに基づいて構築されます。
5.datagrid属性
6. 列ヘッダー
<thead> <tr><th field="在此列显示的数据库字段"width="">列标题</th><th field="在此列显示的数据库字段"width="">列标题</th> </tr></thead>
7. 選択された行を取得します
var row=$(selector).datagrid("getSelected"){name01:"value01",name02:"value02"}
1. form("clear"): フォームをクリアします。
$(selector).datagrid("reload");$(selector).form("load",{name:"myName"});//加载自定义数据
$(selector).form("load",row);//加载datagrid选中行数据$(selector).form('submit',{
url:xxx,
onSubmit:function(){
return $(this).form("validate")；//验证，只要在前台验证通过后才提交
},
success:function(){}//处理返回结果
})