2

Telerik KendoグリッドをMVCとC＃で使用しています。グリッドがあり、いくつかのデータが入力されており、チェックボックス列が追加されています。これは、ユーザーがすべてを選択できるようにするために使用されます。

ここで、「selectAll」チェックボックスをオンにすると、すべてのチェックボックスがオンになります（行ごとに1つ）。

私がしたいこと：行をダブルクリックして、チェックボックスのチェックを変更できるようにしたい-チェックされていない場合は、dbl-clickでチェックされ、その逆も同様です。

また、剣道グリッドではユーザーが多くを選択できるので（マウスダウン、ドラッグ、マウスアップ-デスクトップ上のアイコンを選択するときのように）、ユーザーがこのアクションを実行したときに、選択したすべての行にチェックボックスがオンになっている場合、すでにチェックされている場合は、このアクションによりチェックボックスがオフになります。

詳細：

  • グリッド名：グリッド
  • JQueryバージョン：1.8.3
  • MVC 4
  • 最新のKendoUI

「selectAll」チェックボックスがオンになっているときにすべてのチェックボックスをチェックするためのコード：

$(document).ready(function () {
var grid = $('#Grid').data('kendoGrid');
    grid.thead.find("th:last")
    .append($('<input class="selectAll" type="checkbox"/>'))
    .delegate(".selectAll", "click", function () {
        var checkbox = $(this);
        grid.table.find("tr")
            .find("td:last input")
            .attr("checked", checkbox.is(":checked"))
            .trigger("change");
    });
});

私はJavascriptの初心者なので、どんな助けでも大歓迎です。

4

1 に答える 1

7

あなたの例はうまくいくようです：http：//jsfiddle.net/scaillerie/axpmF/。

document.readyイベントの最初に追加して、グリッドをkendoGridとして設定する必要があります。

$('#Grid').kendoGrid();

テーブルの最後のすべてのセルにチェックボックスがあることを確認してください...

編集 ：

選択した行のチェックボックスの状態を更新するにdblclickは、グリッドの各セルにイベントを登録する必要があります。

grid.tbody.on("dblclick", "tr", selectAllSelectedRows);

function selectAllSelectedRows() {
    grid.tbody.find("tr").each(function() {
        var $this = $(this),
            ckbox,
            state;

        if($this.hasClass("k-state-selected")) {
            ckbox = $this.find("td:last input");
            state = ckbox.prop("checked");
            ckbox.prop("checked", !state);   
        }
    })
}

新しいコードでフィドルを更新しました：http：//jsfiddle.net/scaillerie/axpmF/2/。

于 2012-12-11T10:43:29.807 に答える