Kendo 网格按外部值突出显示所有列
我想通过匹配外部字符串文本来突出显示剑道网格单元格。我用谷歌搜索了很多，但发现只在特定列中搜索字符串。下面是适用于一列的代码
$("#grid").kendoGrid({
selectable: "multiple cell",
allowCopy: true,
columns: [
{ field: "productName" },
{ field: "category" }
],
dataSource: [
{ productName: "Tea", category: "Beverages" },
{ productName: "Coffeete", category: "Beverageste" },
{ productName: "Ham", category: "Foodte" },
{ productName: "Bread", category: "Food" }
]
});
var grid = $("#grid").data('kendoGrid');
var value = 'te';
var regex = new RegExp(value, "gi");
var colIndex = 0;
grid.tbody.find('tr[data-uid]').each(function () {
var td = $(this).find('td:eq(' + colIndex + ')');
var item = grid.dataItem(this);
td.html(item.productName.replace(regex, '<span style="background-color:yellow">' + value + '</span>'));
});
但我希望在所有列中搜索字符串文本。谁可以帮我这个事？
一只甜甜圈1回答
-
侃侃尔雅
最好的做法是使用模板，例如：template: "#= findText(data.fieldName) #"该模板将使用一个函数来创建搜索突出显示，这可能与您已经完成的类似：var findText = function findText(text) { let index = text.indexOf(value), result = text; // If substring is found in current text if (index > -1) { let regex = new RegExp(value, "gi"); result = result.replace(regex, '<span style="background-color:yellow">' + value + '</span>'); } return result;};<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Untitled</title> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.common.min.css"> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.rtl.min.css"> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default.min.css"> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.mobile.all.min.css"> <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/angular.min.js"></script> <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jszip.min.js"></script> <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script></head><body> <div id="grid"></div> <script> var value = 'co'; var findText = function findText(text) { let index = text.toLowerCase().indexOf(value), result = text; // If substring is found in current text if (index > -1) { let regex = new RegExp(`(${value})`, "gi"); result = result.replace(regex, '<span style="background-color:yellow">$1</span>'); } return result; }; $("#grid").kendoGrid({ selectable: "multiple cell", allowCopy: true, columns: [ { field: "productName", template: "#= findText(data.productName) #" }, { field: "category", template: "#= findText(data.category) #" } ], dataSource: [ { productName: "Tea", category: "Beverages" }, { productName: "Coffeete", category: "Beverageste" }, { productName: "Ham", category: "Foodte" }, { productName: "Bread", category: "Food" } ] }); </script></body></html>
随时随地看视频慕课网APP
相关分类
JavaScript