剑道网格按外部值突出显示所有列答案

【问题标题】：Kendo grid highlight all column by external value剑道网格按外部值突出显示所有列
【发布时间】：2019-11-11 09:29:25
【问题描述】：

我想通过匹配外部字符串文本来突出显示剑道网格单元。我搜索了很多，但发现只在特定列中搜索字符串。下面是适用于一列的代码

 $("#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>'));
});

但我希望在所有列中搜索字符串文本。谁能帮我解决这个问题？

【问题讨论】：

标签： javascript jquery asp.net kendo-ui kendo-grid

【解决方案1】：

IMO 最好的做法是使用模板，例如：

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>

Demo in Dojo

【讨论】：

此代码不区分大小写。你能不能让它不区分大小写