web-dev-qa-db-fra.com

Comment obtenir un index de ligne et un index de cellule de ligne cliquez sur la grille de kendo

J'ai ajouté un événement onchange pour la grille de kendo-ui.

En cela, j'essaie d'obtenir la valeur d'ID pour cette ligne particulière. J'ai ajouté une colonne d'image en tant que première colonne de la grille. Ce que je veux, c'est quand on clique sur l'image, je veux ouvrir une url d'image.

Donc, en gros, ce que je veux, c'est que lorsque je clique sur la ligne, je veux obtenir l'index de la ligne cliqué et je veux aussi obtenir l'index de la cellule cliquée dans cette ligne.

Donc, en fonction de la ligne cliquée et si ce n'est pas la première cellule cliquée, je souhaite afficher une alerte. Si je clique sur la première cellule, je souhaite ouvrir l'image.

Comment puis-je obtenir cet index.

J'ai mis selectable: row dans la grille de kendo-ui

S'il vous plaît aidez-moi sur ce point.

kendo-uitelerikkendo-grid
18
user2117983

Veuillez essayer avec l'extrait de code ci-dessous.

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>
28
Jayesh Goyani

Si tout ce dont vous avez besoin est de connaître les index de lignes et de colonnes de la table, vous pouvez le faire:

$(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);
});
  • Où je mets un gestionnaire click pour cliquer dans les cellules de la grille.
  • Ensuite, je trouve à quelle ligne (<tr>) cette cellule appartient en utilisant jQuery closest.
  • Utilisez ensuite jQuery index pour rechercher l'index de cette ligne dans la table.
  • Faites de même pour trouver l'index de cellule à l'intérieur de la ligne.

Mais peut-être existe-t-il des moyens plus simples de détecter si l'utilisateur a cliqué sur une image ou de définir une classe CSS dans l'image, puis de vérifier si la cellule sur laquelle vous avez cliqué a cette classe,.

EDIT Si vous souhaitez en plus récupérer la item originale à l'intérieur du gestionnaire click. Ajouter

var item = grid.dataItem(row);

A partir de là, vous pouvez obtenir id ou tout autre champ à valider.

Exemple ici: http://jsfiddle.net/OnaBai/MuDX7/

18
OnaBai

Kendo a introduit colonnes figées depuis que la question a été résolue, je pense donc qu'elle méritait une petite mise à jour pour traiter cette fonctionnalité.

Lorsque vous avez une colonne gelée, la grille crée de nouveaux tableaux d'en-tête/contenu pour gérer les colonnes gelées. Si vous bloquez une colonne, les éléments liés à cette colonne seront déplacés du tbody/thead de la grille normale vers le verrouedContent/header (le contraire est également vrai).

Si vous obtenez l'index en utilisant la réponse acceptée, vous obtenez l'index de la cellule dans le tbody (ou -1 si la cellule est gelée). La vraie question est qu'est-ce que vous voulez faire avec l'index de colonne? Si vous voulez vraiment un numéro d'index, vous devrez peut-être ajuster la valeur en ajoutant le nombre de colonnes dans le contenu verrouillé en fonction de vos besoins. Cependant, si votre objectif final est d'obtenir l'objet colonne de la grille, vous pouvez le faire en utilisant l'élément 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;
  }

});

Disclaimer: juste pour ajouter un niveau de complexité, vous devriez également considérer que le kendo a également introduit une fonctionnalité en-tête de plusieurs colonnes qui peut invalider mon code ci-dessus.

5
The_Black_Smurf

Pour l’index des cellules, la grille de kendo utilise la méthode cellIndex (cell)

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