Kitaláljuk, lefejlesztjük, telepítjük

Projektjeinkben táblázatos megjelenítéshez általában a DisplayTag nevezetű tag könyvtárat használjuk, mert jól összefér a használt Struts2 és Spring keretrendszerekkel, és egyszerűen formázható, programozható. Szerettem volna azonban kicsit többet, mint amit tud, mégpedig ha részletes adatokat tudna megjeleníteni egy legördülő sorban jQuery segítségével. Ez arra jó, ha egy sorban nem szeretnénk minden adatot bezsúfolni, mert nem mindig érdekli a felhasználót, de azért néha szeretné megtekinteni a részletes adatokat.

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.

Címkék: fejlesztés, jquery

Ez a bejegyzés 2010. július 7. szerda 23:01-kor készült és a következő kategóriákban található: Szoftverfejlesztés. Valamennyi hozzászólás követhető az RSS 2.0 hírcsatornán keresztül. Hozzá lehet szólni, vagy küldhető visszajelzés a saját oldalról.