このサイトはバックサイトのフォアグラウンドとサイトにある。 フロント - ユーザーの例を参照してください：モールの 背景 - 例えば参照するには、管理者へ：モール舞台裏目的：追加するために使用されるデータを維持するには、 ブートストラップ：JSPページの表示、良い効果を、美しい、ユーザインタフェースとして適しています。 EasyUI：JSPページ、迅速な開発、統一フォーマット、一般的な美的効果 。独自の特使がありますが、それらは、HTMLコードの固定構造として、単純なように書かれています。EasyUI多くのコンポーネント（機能ブロック）がある EasyUI環境は、構造： 1 。輸入CSSは、2 CSSが必要です 2 、導入jqueryの2つのJSが必要です。 <リンクのrel = "このスタイルシート"タイプ= "テキスト/ CSS"のhref =「$ {} pageContext.request.contextPath / CSS / easyui。 CSS "> <リンクのrel ="このスタイルシート"タイプ="テキスト/ CSS "のhref =" pageContext.request.contextPath /css/icon.css $ {} "> <リンクのrel ="このスタイルシート"タイプ="テキスト/ CSS " HREF = "$ {} pageContext.request.contextPath /css/demo.css "> </ SCRIPT> <スクリプトタイプ= "テキスト/ JavaScriptを" SRC = "$ {}はpageContext.request.contextPathを/js/jquery.min.js"> <スクリプトタイプは= "テキスト/ JavaScriptを" SRC =「{$ pageContextの。 }> </ SCRIPT>」request.contextPathを/js/jquery.easyui.min.js ：easyUI定義された方法 、我々は単純なHTMLコード構造を提供する必要が所定:. easyui、特殊効果を生成することができる easyui定義された方法： 1 。.htmlのコード構造 1.1：必要クラス=「easyui- *」* コンポーネントの名前を表す。 1.2：DATA-：easyui追加のプロパティを提供するオプション：属性が提供easyui書き込むことができる データ - オプションフォーマット：JSON形式：キー：値、キー：値...... 2つの.jsレンダリング。 2.1 ：構文：オブジェクトのコンポーネント名（）;. 2.2構文：コンポーネントオブジェクト名（{キー：値、キー：値.....}）; 例えば： HTML例： <divのクラス = "easyui-ウィンドウの"データ・オプション= "タイトル： 'これはタイトル'、幅：200は、高さ：400"> </ div> JS例： <DIV ID = "myDiv"> </ div> <SCRIPT> // レンダリング構文JSの場合：コンポーネントオブジェクト名（{キー：値、キー：値.....}）;. $（ "＃myDiv" ）.window（{ タイトル：「これは新しいですタイトル」、 幅： 400 、 高さ： 400 }）; </ SCRIPT> 簡単 -特性-イベント- 方法： 属性easyui：イベント、方法 プロパティ：キー：値、キー：値コンポーネントの独自の特徴、イベントやプロパティはフォーマットで書き込むことができます .... イベント：。（パッシブ）何かがトリガーした後のアクションを完了するために $（オブジェクト）コンポーネント名（{。 プロパティ:, プロパティ:, イベント：機能 }） 。方法:(アクティブ）アクティブ会員何かが行わ 構文： 。$（ターゲット）はコンポーネント名（メソッド名、メソッドのパラメータ） の<div クラス =「easyui-ダイアログ"データオプション="幅：200であり、高さ：200 "は、onBeforeClose：関数（）{ アラート（ 'ウィンドウが閉じ' ）; } "> </ div> 例： <DIV ID = "myDiv2"> </ DIV> <input type = "ボタン"値 = " 閉じる" onclickの= "CloseDialog（）"> の<input type = "ボタン"値 = " 開いているウィンドウ" onclickの= "openDialogの（）"> // イベント <スクリプトタイプ= "テキスト/ JavaScriptを"> $（ " ＃myDiv2」）.dialog（{ 幅： 200は、 高さ： 200をされ、 onBeforeClose：機能（）{ アラート（ 'ウィンドウが閉じます' ） } }）; CloseDialog関数（）{ // 標準構文設定方法：$（オブジェクト）コンポーネント名（メソッド名[値法]）。 $（ "＃myDiv2"）ダイアログ（ "閉じる。" ）; } 関数は、openDialog（）{ $（ "＃myDiv2"）ダイアログ（ "オープン。" ）; } </ SCRIPT> フォーム： デフォルトでは、フォームは、伝統的な形式、伝統的な形式の同期で、 easyuiフォームは非同期です。 <SCRIPT> $（ "＃FF" ）.from（{ URL： "$ {} pageContext.request.contextPath / DemoServlet"、// 同等のaction属性、パスフォーム送信。 onSubmit検証：機能（）{ // フォームが送信される前に、ここでは、有効性、有効性を行います。 // 警告（1）; //はfalseに戻ります; }、 成功：機能（データ）{ // コールバック関数、全くコード200が存在しない状態が決定され、後続のデータ値を決定する必要がある。 アラート（データ） } }）; </ SCRIPT> タブ：タブ の<script> 関数addTabs（）{ フラグにVAR = $（ "＃のTT"）タブ（ "EXISTS"、 "給与明細"。）; IF （フラグに）{ // パネルが既に存在する場合は、パネルを選択 $（「＃のTT」）タブを （「選択」、「 スリップを支払う。」）; } 他{ // パネルが存在しない場合は、パネルを追加 $を（「＃のTT」 ）.tabs（ "追加" 、{ タイトル： "賃金" // タイトル 内容：「タブボディ」、 //コンテンツ 閉鎖可能：trueに // オフ缶 ）}; } } </ SCRIPT> ドロップダウンボックス： <INPUTのID = "CC"名前= "部門"値= "選択"> <スクリプト> $（ "#cc" ）.combobox（{ // JSON easyuiサポートJSONのサポート、リモートイベントをロードする URLを： "combobox_data.json" 、 ValueField： 、"上記のIDを述べた" // 対応する値の値は、JSONは、ここでキーを配置する必要があり // <オプション値= "">テキスト</オプション> textFiedld： " 名前" // キーテキストがここに表示されます }）; </ SCRIPT> データグリッド：データフォームの URL：リモートデータのサポートJSONを読み込む テーブルのフィールド名フィールドを、JSONと一致していなければなりません彼らは一貫している場合は、フォームが自動的にJSONデータを埋めている。 <表のクラス = "easyui-DataGridの"データ・オプション= "URL： 'datagrid_data.json'、フィット：trueに"> <THEAD> <TR> <TH =データ・オプション"フィールド： 'ID'、幅 ：100"> コード</ TH> <THデータOPTIONS = "フィールド： '名前'、幅：100">名</ TH> <THデータOPTIONS =「フィールド： '年齢'幅：100、揃える ：'「'右>価格</目> <THデータオプションは= "フィールド ： 'pimage'、幅：100、整列： '右'、フォーマッタ：関数（値、行インデックス）{リターン'<IMG SRC =' +値+ '>';}" >写真</ TH> </ TR> </ THEAD> </ TABLE> <表ID = "DG"> </テーブル> 値：現在のJSON値を示している 行を現在のターゲットを表す行 インデックスは：現在の行のインデックスを示し 、<スクリプト> $（ '#dg' ）.datagrid（{ URL： 'datagrid_data.json'、// URL：リモート・データ・サポートJSON荷重 列の[[ {フィールド： 'ID'、タイトル： 'ID'、幅：100 } 、 {フィールド： '名前'、タイトル： '名前'、幅：100 }、 {フィールド： '年齢'、タイトル： '年齢'、幅：100、左=整列： '右' }、 {フィールド： 'pImage'、タイトル： 'pImage'、幅：100、左=整列： '右' 「正しいです、 フォーマッタ：関数（値は、行インデックス）{ リターン "<IMG SRC = '" +値+ "'スタイル= '幅：40ピクセル'>" ; } } ]]、 フィット：trueに、// フォーム自動入力 fitColumns：trueに、// カラム自動充填 autoRowHeight：trueに、// フィルの高さ ツールバー：[{ iconCls。'アイコンを編集' 、 ハンドラ：関数（）{アラート（ '編集ボタン' ）} }、 ' - ' 、{ iconCls： 'アイコンヘルプ' 、 ハンドラ：関数（）{アラート（ 'ヘルプボタン' ）} }]、 singleSelectは：trueに、// のみを選択し 、ページ区切りを：trueに、// ページプラスページの記事の下部に ページ番号：1、// 最初のページ開くには、デフォルト のpageSize：5 、 pageListを：[ 5,10,15,20,25 、30 ] }）; </ SCRIPT> 背景コード： ページング・パラメータを受信した： 応答データをバック： 保護された ボイドを doGetメソッド（HttpServletRequestのリクエスト、HttpServletResponseの応答）スローServletExceptionが、IOExceptionが{ 試み{ // ページが入ってくるのpageSizeとPAGENUMBER必要です。質問1 // 質問2：ページングするために必要とされるどのようなデータ応答データ・ページとは何ですか？ // 0コーディング request.setCharacterEncodingを（「UTF-8」）; response.setHeader（ "コンテンツタイプ"、 "テキスト/ HTML;のcharset = UTF-8" ）; // 1.取得データ 文字列= pageNumberStr request.getParameter（ "ページ" ）; 文字列pageSizeStr = request.getParameter（ "行" ）; INTページ番号=int型のpageSize =Integer.valueOf（pageNumberStr）; Integer.valueOf（pageSizeStr）; // int型= PAGENUMBER 1; // int型=のpageSize 5; // 2.データは、処理 ProductService-サービス= 新しい新しいProductServiceを（）; // リスト<製品> = plistのservice.findAll（）; // レスポンスが戻っリストのみページングに行かない場合は 、// リスト<製品> = service.findByPage plistを（PAGENUMBER、pageSizeを）; easyUIPageBean <製品> easyUIPageBean = service.findByEasyUIPage（PAGENUMBER、pageSizeを）; // 応答が必要なデータ{全28は、 "行" ：[{}、{}、{}]} == >> マップは、パッケージオブジェクトとすることができます @ 但目前是[{キー：値、キー：値}、{キー：値、キー：値} ..] // 3.响应 Gson gson = 新しいGson（）; 文字列JSON = gson.toJson（easyUIPageBean）。 System.out.println（JSON）。 response.getWriter（）プリント（JSON）。 } キャッチ（例外e）{ e.printStackTrace（）; } }