Как получить индекс строки и индекс ячейки сетки кликов кендо

Я добавил событие обмена для сетки kendo-ui.

В этом я пытаюсь получить значение ID для этой конкретной строки. Я добавил столбец изображения в качестве первого столбца в сетке. Я хочу, чтобы щелкнуть изображение, я хочу открыть URL-адрес изображения.

Итак, в основном, что я хочу, так это то, что когда я нажимаю на строку, я хочу получить индекс нажатой строки, а также хочу получить индекс щелкнутой ячейки в этой строке.

Таким образом, на основе щелкнутой строки, и если она не первая, которую я нажал, я хочу отобразить предупреждение. Если я нажал первую ячейку, я хочу открыть изображение.

Как я могу получить этот индекс.

Я установил selectable: row в сетке kendo-ui

Пожалуйста, помогите мне в этом.

Ответ 1

Пожалуйста, попробуйте сделать снимок кода ниже.

function onDataBound(e) {
    var grid = $("#Grid").data("kendoGrid");
    $(grid.tbody).on("click", "td", function (e) {
        var row = $(this).closest("tr");
        var rowIdx = $("tr", grid.tbody).index(row);
        var colIdx = $("td", row).index(this);
        alert(rowIdx + '-' + colIdx);
    });
}

$(document).ready(function () {
    $("#Grid").kendoGrid({
        dataSource: {
            type: "odata",
            transport: {
                read: "http://demos.kendoui.com/service/Northwind.svc/Orders",
                dataType: "jsonp"
            },
            schema: {
                model: {
                    fields: {
                        OrderID: { type: "number" },
                        Freight: { type: "number" },
                        ShipName: { type: "string" },
                        OrderDate: { type: "date" },
                        ShipCity: { type: "string" }
                    }
                }
            },
            pageSize: 10,
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true
        },
        dataBound: onDataBound,
        filterable: true,
        sortable: true,
        pageable: true,
        columns: [{
            field: "OrderID",
            filterable: false
        },
                        "Freight",
                        {
                            field: "OrderDate",
                            title: "Order Date",
                            width: 120,
                            format: "{0:MM/dd/yyyy}"
                        }, {
                            field: "ShipName",
                            title: "Ship Name",
                            width: 260
                        }, {
                            field: "ShipCity",
                            title: "Ship City",
                            width: 150
                        }
                    ]
    });
});


<div id="Grid"></div>

Ответ 2

Если вам нужно знать индекс строки и столбца в таблице, вы можете сделать:

$(grid.tbody).on("click", "td", function(e) {
    var row = $(this).closest("tr");
    var rowIdx = $("tr", grid.tbody).index(row);
    var colIdx = $("td", row).index(this);
    console.log("row:", rowIdx, "cell:", colIdx);
});

Где я устанавливаю обработчик click для щелчка в ячейках сетки.
Затем я нахожу, к какой строке (<tr>) принадлежит ячейка, использующая jQuery closest.
Следующее использование jQuery index для поиска индекса этой строки в таблице.
Сделайте то же самое для поиска индекса ячейки внутри строки.

Но, может быть, существуют более простые способы определения того, был ли пользователь нажат на изображение или задал какой-то CSS-класс на изображении, а затем проверить, имеет ли клетка с щелчком этот класс,...

EDIT Если вы хотите получить исходный item внутри обработчика click. Добавить

var item = grid.dataItem(row);

Оттуда вы можете получить id или любое другое поле для проверки.

Пример здесь: http://jsfiddle.net/OnaBai/MuDX7/

Ответ 3

Kendo ввел замороженные столбцы, так как на вопрос был дан ответ, поэтому я думаю, что он заслуживает небольшого обновления, чтобы справиться с этой функцией.

Когда у вас есть замороженный столбец, сетка создаст новые таблицы заголовков/содержимого для управления замороженными столбцами. Если вы замораживаете столбец, он перемещает элемент, связанный с этим столбцом, из регулярной сетки tbody/thead в lockedContent/lockedHeader (противоположное также верно).

Если вы получите индекс, используя принятый ответ, вы получите индекс ячейки внутри tbody (или -1, если ячейка заморожена). Реальный вопрос: что вы хотите сделать с индексом столбца? Если вам действительно нужен номер индекса, вам может потребоваться настроить значение, добавив количество столбцов в lockedContent в зависимости от ваших потребностей. Однако, если ваша конечная цель - получить объект столбца сетки, это можно сделать с помощью элемента th:

var row = cell.closest("tr");

var body;
var header;

if (cell.closest(grid.lockedContent).length) {
  body = grid.lockedContent;
  header = grid.lockedContent;
} else {
  body = grid.tbody;
  header = grid.thead;
}

var rowIndex = $("tr", body).index(row);
var columnIndex = $("td", row).index(cell);
var columnField = header.find("th").eq(columnIndex).attr("data-field");

var column;

$.each(grid.columns, function () {

  if (this.field === columnField) {
    column = this;
    return false;
  }

});

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

Ответ 4

Для индекса ячейки сетка кендо имеет метод cellIndex (cell)

var cell = $("#grid td:eq(1)");
console.log(grid.cellIndex(cell));