java - 使用 DisplayTag 库，我希望使用 TableDecorator 让当前选定的行具有唯一的自定义类

Question

我一直在尝试找出如何突出显示表格中选定的行。在我的 jsp 中，我有 jsp scriplet，可以访问 displaytag 库正在创建的行的 id。我想将它与用户 ${currentNoteId} 选择的当前行的 id 进行比较。现在，如果行 id = 849(硬编码)，则类“currentClass”将添加到表的该行。我需要更改 {$currentNoteId} 的 849，但我不知道该怎么做。我正在使用java，Spring MVC。该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>
...

这也可以使用 javascript 来完成，这可能是最好的，但文档建议这样做，所以我想我会尝试一下。我无法在任何地方找到使用 addRowClass() 的示例，除非比较的是行中已有的字段(文档示例中使用了美元金额)或硬编码为“849”id。

感谢您提供的任何帮助。

Answer 1

我继续用 JavaScript 来完成它。当我在 scriptlet 中使用 currentNoteId 时，如下所示:

String rowId = row.getId();
String noteId = (String) pageContext.getAttribute("currentNoteId");
if ( rowId.equals( noteId ) ) {
    return "currentClass";
}
return null;

我收到错误:收到错误无法引用不同方法中定义的内部类内的非最终变量 pageContext。

所以我写道:

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"   );  
        };
    }
}

实际上这在 IE 中可能不起作用，因为“class”是一个关键字，所以我使用 Yahoo YUI addClass(element, class) 代替，所以我替换了

var rowClass = rows[i].getAttribute("class");
rows[i].setAttribute("class", rowClass + " currentClass"   ); 

与

YAHOO.util.Dom.addClass(rows[i],'currentClass');