Сетка кендо подсвечивает весь столбец по внешнему значению - PullRequest
Новая
       28

Сетка кендо подсвечивает весь столбец по внешнему значению

1 голос
/ 11 ноября 2019

Я хочу выделить ячейку сетки кендо, сопоставляя текст внешней строки. Я много гуглил, но нашел только поиск строки в определенном столбце. ниже приведен код, который работает для одного столбца 

 $("#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 Ответ

2 голосов
/ 11 ноября 2019

Лучше всего для этого 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>

Демонстрация в Dojo

...