Comment obtenir l'index de ligne et l'index de cellule de ligne cliquez sur la grille de kendo
j'ai ajouté l'événement onchange pour la grille kendo-ui.
en ce que j'essaie d'obtenir la valeur ID pour cette ligne particulière. J'ai ajouté une colonne image comme première colonne de la grille. Ce que je veux, c'est lorsque l'image est cliqué, je veux ouvrir une url de l'image.
donc, fondamentalement ce que je veux est que lorsque je clique sur la ligne, je veux obtenir l'index de ligne cliqué et aussi je veux obtenir l'Index de cellule cliqué dans cette ligne.
donc basé sur la ligne cliquée et si elle n'est pas la première cellule cliquée, je veux afficher l'alerte. Si je clique sur la première cellule, je veux ouvrir l'image.
Comment puis-je obtenir cet indice.
j'ai défini selectable : row dans la grille de kendo-ui
Merci de m'aider sur ce point.
4 réponses
essayez avec de 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>
Si vous avez besoin de savoir la ligne et la colonne de l'index dans la table que vous pouvez 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
clickgestionnaire de clic dans les cellules de la grille. - puis je trouve à quelle ligne (
<tr>) cette cellule appartient à l'utilisation de jQueryclosest. - la Prochaine utilisation de jQuery
indexpour trouver l'indice de la ligne dans la table. - faites de même pour trouver l'index de la cellule à l'intérieur de la rangée.
mais peut-être là sont des moyens plus simples comme la détection si l'Utilisateur a cliqué sur une image, ou définir une classe CSS dans l'image et puis vérifier si la cellule cliquée a cette classe,...
EDIT Si en plus vous voulez récupérer l'original item à l'intérieur du click gestionnaire. Ajouter
var item = grid.dataItem(row);
A partir de là, vous pouvez obtenir id ou tout autre champ pour validation.
exemple ici:http://jsfiddle.net/OnaBai/MuDX7/
Kendo a introduit congelés colonnes puisque la question a été répondue donc je pense qu'il méritait une petite mise à jour pour traiter de cette fonctionnalité.
lorsque vous avez une colonne gelée, la grille va créer de nouvelles tables d'en-tête / contenu pour gérer les colonnes gelées. Si vous congelez une colonne, elle déplacera l'article lié à cette colonne de la grille régulière de tbody / thead vers le contenu / lockedHeader (le contraire est également vrai).
Si vous obtenez l'indice en utilisant la réponse acceptée, vous obtiendrez l'index de la cellule dans le corps (ou -1 si la cellule est gelée). La vraie question est: que voulez-vous faire avec l'index de colonne? Si vous voulez vraiment un numéro d'index, vous pouvez devoir ajuster la valeur en ajoutant le nombre de colonnes dans le contenu verrouillé en fonction de vos besoins. Cependant, si votre but final est d'obtenir l'objet colonne de la grille, cela peut être fait en utilisant le th elément:
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;
}
});
Avertissement: il suffit de pour ajouter un niveau de complexité, vous devriez également considérer que kendo a également introduit un plusieurs en-tête de colonne fonctionnalité qui peut invalider mon code ci-dessus.
pour l'index des cellules, la grille de kendo a une méthode cellIndex(cellule)
var cell = $("#grid td:eq(1)");
console.log(grid.cellIndex(cell));