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 property="idAuditlog" title="id">
<display:column property="creationTime" title="Time">
<display:column property="priority" title="Priority">
<display:column property="username" title="User">
<display:column title="Description">
${auditlogList.description}
</display:column>
</display:column></display:column></display:column></display:column></display:setproperty></display:setproperty></display:setproperty></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@anura.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.<b style="color:black;background-color:#ffff66">displaytagdetail</b> = 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("
<div style="display:none">" +
$(this).next("div").html() +
"</div>
");
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" src="<s:url value='/js/jquery.displaytagdetail.js'/>"></script>
<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 property="idAuditlog" title="id">
<display:column property="creationTime" title="Time">
<display:column property="priority" title="Priority">
<display:column property="username" title="User">
<display:column title="Description">
${auditlogList.description}
</display:column>
</display:column></display:column></display:column></display:column></display:setproperty></display:setproperty></display:setproperty></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"></a>
<div style="display:none">
<strong>Komponens:</strong><br>
admin.UserBo.getUserByEmailForLogin<br><br>
<strong>Log:</strong><br>
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"></a>
<div style="display:none">
<strong>Komponens:</strong><br>
admin.UserRequestBo.saveUserRequest<br><br>
<strong>Log:</strong><br>
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
+36 1 784 5087