导航到特定单元格

Question

我正在使用 KendoUI Grid 来显示一些数据，该网格是可分页和可滚动的，现在我可以 select 并滚动到特定行，但现在当我在那里时，我也应该能够导航和 select a该行的特定单元格（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和 select 该行的那个单元格。

有什么办法吗？ 使用来自 KendoUI 的 JavaScript 或 jQuery 或本机 function？

这是一个Dojo可以玩。

Answer 1

将 class 添加到 Discontinued 列定义中：

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

将您使用的选择器更改为 select 行，如下所示：

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

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

导航到特定单元格

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-01-13 18:04:42

导航到特定单元格

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-01-13 18:04:42

解决方案1
1 已采纳 2022-01-13 18:04:42