前のセクションでは、Datagridを使用してすべての製品情報を表示しました。このセクションでは、いくつかの機能を追加し始めました:追加、更新、削除、クエリ。最初に、フロントデスクにディスプレイを実装し、次に背景を実行してデータを取得します。
1.機能の追加、更新、削除、クエリの前景の実装
Datagridコントロールにはツールバープロパティがあり、ツールバーを追加します。これらのボタンをツールバープロパティに追加して、対応する機能を実現できます。まず、公式ドキュメントのツールバーの定義を見てみましょう。
アレイを使用してツールバーを定義し、次のコードをquery.jspページに追加します。
<%@ページ言語= "java" import = "java.util。*" pageencoding = "utf-8"%> <!doctype html public " - // w3c // dtd html 4.01 transitional // en" 1px; } .searchbox {margin:-3; } </style> <script type = "text/javascript"> $(function(){$( '#dg')。datagrid({// urlアドレスを変更してカテゴリ作用url: 'category_queryjoinaccount.action'、singleSelect:false、// true、唯一の単一のラインディスプレイが許可されている場合は、set exters a set in invalid //ページごとに表示されるデフォルトは10ページサイズです://ユーザー選択のためにページごとのオプションのレコード数を設定します。デフォルトは10,20,30,40です... [5,10,15,20]、IDField:「ID」、// IDを識別フィールドとして指定します。 Page/ ***********************************/ツールバー:[{Icon-Add '、Text:' add category '、handler:function(){alert(' - add category - ')カテゴリ - ')、' - ' - '、{iconcls: 'icon-remove'、 'delete category'、handler:function(){//選択した行レコードがあるかどうかを判断します。 //選択した行を返します。行が選択されていない場合、空の配列を返します(rows.length == 0){//プロンプトメッセージ$ .messager.show({//構文はjavaの静的メソッドに似ています。ダイレクトオブジェクトコールタイトル: 'エラープロンプト'、msg: 'be showtepe:' showtepe: } else {//削除を確認するかどうかを促します。確認された場合、削除$ .messager.confirmのロジックを実行します( '削除ダイアログ'、 'このアイテムを削除する必要がありますか?'、function(r){if(r){// exit操作; alert( " - 削除操作 - ")}}); }}}}、 ' - '、{//クエリボタンはリンクボタンではなく、構文を持っていますが、htmlタグテキストの解析もサポートしています。検索者:function(value、name){//値は入力値//クエリ操作を表します}、プロンプト:「検索キーワードを入力してください」//デフォルト表示}); / *************************************************************/}); </script> </head> <body> <table id = "dg"> </table> </body> </html>このようにして、追加、更新、削除、およびクエリするための前景フレームワークを設定しました。これで、前景に表示できます。バックグラウンドにはデータがありません。プロンプトボックスのみがポップアップしますが、表示機能が完了しています。効果を見てみましょう。
次に、対応する機能を1つずつ完了します。
2。Datagridカテゴリクエリの実装
クエリの実装は最も簡単です。検索ボックスにキーワードを入力し、キーワードをパラメーターとしてアクションに渡し、サービスがデータベースからデータを取り出し、JSON形式にパッケージ化し、ディスプレイのためにフロントデスクに渡します。このプロセスは、以前に表示された製品情報と同じです。上記のJSPの検索パーツのコードを追加するだけで、他のコードを変更する必要はありません。追加されたコードは次のとおりです。
//通常のテキストボックスをクエリ検索テキストボックス$( '#ss')に変換します({//クエリイベント検索者:function(value、name){// valueは入力値を表します// alert(value + "、" + name)//現在のクエリのキーワードを取得します。 「QueryParams」属性を交換してください。ロードメソッドは、最初のページにすべての行をロードできます。パラメーターがあります。指定されている場合、QueryParamsが付いています。それ以外の場合、上記のQueryParamsで指定されたパラメーターはデフォルトで渡されます。ここでは、タイプを値の値、つまりユーザーが入力したクエリキーワードに設定し、アクションに渡します。バックグラウンドは、ユーザーが入力した値に基づいてデータベースで検索し、それをフォアグラウンドに返します。実行結果は次のとおりです。
このようにして、検索機能を完了しました。これは比較的簡単です。
3。Datagridカテゴリ削除の実装
次に、削除関数を実装しましょう。上記のJSPから、削除の前に、ユーザーがレコードを選択したかどうかを判断することがわかります。そうでない場合は、ユーザーにプロンプトを提供します。選択した場合、ポップアップウィンドウを使用すると、ユーザーが確認できます。それが本当なら、削除関数が実行されます。注意すべき詳細があります。複数のレコードを一度に削除する場合は、上記のSingleSelectプロパティをfalseに設定する必要があります。
まず、上記のquery.jspで削除されたコードを補足しました。以下を参照してください。
{iconcls: 'icon-remove'、text: 'delete category'、handler:function(){//選択した行レコードがあるかどうかを判断します。 //選択した行を返します。行が選択されていない場合、空の配列を返します(rows.length == 0){//プロンプトメッセージ$ .messager.show({//構文はjavaの静的メソッドに似ています。ダイレクトオブジェクトコールタイトル: 'エラープロンプト'、msg: 'be showtepe:' showtepe: } else {//削除を確認するかどうかを促します。確認された場合、削除のロジックが実行されます$ .messager.confirm( 'Delete Confismダイアログ'、「このアイテムを削除する必要がありますか?」、function(r){if(r){// 1。取得したレコードから対応するIDを取得し、IDの値をスプライスし、バックグラウンド1,3,4 vars = ++){ids += rows [i] .id +"; ids.substr("、 "))。後続の操作$( "#dg")。datagrid( "uncheckall"); MSG:「操作を削除してください」、タイムアウト:2000、 'Slide'、}}}}); }}}}}}}ユーザーが削除を選択した場合、ダイアログボックスが最初にポップアップします。ユーザーが削除したいと判断したとき、最初にユーザーが選択した製品のIDを取得し、これらのIDを文字列にスプライスし、次にAjaxリクエストを背景に送信する必要があります。 $ .postの最初のパラメーターはそのアクションに送信され、2番目のパラメーターは送信パラメーター、3番目のパラメーターはコールバック関数です。つまり、削除が成功した後、関数のメソッドが実行されます。関数のパラメーター結果はバックグラウンドから送信され、4番目のパラメーターはオプションであり、これは返品データのタイプです。 $ .postでコンテンツに焦点を当てましょう。背景が削除が成功していることを示すために「真」を返すと、DatagridのRELOADメソッドを呼び出してページを更新します。リロードは、前のクエリで使用した負荷と同じです。違いは、リロードが更新後に現在のページにとどまることですが、ロードは最初のページを表示します。
さて、フロントエンドページの部分が書かれています。次に、バックグラウンドで対応するメソッドを完了します。まず、CategoryServiceにDeleteByIDSメソッドを追加し、その実装クラスカテゴリセルバーにメソッドを実装します。
// categoryserviceインターフェイスパブリックインターフェイスカテゴリサービスbaseService <カテゴリ> {//クエリカテゴリ情報、カスケード管理者パブリックリスト<カテゴリ> queryjoinAccount(string type、int page、int size); //カテゴリの名前をクエリします// IDSに基づいて複数のレコードを削除しますpublic void deleteByids(String IDS); } // categoryserviceimpl実装クラス@suppresswarnings( "unchecked")@service( "categoryservice")public class categoryserviceimpl extends baseServiceimpl <カテゴリ>カテゴリセルサービス{//他の方法は省略され、書かれています... hql = "c.id in(" + ids + ")"からdelete category cから削除します。 getSession()。createQuery(hql).executeUpdate(); }}サービスパーツを書いた後、アクションパーツの作成を開始します。フロントデスクから送信されるIDSデータを取得したいため、このデータを受信するためにGETメソッドとセットメソッドを実装するアクションに変数が必要です。さらに、結果をフロントデスクに渡す必要があります。前の章でクエリをカスケードする場合、使用される方法は、クエリ結果データをJSON形式にパッケージ化してフロントデスクに渡すことであるため、マップが必要であり、マップが構成ファイルを介してJSON形式に変換されます。ここでは、フロントデスクに渡すデータは比較的簡単です。株式を正常に削除すると、「真」を渡すだけで、JSON形式にパッケージ化する必要はありません。ストリーミングを介して送信します。原則は以前と同じです。首相、「真の」バイトを保存するためのストリームオブジェクトが必要であり、構成を介してオブジェクトがフロントデスクにストリーミングされます。次のように、これらの2つのオブジェクトをベースアクションで作成します。
@Controller( "BaseAction")@scope( "Prototype")Public Class BaseAction <T> ActionSupport RequestAware、SessionAware、ApplicationAware、ModelDriven <T> {// IDを削除する必要があります。このデータは、ストラットによって取得され、ストリームの形を介して前景に送信されるため、GETメソッドを保護された文字列IDに実装します。保護されたinputstream inputstream; //以下に省略...}カテゴリの対応する方法は次のとおりです。
@controller( "Categoryaction")@scope( "prototype")public class categoryaction extends baseAuttion <category> {public string queryjoinaccount(){// ofited ...} public string deleteByids(){system.out.println(ids); categoryservice.deleteByids(IDS); //削除が成功した場合、下方に実行されます。 「true」をストリームinputstream = new bytearrayinputStream( "true" .getBytes())の形でフォアグラウンドに渡します。 //「true」のバイトをストリーム入力ストリーム「ストリーム」に保存します。 }}次に、struts.xmlの対応する構成を見てみましょう。
<struts> <constant name = "struts.devmode" value = "true"/> <package name = "shop" extends = "json-default"> <! - jason-defaultはstruts-defaultを継承します - > <global-results> <result name = "aindex">/web-inf/main/aindex.jsp </result-results>春に構成されています。なぜなら、春の管理に引き渡されるためです - > <アクションname = "category_*" method = "{1}"> <result name = "jsonmap" type = "json"> <! - ofitt-> <> </result> <result name = "stream" type "type =" stream "> <!- InputStreamに送信 - > </result> </action> <action name = "account_*" method = "{1} name =" index ">/index.jsp </result> </action> <! - システム要求のアクション転送に使用される、すべてのリクエストは実行に渡されます - > < name = "send">/web-inf/{1}/{2} .jsp </result> </action> </package> </struts>このようにして、削除操作を実行し、効果を確認しました。
テストが成功した後、一度に削除する複数のアイテムを選択することもできます。この時点で、削除関数が完了します。
元のアドレス:http://blog.csdn.net/eson_15/article/details/51338991
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。