java - onchange 后 Wicket 数据表更改单元格的字体或 css

Question

在我的应用程序中，我有一个 defaultDataTable，它有一个可点击的列和一个用于过滤表格的搜索字段。过滤器在输入字段中插入字符后过滤数据表的内容。我的目标是在适用于用户输入的字段中的文本部分下划线(或其他 css)。

示例:如果用户输入“ab”，字符串“abc”中的字符“a”和“b”应该带有下划线。使用 Javascript 我可以添加一些样式，但是我的函数对数据表做了一些奇怪的事情。它会删除表格标签内的所有内容，然后将新的 html 放在那里。所有其他信息都消失了。我做错了什么？

<script>
    $('.searchField').keyup(function(){
        var page = $('.datatable');
        alert(page.text());
        var pageText = page.text().replace("<span>","").replace("</span>");
        alert(pageText);
        var searchedText = $('#searchField').val();
        var theRegEx = new RegExp("("+searchedText+")", "igm");    

        var newHtml = pageText.replace(theRegEx ,"<b>$1</b>");
        alert(newHtml);
        page.html(newHtml);
   });
</script>

新表:

<table id="ID" class="datatable" wicket:id="ID">
Col1 Col2 123
<b>MATCHEDCHAR</b>
TEXT
<b>MATCHEDCHAR</b>
TEXT
</table>

旧表(折叠的 body 和头部):

<table id="ID" class="datatable" wicketsource="URL.java" wicket:id="ID">
<thead wicketsource="org.apache.wicket.extensions.markup.html.repeater.data.table:DataTable.java:181" wicket:id="topToolbars">
<tbody wicketsource="org.apache.wicket.extensions.markup.html.repeater.data.table:DataTable.java:207" wicket:id="body">
<tr class="even" wicketsource="org.apache.wicket.extensions.markup.html.repeater.data.table:DefaultDataTable.java:71" wicket:id="rows">
</tbody>
</table>

Answer 1

我认为您在 searchField 上有一个执行表刷新的处理程序。 因此，您只需订阅 complete ajax 事件。

Wicket.Event.subscribe('/ajax/call/complete', function(jqEvent, attributes, jqXHR, errorThrown, textStatus) {
  // call code that highlight the text
});

您可以将此订阅方法放在页面中(在script 标记中)。 如果你想将 js 调用链接到特定的行为，比如 OnChangeAjaxBehavior，那么你需要调用 target.appendJavaScript:

    new OnChangeAjaxBehavior(){
        @Override
        protected void onUpdate(AjaxRequestTarget target) {
            target.appendJavaScript("<call highlight function here>");
        }
    };

尝试 this jquery 高亮插件。 关于 ajax 全局调用监听器的更多信息 here .

我做了一个简单的 demo所以你可以检查它。