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

Question

我的要求是搜索 kendo 网格，并在网格的某些特定列中以黄色突出显示所有出现的搜索字符串。如果没有任何其他 jquery 插件，我怎么能做到这一点。我在想我必须找到数据显示在网格中的 table 并通过某些 class 名称获取 table 并迭代 tr>td 并获取 HTML并替换文字。

我做到了，'English_Description_LongDesc'是我的网格的字段名

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.

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

根据 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 TREE' 中搜索 'Apple'，它不会突出显示。有任何想法吗。

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

更多要求

我们能否使用相同的正则表达式以逗号分隔格式突出显示作为输入给出的所有搜索词？例如：搜索输入是 'apple,Orange,GRAPES'。我们必须在网格中突出显示 apple 或 Orange 或 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 网格中搜索并突出显示搜索字符串

Search and highlight the search string in kendo grid

html

jquery

kendo-ui

kendo-grid