0

全体として、選択したチェックボックス ID を追跡するオブジェクトがあります。これを行う方法は、ID を配列にプッシュ/スライスすること$Grid.selectedRowsです。このオブジェクトは、「refresh」メソッドも更新ボタンにバインドします。そのオブジェクトを作成したクラスがありますKendoGridSelection。

私の問題は、クラス内にバインドされたボタンが正しい配列値を表示するのに対し、パブリック プロパティでクラス外にバインドされたボタンは、ボタンがクリックselectedRowsされた後に更新されないことです。refresh

テスト目的で、2 つのseeSelectedRowsArrayボタンがあります。

  1. seeSelectedRowsArrayボタン (内部バインド)
  2. seeSelectedRowsArray2ボタン (クラス外にバインド)

Chrome バージョン 28.0.1500.95 m でテストしています

これが私のコードです：

JS

var KendoGridSelection = function (gridID, pagerSelector) {
    var $Grid = this;
    $Grid.selectedRows = [];
    $Grid.gridID = gridID;
    $Grid.pagerSelector = pagerSelector;
    $Grid.grid = $($Grid.gridID).data('kendoGrid');
    $Grid.pager = $($Grid.pagerSelector).data('kendoPager');
    $Grid.gridCheckboxes = $('input[type=checkbox]', $Grid.gridID);
    $Grid.gridRows = $('table tbody tr', $Grid.gridID);
    $Grid.refreshButton = $('.refreshButton', $Grid.gridID);

    $Grid.bindUIEvents = function () {
        $Grid.gridCheckboxes = $('input[type=checkbox]', $Grid.gridID);
        $Grid.gridRows = $('.row', $Grid.gridID);

        // Row click event
        /*$($Grid.gridRows).click(function (e) {
            if (!$(e.target).parent().hasClass('k-hierarchy-cell')) $(this).find('input[type=checkbox]').click();
        });*/

        // Checkbock click event
        $($Grid.gridCheckboxes).click(function (e) {
            console.log('checkbox clicked!');
            e.stopPropagation();
            var $t = $(this);
            var checkboxID = $t.attr('id');
            var thisRow = $t.closest('tr');

            if ($t.is(':checked')) {
                thisRow.addClass('k-state-selected');
                // add to selected[]
                if ($.inArray(checkboxID, $Grid.selectedRows) === -1) $Grid.selectedRows.push(checkboxID);
            } else {
                thisRow.removeClass('k-state-selected');
                // remove from selected[]
                $Grid.selectedRows.splice($.inArray(checkboxID, $Grid.selectedRows), 1);
            }
        });
    }
    $Grid.gridPersistSelected = function () {
        $.each($Grid.selectedRows, function () {
            var $t = $('#' + this);
            if ($t) $t.click();
        });
    }
    $Grid.pagerChange = function () {
        $Grid.bindUIEvents();
        $Grid.gridPersistSelected();
    }
    $Grid.refresh = function () {
        $Grid.selectedRows = [];
        $Grid.gridCheckboxes.attr('checked', false);
        console.log('Refresh clicked.');
        console.log('$Grid.selectedRows: '+$Grid.selectedRows);
    }

    // Init
    $Grid.pagerChange();
    // $Grid.pager.bind("change", $Grid.pagerChange);
    // Unbind refresh button, then rebind
    // Refresh button
    $Grid.refreshButton.click(function(){
        console.log('reset!'); 
        $Grid.refresh();
    });

    $('.seeSelectedRowsArray').click(function(){
        console.log($Grid.selectedRows);
    });

    return {
        selectedRows: $Grid.selectedRows,
        refresh: $Grid.refresh,
    }
}

$(function(){
    window.activeThreatsGrid = new KendoGridSelection('.grid', '.pager');
   $('.seeSelectedRowsArray2').click(function(){
        console.log(activeThreatsGrid.selectedRows);
    });
});

HTML

<div class='grid'>
    <div class='row'>
        <label><input type="checkbox" id="item1"> </label>
    </div>
    <div class='row'>
        <label><input type="checkbox" id="item2"> </label>
    </div>
    <div class='row'>
        <label><input type="checkbox" id="item3"> </label>
    </div>
    <div class='row'>
        <label><input type="checkbox" id="item4"> </label>
    </div>
    <div class='row'>
        <label><input type="checkbox" id="item5"> </label>
    </div>
    <div class='pager'>
        <input type="button" value="refresh" class="refreshButton">
    </div>
        <div><input type="button" value="seeSelectedRowsArray" class="seeSelectedRowsArray"></div>
        <div><input type="button" value="seeSelectedRowsArray2" class="seeSelectedRowsArray2"></div>
</div>

CSS

.row{background:blue; height:20px; width:100px; margin-bottom:5px;}

JSFiddle

デモ

何が起こっている：

  • 複数のチェックボックスをクリックしてから をクリックするseeSelectedRowsArrayと、配列に正しい値が表示されます。ただし、これを何度も実行しても、正しい値を取得できます。
  • refreshボタンを押すと、console.log配列selectedRowsが空であることがわかります。次に、をクリックするseeSelectedRowsArrayと、配列は空です(予想通り)。をクリックするseeSelectedRowsArray2と、配列にはまだ値が含まれています。

更新 1

私が見つけたのは$Grid.selectedRows、クラス内からボタンクリックにバインドすると、更新後でも常に最新の値を取得することです。selectedRowsパブリックをクラス外のボタンクリックにバインドすると、refreshボタンがクリックされた後、selectedRows更新されなくなり、更新の直前の値でスタックします。

内部でバインドされたボタンは正しい配列値を表示するのに、パブリック プロパティでクラスの外部にバインドされselectedRowsたボタンはボタンをクリックしても更新されないのrefreshはなぜですか?

どんな助けでも大歓迎です！

4

1 に答える 1

1

あなたの問題は、オブジェクトへの参照を返す/追跡する方法にあります。

コンストラクターで、設定します$Grid = this

ただし、関数の結果として新しいオブジェクトを返します。

return {
    selectedRows: $Grid.selectedRows,
    refresh: $Grid.refresh,
}

その返されたオブジェクトは、現在の値への参照のみを保持するようになりました$Grid.selectedRows

refreshメソッドが$Grid.selectedRows新しい配列に設定されると、元の配列に設定されたままの返されたオブジェクトから関連付けられた値が壊れます。

更新を次のように変更します。

$Grid.selectedRows = []

に：

$Grid.selectedRows.length = 0;

デモ

于 2013-08-24T16:23:25.403 に答える