使用 DisplayTag 库，我想让当前选定的行有一个使用 TableDecorator 的唯一自定义类答案

【问题标题】：Using DisplayTag library, I want to have the currently selected row have a unique custom class using the TableDecorator使用 DisplayTag 库，我想让当前选定的行有一个使用 TableDecorator 的唯一自定义类
【发布时间】：2011-02-05 01:09:51
【问题描述】：

我一直在试图弄清楚如何在表格中突出显示选定的行。在我的 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。

感谢您提供的任何帮助。

【问题讨论】：

标签： java jsp jsp-tags displaytag

【解决方案1】：

我继续使用 javascript 来实现。当我像这样在脚本中使用 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');

【讨论】：