导航到特定单元格答案

【问题标题】：Navigate to specific cell导航到特定单元格
【发布时间】：2022-01-13 17:15:52
【问题描述】：

我正在使用 KendoUI Grid 来显示一些数据，该网格是可分页和可滚动的，现在我可以选择并滚动到特定行，但现在当我在那里时，我也应该能够导航并选择该行的特定单元格（td）。这就是我到目前为止所做的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2021.3.1207/js/kendo.all.min.js"></script>
</head>
<body>
  
    Select row with ID = <input id="numeric" /> (1-78)
    <button id="searchBtn" class="k-button">Go</button>
    <div id="grid"></div>
    <script>
      function selectGridRow(searchedId, grid, idField){
        var dataSource = grid.dataSource;
        var filters = dataSource.filter() || {};
        var sort = dataSource.sort() || {};
        var models = dataSource.data();
        // We are using a Query object to get a sorted and filtered representation of the data, without paging applied, so we can search for the row on all pages
        var query = new kendo.data.Query(models);
        var rowNum = 0;
        var modelToSelect = null;

        models = query.filter(filters).sort(sort).data;

        // Now that we have an accurate representation of data, let's get the item position
        for (var i = 0; i < models.length; ++i) {
          var model = models[i];
          if (model[idField] == searchedId) {
            modelToSelect = model;
            rowNum = i;
            break;
          }
        }

        // If you have persistSelection = true and want to clear all existing selections first, uncomment the next line
        // grid._selectedIds = {};

        // Now go to the page holding the record and select the row
        var currentPageSize = grid.dataSource.pageSize();
        var pageWithRow = parseInt((rowNum / currentPageSize)) + 1; // pages are one-based
        grid.dataSource.page(pageWithRow);

        var row = grid.element.find("tr[data-uid='" + modelToSelect.uid + "']");
        if (row.length > 0) {
          grid.select(row);

          // Scroll to the item to ensure it is visible
          grid.content.scrollTop(grid.select().position().top);
        }
      }

      $(document).ready(function () {

        $("#searchBtn").click(function(){
          var grid = $("#grid").data("kendoGrid");
          var searchedId = $("#numeric").data("kendoNumericTextBox").value();

          selectGridRow(searchedId, grid, "ProductID");
        });

        $("#numeric").kendoNumericTextBox({
          min: 1,
          max: 78,
          format: "n0"
        });

        $("#grid").kendoGrid({
          dataSource: {
            type: "odata",
            transport: {
              read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
            },
            schema: {
              model: {
                id: "ProductID",
                fields: {
                  ProductID: { type: "number" },
                  UnitPrice: { type: "number" },
                  UnitsInStock: { type: "number" }
                }
              }
            },
            pageSize: 10
          },
          height: 350,
          sortable: true,
          filterable: true,
          selectable: "row",
          pageable: {
            refresh: true,
            pageSizes: true
          },
          columns: [
            {
              field: "ProductID",
              title: "ID",
              width: 100
            },{
              field: "ProductName",
              title: "Product Name",
              width: 180
            },{
              field: "ProductName",
              title: "Product Name 2",
              width: 230
            },{
              field: "ProductName",
              title: "Product Name 3",
              width: 230
            },{
              field: "ProductName",
              title: "Product Name 4",
              width: 230
            },{
              field: "ProductName",
              title: "Product Name 5",
              width: 230
            },{
              field: "UnitPrice",
              title: "Unit Price",
              width: 150
            }, {
              field: "UnitsInStock",
              title: "Units in Stock",
              width: 150
            }, {
              field: "Discontinued",
              width: 150
            }]
        });
      });
    </script>
</body>
</html>

例如，我想做的是导航到第 4 行（这是有效的），但也导航到列 Discontinued 并选择该行的那个单元格。

有什么办法吗？使用 JavaScript 或 jQuery 或 KendoUI 的原生函数？

这里有一个Dojo 可以玩。

【问题讨论】：

标签： javascript jquery kendo-ui kendo-grid

【解决方案1】：

在 Discontinued 列定义中添加一个类：

{
    field: "Discontinued",
    width: 150,
    attributes: {
        class: "discontinued"
    }
}

将用于选择行的选择器更改为以下内容：

var row = grid.element.find("tr[data-uid='" + modelToSelect.uid + "'] td.discontinued");

将grid.content.scrollTop(grid.select().position().top); 替换为row[0].scrollIntoView();。

【讨论】：

这选择了单元格，但我想知道是否可以像导航到行的方式那样水平滚动到该单元格？
我已经更新了我的答案。