1

在我的应用程序中，我有一个 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>

旧桌子（倒塌的身体和头部）：

<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>
4

1 回答 1

2

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

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

试试这个jquery highlight 插件。更多关于 ajax 全局调用监听器的信息。

我做了一个简单的演示，你可以检查一下。

于 2013-04-18T18:09:34.633 回答