Question

我的要求是搜索一个剑道网格，并在网格的某些特定列中突出显示黄色搜索字符串的所有匹配项。如何在没有任何其他jquery插件的情况下完成此操作。我想我必须找到数据在网格中显示的表格，并通过某个类名获取表格并迭代tr＆gt; td并获取HTML并替换文本。

我已经这样做了，＆＃39; English_Description_LongDesc＆＃39;是我的网格的字段名称

var value = searchText;
var grid = $('#myKendoGrid').data('kendoGrid');
var columnFullText = "";
for (var index = 0; index < grid._data.length; index++) {

 columnFullText = grid._data[index]['English_Description_LongDesc'];
   //case-insensitive search
    if (columnFullText.toLowerCase().indexOf(value.toLowerCase()) >= 0) {
       //Here I want to get the 'English_Description_LongDesc' cell HTML and highlight the search string 
   }
}

我的想法就像我必须从kendo网格获取数据并获取相应的列数据并搜索数据，如果匹配则获取HTML并替换HTML列。

这是正确的做法吗？有没有更好的方法来做到这一点？ 我对剑道控件非常陌生。

根据Gene R解决方案。我这样做

var value = searchText;
var grid = $("#myKendoGrid").data('kendoGrid');   
var regex = new RegExp(value,"gi");
var colIndex = grid.thead.find("th[data-field='English_Description_LongDesc']").index();
var td = $(this).find('td:eq(' + colIndex + ')');
var item = grid.dataItem(this);
if (item.English_Description_LongDesc.indexOf(value) > -1) {
    td.html(item.English_Description_LongDesc.replace(regex, function (t) { return '<span class="highlight">' + t + '</span>'; }));
    }

但这有一个问题。它成为区分大小写的亮点。如果我搜索Apple＆＃39;在字符串＆＃39; APPLE TREE＆＃39;它不会突出显示。有任何想法吗。

工作正常。已更改if (item.English_Description_LongDesc.indexOf(value) > -1) { 到if (item.English_Description_LongDesc.toLowerCase().indexOf(value.toLowerCase()) > -1) {

更多要求

我们是否可以使用相同的正则表达式以逗号分隔格式突出显示作为输入的所有搜索词？例如：搜索输入是＆＃39; apple，Orange，GRAPES＆＃39;。我们必须在网格中突出显示苹果或橙色或GRAPES。 我从不理解正则表达式。这对我来说太难了 ..

更新 - 完成逗号分隔搜索 这是我的最终代码

var grid = $("#myKendoGrid").data('kendoGrid');   
var searchParts = searchText.split(",");
var regex = new RegExp(searchParts.join("|"), "gi");

grid.tbody.find('tr[data-uid]').each(function () {
     var colIndex = grid.thead.find("th[data-field='English_Description_LongDesc']").index();
     var td = $(this).find('td:eq(' + colIndex + ')');
     var item = grid.dataItem(this);
     if (regex.test(item.English_Description_LongDesc)) {
        td.html(item.English_Description_LongDesc.replace(regex, function (t) {
        return '<span class="highlight">' + t + '</span>';
        }));
     }

Answer 1

var value = searchText;
var grid = $("#myKendoGrid").data('kendoGrid');
var colIndex = grid.thead.find("th[data-field='English_Description_LongDesc']").index();   
var regex = new RegExp(value,"gi");

grid.tbody.find('tr[data-uid]').each(function(){
    var td = $(this).find('td:eq('+colIndex+')');
    var item = grid.dataItem(this);
    td.html(item.English_Description_LongDesc.replace(regex, '<span style="background-color:yellow">'+value+'</span>'));
});

更新：不区分大小写的高亮显示

这是工作示例：http://dojo.telerik.com/OraVA

更新2：如果不想替换value，请使用此方式：

td.html(item.English_Description_LongDesc.replace(regex, function(t){
    return '<span style="background-color:yellow">'+t+'</span>';
}));

示例：http://dojo.telerik.com/OraVA/5

搜索并突出显示kendo网格中的搜索字符串

1 个答案: