web-dev-qa-db-ja.com

行クリック剣道グリッドの行インデックスとセルインデックスを取得する方法

剣道UIグリッドにonchangeイベントを追加しました。

その点で、その特定の行のID値を取得しようとしています。グリッドの最初の列として画像列を追加しました。画像がクリックされたときに、画像のURLを開きたいです。

だから、基本的に私が欲しいのは、行をクリックすると、クリックされた行のインデックスを取得し、その行のクリックされたセルのインデックスも取得したいということです。

したがって、クリックされた行に基づいて、それが最初にクリックされたセルでない場合、アラートを表示したいと思います。最初のセルがクリックされたら、画像を開きます。

このインデックスを取得するにはどうすればよいですか。

選択可能に設定しました：剣道UIグリッドの行

これで私を助けてください。

kendo-uitelerikkendo-grid
19
user2117983

以下のコードスニペットで試してください。

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

必要なのは、テーブル内の行と列のインデックスを知ることだけです。

$(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/

20
OnaBai

剣道は frozen columns を導入しました。質問に答えられたので、その機能を扱うには少し更新が必要だと思います。

固定列がある場合、グリッドは固定列を管理するための新しいヘッダー/コンテンツテーブルを作成します。列をフリーズすると、この列にリンクされたアイテムが通常のグリッドの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;
  }

});

免責事項：複雑さのレベルを追加するために、剣道が 複数列ヘッダー 機能も導入したことも考慮する必要があります上記のコードが無効になる場合があります。

5
The_Black_Smurf

セルインデックスの場合、剣道グリッドにはメソッド cellIndex（cell） があります。

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