I have been trying to figure out how to highlight the selected row in a table. In my jsp I have jsp scriplet that can get access to the id of the row the displaytag library is creating. I want to compare it to the the id of the current row selected by the user ${currentNoteId}. Right now if the row id = 849 (hardcoded) the class "currentClass" is added to just that row of the table. I need to change the 849 for the {$currentNoteId} and I don't know how to do it. I am using java, Spring MVC. The jsp: ...
<%
request.setAttribute("dyndecorator", new org.displaytag.decorator.TableDecorator()
{
public String addRowClass()
{
edu.ilstu.ais.advisorApps.business.Note开发者_开发问答 row =
(edu.ilstu.ais.advisorApps.business.Note)getCurrentRowObject();
String rowId = row.getId();
if ( rowId.equals("849") ) {
return "currentClass";
}
return null;
}
});
%>
<c:set var="currentNoteId" value="${studentNotes.currentNote.id}"/>
...
<display:table id="noteTable" name="${ studentNotes.studentList }" pagesize="20"
requestURI="notesView.form.html" decorator="dyndecorator">
<display:column title="Select" class="yui-button-match" href="/notesView.form.html"
paramId="note.id" paramProperty="id">
<input type="button" class="yui-button-match2" name="select" value="Select"/>
</display:column>
<display:column property="userName" title="Created By" sortable="true"/>
<display:column property="createDate" title="Created On" sortable="true"
format="{0,date,MM/dd/yy hh:mm:ss a}"/>
<display:column property="detail" title="Detail" sortable="true"/>
</display:table>
...
This could also get done using javascript and that might be best, but the documentation suggested this so I thought I would try it. I cannot find an example anywhere using the addRowClass() unless the comparison is to a field already in the row (a dollar amount is used in the documentation example) or hardcoded in like the "849" id.
Thanks for any help you can provide.
I went ahead and did it in javascript instead. When I used the currentNoteId in the scriptlet like this:
String rowId = row.getId();
String noteId = (String) pageContext.getAttribute("currentNoteId");
if ( rowId.equals( noteId ) ) {
return "currentClass";
}
return null;
I received the error: got error Cannot refer to a non-final variable pageContext inside an inner class defined in a different method.
So instead I wrote:
function highlightCurrentTableRow(tableId, currentRowId ) {
var table = document.getElementById(tableId);
var rows = table.getElementsByTagName("tr");
console.log( "rowId", "'" + currentRowId + "'" );
for (i = 1; i < rows.length; i++) {
rowId = rows[i].getElementsByTagName("td")[0].innerHTML;
console.log( " rowId", "'" + rowId + "'" );
if ( rowId == currentRowId ) {
console.log( "got here" );
var rowClass = rows[i].getAttribute("class");
rows[i].setAttribute("class", rowClass + " currentClass" );
};
}
}
Actually this may not work in IE because of "class" is a key word so I used Yahoo YUI addClass(element, class) instead so I replaced
var rowClass = rows[i].getAttribute("class");
rows[i].setAttribute("class", rowClass + " currentClass" );
with
YAHOO.util.Dom.addClass(rows[i],'currentClass');
精彩评论