jquery - 在剑道网格中搜索并突出显示搜索字符串

我的要求是搜索剑道网格，并在网格的某些特定列中以黄色突出显示所有出现的搜索字符串。没有其他jquery插件，我该怎么做。我在想好像我必须找到表格，其中数据显示在网格中，并通过某个类名获取该表格，并迭代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列。

这是正确的方法吗？有什么更好的方法吗？我对剑道控件非常陌生。



按照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>';
        }));
     }

最佳答案

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

关于jquery - 在剑道网格中搜索并突出显示搜索字符串，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33931321/