我想通过匹配外部字符串文本来突出显示剑道网格单元格。我用谷歌搜索了很多，但发现只在特定列中搜索字符串。下面是适用于一列的代码 $("#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 回答
侃侃尔雅
TA贡献1801条经验 获得超16个赞
最好的做法是使用模板，例如：
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>
添加回答
举报
0/150
提交
取消