0

JSP で jQuery を使用して、各行に 3 つのアクション (上、下、更新) があるテーブルを表示しようとしています。それぞれの画像を並べて表示し、各行のボタンをクリックして、Java コードで定義されているように、要求された操作 (アップ/ダウン/更新) を実行できるようにしたいと考えています。したがって、ボタンごと、行ごとに異なるアクション/機能が実行されます。例: 行 1 アクションは次のようになります: modelUp、modelDown、modelRefresh; 行 2 のアクションは次のようになります: productionUp、productionDown、productionRefresh; ...など

問題は、私が jQuery を知らず、JSP の経験がほとんどないことです。私はグーグルをしてきましたが、あまりうまくいきませんでした。

誰かが私を助けることができますか？ありがとう。

4

2 に答える 2

1

基本的には、jQuery で CSS セレクターにアクションをアタッチします。

$('.classname').bind('click', function() {
  // do something
});

.classnameこれにより、クラスのあるものがクリックされるたびにコードが実行されます。

あなたの状況では、ボタンの種類ごとに 1 つずつ、3 つのクラスがあります。カスタム動作をどのように指定するかは、あなたの選択です。すべての行のすべての DOM 要素にカスタム属性をアタッチして、クリック関数内でそれらを区別し、それに応じて異なるアクションを実行できるようにすることができます。

if/else の長いチェーンでクリック関数を混乱させることなくこの属性を使用できる場合、これは良い設計であることに注意してください。それ以外の場合は、すべてのボタンにさまざまなアクションをバインドすることをお勧めします。JSP を使用しているため、結果の HTML がクライアント用に生成されるときに、動的に JS コードを生成できます。

于 2012-05-31T15:19:04.973 に答える
0

わかりました、私はそれのほとんどをこの方法でほとんど解決しました。

これが私のJSPです（これはテーブルの1行だけですが、残りは同じスキームに従います）：'コード

<form id="checkStatusForm" action="<%= model.getUri() %>" method="post" >
<input type="hidden" name="<%=FrameworkConstants.FRAMEWORK_COMMAND%>" value="checkstatus" />
<input type="hidden" name="<%=FrameworkConstants.FRAMEWORK_GUID%>" value="<%=model.getPageId()%>" />
<input type="hidden" name="regionID" id="regionID" value="" />
<input type="hidden" name="regionAction" id="regionAction" value="" />

<img src="<%=request.getContextPath() %>/images/up.jpg" alt="" name="modelUp" width="20" height="20" id="modelUp" onclick="CheckStatus.performRegionAction('model', 'up')" />
<img src="<%=request.getContextPath() %>/images/down.jpg" alt="" name="modelDown" width="20" height="20" id="modelDown" onclick="CheckStatus.performRegionAction('model', 'down')" />
<img src="<%=request.getContextPath() %>/images/refresh.png" alt="" name="modelRefresh" width="20" height="20" id="modelRefresh" onclick="CheckStatus.performRegionAction('model', 'refresh')" />

<button type="submit" style="margin-left: 2px; margin-top: 5px; margin-bottom: 0px;" >Commit Changes</button>
</form>

'

これが私のjQuery/Javascriptです：'コード

 performRegionAction : function(regionID, regionAction){
        document.getElementById('regionID').value = regionID;
        document.getElementById('regionAction').value = regionAction;
    },'

そして最後にこれが私のJavaです： '

public void setRegionID(Field<String> regionID){
        this.regionID = regionID;
    }

    public Field<String> getRegionID(){
        return this.regionID;
    }

    public void setRegionAction(Field<String> regionAction){
        this.regionAction = regionAction;
    }

    public Field<String> getRegionAction(){
        return this.regionAction;
    }

'

于 2012-06-01T13:14:04.553 に答える