0

グリッドのチェックボックス列に問題があります。

複数のチェックボックス列を持つグリッドがあります。チェックボックスをオンにすると、汚れた目盛りはありませんが、チェックボックスではなくチェックボックスを含むセルをクリックしてからチェックボックスをクリックすると、汚れた目盛りが表示されます。

誰もこれを見たことがありますか？数回クリックすると一部の行の汚れたマークが消えるため、もう少し一貫性を持たせたいと思います。

これは奇妙に思えます。

ありがとう！

4

4 に答える 4

0

はい、これはよく見かけます。チェックボックスの実装方法によって異なります。チェックボックスを直接選択すると、モデルは変更されますinputが、モデルは変更されません。セルにチェックを入れてからチェックボックスにチェックを入れると、Kendo UI は編集モードに切り替わり、(バックグラウンドで)モデルを変更できる Kendo UI によって管理される (イベント ハンドラー) チェックボックスの編集可能なバージョンにチェックボックスを置き換えます。

編集:チェックボックスを常にクリック可能にしたい場合は、次のようにします。

var grid = $("#stocks_tbl").kendoGrid({
    dataSource: new kendo.data.DataSource({
        ...
        schema: {
            model: {
                id    : "id",
                fields: {
                    active: { type: "boolean" }
                }
            }
        }
    }),
    editable  : "incell",
    columns   : [
        {
            field   : "active",
            title   : "Active",
            template: '<input type="checkbox" data-bind="source: active" #= active ? checked="checked" : ""# />'
        },
        ...
    ]
}).data("kendoGrid");

inputここでは、常にクリック可能なを定義します。

$(document).on("change", "[type='checkbox']", function(ev) {
    var item = grid.dataItem($(this).closest("tr"));
    item.set("active", ev.srcElement.checked);
});

これにより、 の変更をインターセプトするためのハンドラを定義し、inputに反映しますmodel。

これにより、遊ぶ必要がなくなりますeditable

于 2013-03-26T21:40:53.797 に答える
0

私がそれを解決した方法は、モデル内のフィールドを編集不可にすることでした。これにより、クリック イベントが強制的に発生し、値を更新してダーティ プロパティを設定するだけになりました。セルをクリックすると、編集イベントがクリックに対して発生し、その逆も発生したため、2 つのイベントを発生させる代わりに、1 つを無効にしました。ハックと呼ぶ人もいますが、両方のイベントが発生するのを防ぐ方法が他にわかりません。

于 2013-03-28T17:14:57.070 に答える
0

実際、最初にセルをクリックして「編集」モードに入る必要があります。その後、実際のチェックボックスをオン/オフにできます。ユーザー エクスペリエンスを向上させるために、このコード ライブラリの記事で実装されているのとまったく同じ方法でチェックボックスを実装できます。(ASP.NET MVC ラッパーを使用していない場合は、プロジェクトを開いてViews/Home/Index.cshtmlに移動し、コードをコピーして貼り付けることができます。すべて JavaScript です。

コード ライブラリには、列ヘッダーに「すべて選択」チェックボックスを作成する方法も含まれています。

于 2013-03-27T06:17:10.980 に答える
0

これをお試し下さい：

 //Cell click Checkbox select
    $('#grd' + gridName).on("click", "td", function (e) {
        var selectedTd = $(e.target).closest("td");              
         var grdChkBox = selectedTd.parents('tr').find("td:first").find('input:checkbox');
         grdChkBox.prop('checked', !grdChkBox.prop('checked'));

    });
于 2013-03-29T11:05:05.587 に答える