前のセクションでは、製品のクエリと削除の機能を完了しました。このセクションでは、製品を追加および更新する機能を行います。
1.製品カテゴリを追加します
1.1カテゴリUIデザインを追加します
最初にアイデアについて話しましょう。まず、ユーザーが「製品の追加」をクリックすると、「製品を追加」のUIウィンドウをポップアップする必要があります（これは新しいJSPにジャンプしておらず、EasyUIには1ページしかないことに注意してください）。 「製品の追加」ウィンドウがポップアップすると、親クラスのすべてのウィンドウをロックする必要があります（つまり、他の場所をクリックすることは無効で、製品を追加するウィンドウのみを操作できます）。ユーザーが情報に記入したら、新しくポップアップされたウィンドウの[追加]をクリックして、リクエストをStruts2に送信します。次に、Struts2は要求パラメーターを取得し、データベースから追加アクションを実行します。このようにして、バックグラウンド操作が完了します。同時に、フロントデスクは現在のページを更新し、すべての製品を再表示する必要があります。
EasyUiのドキュメントを確認したところ、新しいウィンドウを作成するには2つの方法があることがわかりました。タグで作成するか、JSを使用して作成します。 JSを使用してここで作成しますが、次のように<div>ボックスが必要です。
さらに、作成した新しいウィンドウを最小化したり最大化する必要はありませんが、画面をロックする必要があります。したがって、これらのプロパティはdivに設定されています。ここに注意する必要があるのは、画面をロックする機能です。 <div>の配置が異なり、ロックされた画面範囲も異なるためです。フル画面をロックする必要があるため、<div>をaindex.jspに入れる必要があります。 query.jsp（追加ボタンを含む）の内容は、aindex.jspで生成する必要があります。したがって、ポップアップウィンドウの後、aindex.jspの範囲をロックする必要があるため、<div>はaindex.jspに配置する必要があり、特定の実装は次のとおりです。
aindex.jspの<body>に新しい<div>を追加します
コードを次のようにコピーします
次に、query.jspにカテゴリを追加する部分を完成させます。
{iconcls： 'icon-add'、text： 'add category'、handler：function（）{parent（ "＃win"）。window（{// <div>はaindex.jspに配置されているため、最初に親タイトルを呼び出す必要があります。 frameborder = "0"/> '}）; }}カテゴリを追加するための上記のコードからわかるように、web-inf/categoryディレクトリにsave.jspファイルの内容を紹介します。次に、save.jspを完了します：
<％@ page Language = "Java" Import = "Java.util。*" PageEncoding = "UTF-8"％> <！doctype HTML public " - // w3c // dtd html 4.01 transitional // en"> <html> <head> <％file = "/public/head.jspf"％ "マージン：5px; } </style> <script type = "text/javascript"> $（function（）{$（ "input [name = type]"）。validatebox（{//これは「カテゴリ名」の検証関数です。ユーザーがそれを記入せずに提出する場合、迅速な要求が必要です。 $（ "＃cc"）管理者のドロップダウンリストbox.combobox（{//アカウントのクエリメソッドにリクエストを処理のためにクエリメソッドに送信します。ここで、処理されたデータをこの側に返す必要があります。リストパネルハイト：//適応高さのパネル幅：//ドロップダウンリストは2つのコンポーネントで構成されています：//ドロップダウンボックスは編集を許可しません}） $（ "＃ff"）。form（ "disableValidation"）; //ボタンイベントを登録します。つまり、 "add" $（ "＃btn"）をクリックしたときにユーザーが行うことは、[function（ "＃ff"）。form（ "enabablevalidation"）; [enable validation "）; click（"＃ff "）。form（" balidate "）。form（"＃ff "）。form（" belidate "））{'on form（' vertate"）を提出します。 url： 'category_save.action'、//成功を処理するためにカテゴリの保存メソッドに送信します//成功した場合、$（ "＃win"） management '] "）。get（0）.contentwindow。$（"＃dg "）。datagrid（" reload "）;}}）;}}）; }）; </script> </head> <body> <form id = "ff" method = "post"> <div> <ラベル= "name">製品名：</label> <入力タイプ= "text" name "/> </div> <div> <ラベル>管理者：</label> <input id =" cc "" name = "" name = "account.id"/> </div> <div> <label> for = "hot"> hotspot：</label> yes <input type = "radio" name = "hot" value = "true"/> no <input type = "radio" name = "hot" value = "true"/> </div> <div> <a id = "btn" href = "＃" "＃" data-options = "iconcls： 'icon-add'"> add </a> </div> </form> </body> </html>フロントデスクのディスプレイと送信リクエストが完了しており、次のステップはバックエンドプログラムを実行することです。
1。
@controller（ "Categoryaction"）@scope（ "prototype"）public class categoryaction extends baseAuttion <category> {//他のコードを省略... public void save（）{system.out.println（model）; categoryservice.save（model）; }}このようにして、データはデータベースに保存されます。その後、フロントデスクはディスプレイを更新し、新しく追加された製品カテゴリを表示します。見てみましょう。
製品カテゴリの追加を完了します。以下の製品カテゴリの更新をしましょう。
2。製品カテゴリを更新します
2.1カテゴリUIデザインを更新します
製品カテゴリを更新するというアイデアは、基本的に上記の製品カテゴリと同じです。最初に、UIウィンドウがポップアップし、次にユーザーがデータを入力して背景に送信し、バックグラウンドでデータベースを更新し、フロントデスクのディスプレイを再表示します。上記の方法を使用してUIウィンドウを作成します。 <div>ボックスを変更する必要はありません。必要なのは、query.jspの「更新カテゴリ」パーツのコードを改善することだけです。
{iconcls： 'icon-edit'、text： 'update category'、handler：function（）{//選択した行レコードがあるかどうかを判断します。 if（rows.length == 0）{//プロンプトメッセージをポップアップします$ .messager.show（{//構文はjavaの静的メソッドに似ています。ダイレクトオブジェクトコールタイトル：「エラープロンプト」、msg：「少なくとも1つのレコードを選択する必要があります」、タイムアウト：2000、showtype： 'slide'、}）; } else if（rows.length！= 1）{//人気のプロンプトメッセージ$ .messager.show（{//構文はjavaの静的メソッドに似ています。ダイレクトオブジェクトコールタイトル：「エラープロンプト」、msg： '1つのレコードのみを時点で更新できます」、タイムアウト：2000、showtype：' slide '、}）; } else {// 1。更新されたページの親// 2。 }}}}上記のJSコードを分析しましょう。最初に、ユーザーによって行を更新する行を取得します。選択されていない場合、ユーザーは少なくとも1つのレコードを選択して更新するように求められます。複数のレコードが選択されている場合、ユーザーは一度に1つのレコードのみを更新するように求められます。これらすべての判断が完了した後、ユーザーはレコードをチェックし、新しいUIウィンドウの作成を開始します。ここでは、上記のように、web-inf/categoryディレクトリにupdate.jspページのコンテンツを紹介します。 update.jspページのコンテンツを見てみましょう。
<％@ page Language = "Java" Import = "Java.util。*" PageEncoding = "UTF-8"％> <！doctype HTML public " - // w3c // dtd html 4.01 transitional // en"> <html> <head> <％file = "/public/head.jspf"％ "マージン：5px; } </style> <script type = "text/javascript"> $（function（）{// datagrid object var dg = parent（ "iframe [title = 'category management']"）。処理されたデータをこちら側に返して表示するため、背景はデータをJSON形式にパッケージ化してURLに送信する必要があります： 'Account_Query.action'、valuefield： 'id'、 'login'、//ドロップダウンリストは、管理者のログイン名パネルを示しています。 //編集可能な2つの幅：Dropdown Boxは編集を許可しません}）。 $（ "＃ff"）。form（ 'load'、{id：rows [0] .id、type：rows [0] .type、hot：rows [0] .hot、 'account.id'：aaccount.id // easyuiはaccount.idポイント操作をサポートしないので、引用符を追加する必要があります）; //データをエコーした後、検証function $（ "input [name = type]" "）を設定します。 //検証$（ "＃ff"）。form（ "disableValidation"）; //ボタンのイベント$を登録します（ "＃btn"）。クリック（function（）{// enable vifidication $（ "＃ff"）。form（ "enablevalidation"）; //検証が成功した場合、$（ "＃ff"）。 'category_update'、// categryactionの更新方法を送信する場合、function（）{// Page Parentを更新します。 }）; </script> </head> <body> <form id = "ff" method = "post"> <div> <ラベル= "name">カテゴリ名：</label> <入力タイプ= "text" name "type"/> </div> <div> <label for = "hot"> hotspot：</label> yes <input = "hot"/""/""/ value = "false"/> </div> <div> <div> <label for = "account">管理者：</label> <！ - ドロップダウンリスト管理者データをロードするためにリモートロードを使用します - > <入力id = "cc" name couccount.id "/> </div> <div> <a id =" btn "href =" type = "hidden" name = "id"/> </div> `</form> </body> </html>更新と追加の違いは、最初にデータがエコーされ、次に管理者データを表示するためのドロップダウンリストがあることです。上記のコードを見てみましょう。まず、リモートロード方法を使用して、管理者データをロードします。まず、バックエンドにリクエストを送信します。バックグラウンドアカウントのクエリメソッドが処理された後、管理者データがJSON形式にパッケージ化されて返されるため、管理者データを取得できます。それを取得した後、データをエコーできます。バックグラウンドプログラムを見てみましょう。
2.2カテゴリの論理実装を更新します
@Controller（ "BaseAction"）@Scope（ "Prototype"）Public Class BaseAction <T> ActionSupport empltement RequestAware、SessionAware、ApplicationAware、ModelDriven <T> {//データをロードするにはJSON形式にパッケージ化してフォアグラウンドに戻ります。以下は、GETメソッド保護リスト<t> jsonList = nullを実装するためです。 //その他の方法を省略します...} // Accountaction @Controller（ "Accountaction"）@scope（ "Prototype"）public class Accountaction extends BaseAction <counce <> {public string query（）{jsonlist = councountservice.query（）; 「jsonlist」を返します。 }}次に、struts.xmlファイルを構成しましょう。
<アクションname = "account_*" method = "{1}"> <result name = "jsonlist" type = "json"> <param name = "root"> jsonlist </param> <param name = "exprodeproperties"> <！ - [0] .pass、[1] .pass-> <！ Echoを完了した後、更新操作は更新操作です。もちろん、検証関数もあります。追加するのと同じように、更新操作は、カテゴリ作用の更新方法にリクエストを渡すために実行されます。これは比較的簡単です。
@controller（ "Categoryaction"）@scope（ "prototype"）public class categoryaction extends baseAuttion <category> {//他のメソッドを省略... public void update（）{system.out.println（model）; categoryservice.update（model）; }}この時点で、製品カテゴリの追加および更新操作を完了しました。
オリジナルアドレス：http：//blog.csdn.net/eson_15/article/details/51347734
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。