0

現在、表形式のデータにdisplaytagを使用していますが、ユーザーが行をクリックすると、ページを更新せずに特定の行の詳細が表示される「kayak.comのような」インターフェースを作成したいと思います。

たとえば、行1の[詳細]リンクをクリックする前に。

row1 | col1 | col2 | col3 |col4|詳細
row2|col1 | col2 | col3 |col4|詳細
row3|col1 | col2 | col3 |col4|詳細

クリック後：

row1 | col1 | col2 | col3 | col4 | Detail
-------- row1Detail ---------------
row2 | col1 | col2 | col3 | col4 | Detail
row3 | col1 | col2 | col3 |col4|詳細

デコレータを使用して、これを行うjavascriptを返してみました。javascriptが実行されますが、レンダリングされた列にのみ反映されます。displaytagのページ付けと並べ替えに影響を与えないデータを含む新しい行を挿入しようとしています。

例えば：

public class CustomDecorator extends TableDecorator {
   public String getDetailsRow() {
      MyObject object = (MyObject)this.getCurrentRowObject();
      return "<a onClick=\"myjsfunction(object.getId()); return true\">Details</a>";
   }
}

...そしてJSPでは、display：tableタグの間にdetailsRowプロパティをネストします。

<display:column property="detailsRow" sortable="false" />

新しい行を正しく挿入するためのヒントはありますか？解決策は、javascriptの記述方法にある可能性があります。私はJavascriptの専門家ではないため、ヒントをいただければ幸いです。displaytagでこれを行うためのより良い方法はありますか？displaytagとjavascript（「onclick」パラメーターなど）との明示的な統合についても知りません。

これはstackoverflowに関する私の最初の質問ですが、詳細が必要かどうかをお知らせください。

4

2 に答える 2

1

古い質問をドラッグして申し訳ありませんが、誰かがこれに遭遇した場合の可能な解決策があります。オーバーライドするときTableDecoratorは、finishRowメソッドをオーバーライドして詳細行を返します。このメソッドは、各行がテーブルに書き込まれた後に実行されるため、実際の行ごとに、詳細が含まれる非表示の行があります。

public String finishRow() {
   return "<tr id='row1Details' style='visibility: collapse'><td colspan='500'>My Details</td></tr>";
}

次に、詳細列にJavaScriptを配置して、非表示の行を表示に設定します。

編集：追加の詳細：

新しいJavaScript関数を追加します

function displayDetails(id) {
   document.getElementById(id + 'details').style.visibility = 'visible'
}

次に、通常の行は次のようになります。

<tr id='row1'><td> .... </td><td><a href="#" onClick="displayDetails('row1')">Details</a></td></tr>
于 2010-07-28T17:38:17.043 に答える
0

これが役立つかどうかはわかりませんが、私はDataTables.netの大ファンです。これはjQueryに基づいていますが、非常に強力です。

彼らはあなたが望むものに非常によく似ている例を持っています：行の詳細

于 2010-04-24T20:02:22.637 に答える