Tegnap megvalósítottam az ötletet. A feladat egy olyan jQuery plugin létrehozása volt, amely úgy tudja a detail megjelenítést megoldani, hogy ne kelljen a displaytag forrásába belepiszkálni. Ez elsőre azért tűnt bonyolultnak, mert általában az ilyen megjelenítők úgy oldják meg a feladatot, hogy már eleve legenerálnak egy plusz, nem látható sort a táblázatba, ami akkor válik láthatóvá, ha megnyomjuk a részletek megjelenítésére szolgáló ikont. Végül sikerült egy olyan plugint létrehozni, ami nem csak a displaytag könyvtárral működik együtt, hanem egy tetszőleges táblázattal, így bármely olyan kész komponenssel használható, amibe nem tudunk vagy nem szeretnénk belehekkelni egy plusz TR-t.

Ha nem érdekel a leírás, innen letöltheted a plugint: jquery.displaytagdetail.zip

Displaytag felhasználásával

Az alapot egy displaytag definíció szolgálja a JSP fájlban. Így néz ki általában:

<display:table name="paginatedList" id="auditlogList" sort="external" requestURI="auditlogList.action">
  <display:setProperty name="pagination.sort.param" value="paginatedList.sortCriterion" />
  <display:setProperty name="pagination.sortdirection.param" value="paginatedList.sortDirectionName" />
  <display:setProperty name="pagination.pagenumber.param" value="paginatedList.pageNumber" />
  <display:column sortable="true" property="idAuditlog" title="id"/>
  <display:column sortable="true" property="creationTime" title="Időpont"/>
  <display:column sortable="true" property="priority" title="Prioritás"/>
  <display:column sortable="true" property="username" title="Felhasználó"/>
</display:table>

HTML táblázat

A fentebbi tag a következő HTML kódot generálja le, de ez előállítható akár PHP-ból is

<table id="auditlogList">
<thead>
<tr>
<th>id</th>
<th>Time</th>
<th>Priority</th>
<th>User</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2010-07-02 13:27:07.0</td>
<td>NORMAL</td>
<td>root@valami-asdf.hu</td>
<td> </td>
</tr>
<tr>
<td>2</td>
<td>2010-07-02 14:04:28.0</td>
<td>NORMAL</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

jQuery plugin

Létrehoztam a displaytagdetail plugin forrását, amit aztán Javascript-ként beillesztettem az oldal forrásába.

jQuery.fn.displaytagdetail = function(button, detailClass, imgUp, imgDown, speed) {
		$(this).find(button).click( function() {
			tr = $(this).parents("tr");
			if (tr.next().hasClass(detailClass)) {
				tr.next().find("div").slideUp(function() {
					tr.next().remove();
				  });
				$(this).find("img:first").attr("src",imgDown);
			} else {
				tr.after("<tr class='" + detailClass + "'><td colspan=1000><div style='display:none'>" +
						$(this).next("div").html() +
						"</div></td></tr>");
				tr.next().addClass(tr.attr("class"));
				$(this).find("img:first").attr("src",imgUp);
				tr.next().find("div").slideDown(speed);
			}
		});
	};

Paraméterként a következőket kell megadni:

• A detail gomb class neve (‘.’-el kezdőtik)
• A detail div osztálya
• Záró ikon
• Nyitó ikon
• Animáció sebessége

Példa jQuery hívás:

	<script type="text/javascript">
		$(function() {
			$("#auditlogList").displaytagdetail(".detail_button","detail","images/arrow_up.png","images/arrow_down.png","slow");
		});
	</script>

Módosított displaytag a JSP-ben

A tag-ben létrehoztam egy plusz oszlopot, ami tartalmazza a részleteket tartalmazó div-et és a lenyitó gombot

<display:table name="paginatedList" id="auditlogList" sort="external" requestURI="auditlogList.action">
  <display:setProperty name="pagination.sort.param" value="paginatedList.sortCriterion" />
  <display:setProperty name="pagination.sortdirection.param" value="paginatedList.sortDirectionName" />
  <display:setProperty name="pagination.pagenumber.param" value="paginatedList.pageNumber" />
  <display:column>
    <a><img src="images/arrow_down.png"/></a>
    <div style="display:none">
      <strong>Komponens:</strong><br/>
      ${auditlogList.component}<br/><br/>
      <strong>Log:</strong><br/>
      ${auditlogList.log}
    </div>
  </display:column>
  <display:column sortable="true" property="idAuditlog" title="id"/>
  <display:column sortable="true" property="creationTime" title="Időpont"/>
  <display:column sortable="true" property="priority" title="Prioritás"/>
  <display:column sortable="true" property="username" title="Felhasználó"/>
</display:table>

Módosított HTML táblázat

A részleteket tartalmazó generált táblázat így néz ki.

<table id="auditlogList">
<thead>
<tr>
<th> </th>
<th>id</th>
<th>Time</th>
<th>Priority</th>
<th>User</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a><img src="images/arrow_down.png" alt="" /></a>
<div style="display: none;">
<strong>Komponens:</strong>
admin.UserBo.getUserByEmailForLogin
<strong>Log:</strong>
java.lang.String=root
</div>
</td>
<td>1</td>
<td>2010-07-02 13:27:07.0</td>
<td>NORMAL</td>
<td>root</td>
<td> </td>
</tr>
<tr>
<td>
<a><img src="images/arrow_down.png" alt="" /></a>
<div style="display: none;">
<strong>Komponens:</strong>
admin.UserRequestBo.saveUserRequest
<strong>Log:</strong>
Log entry
</div>
</td>
<td>2</td>
<td>2010-07-02 14:04:28.0</td>
<td>NORMAL</td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>

Végül

Ha mindent jól csináltunk, akkor a táblázatunkban lenyitható és bezárható egy sor a kis ikonnal.