0

总的来说，我有一个跟踪选定复选框 ID 的对象。这样做的方式是通过将 ID 推入/切出数组，$Grid.selectedRows. 该对象还将“刷新”方法绑定到刷新按钮。我有一个类，我从中创建了该对象，KendoGridSelection.

我的问题是类内部绑定的按钮显示了正确的数组值，而具有公共selectedRows属性的类外部绑定的按钮在单击按钮后不再更新refresh。

出于测试目的，我有两个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的 s 告诉我我的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 回答