首頁猿問 Kendo 網格按外部值突出顯示所有列

Kendo 網格按外部值突出顯示所有列

JavaScript

一只甜甜圈 2021-12-23 15:17:18

我想通過匹配外部字符串文本來突出顯示劍道網格單元格。我用谷歌搜索了很多，但發現只在特定列中搜索字符串。下面是適用于一列的代碼 $("#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>

<title>Untitled</title>

<body>

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>

反對回復 2021-12-23

1 回答
0 關注
161 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

Kendo 網格按外部值突出顯示所有列

Kendo 網格按外部值突出顯示所有列

1 回答

添加回答