Question

我使用ui-grid.

显示数据

ui-grid有三列。第一列包含每行checkbox。

正确填充数据，行选择正常，但以下问题除外。

问题：

单击行时，也应选中该复选框。我怎么能做到这一点？有什么想法吗？

HTML

<div class="row">
    <div class="col-lg-12">
        <div class="datalist-uigrid testGrid">
            <div class="grid testGrid" ui-grid="gridOptions" ui-grid-selection ui-grid-auto-resize></div>
        </div>
    </div>
</div>

控制器

这就是我定义我的领域的方式。

{
    field: 'selected',
    displayName: '',
    type: 'boolean',
    cellTemplate: uiGridTemplates.cellTemplates.buildCheckboxEditCell('row.entity.IsOneOff', 'row.entity.selected', ' ng-change="grid.appScope.onSelectChange()"'),
    enableFiltering: false,
    enableSorting: false,
    width: '3%'
},

gridOptions

$scope.gridOptions = {
    enableRowSelection: true,
    enableRowHeaderSelection: false,
    enableCellEdit: false,
    enableCellEditOnFocus: false,
    enableSorting: true,
    enableFiltering: true,
    multiSelect: false,
    enableColumnMenus: false,
    enableGridMenu: false,
    rowHeight: 60,
    modifierKeysToMultiSelect: false,
    noUnselect: true,
    onRegisterApi: function (gridApi) {
        $scope.gridApi = gridApi;
    }
};

这就是我拦截行点击事件的方式

$scope.gridOptions.onRegisterApi = function (gridApi) {
    $scope.gridApi = gridApi;
    gridApi.selection.on.rowSelectionChanged($scope, function (row) {
        $scope.onSelectRowChange(row.entity);
        var msg = 'row selected ' + row.isSelected;

    });
};

Answer 1

默认情况下，选择模块提供一个行标题，其中包含允许选择各行的复选框这可以使用enableRowHeaderSelection: true，

来完成

如果您将enableRowHeaderSelection中的gridOption设置为false，则隐藏行标题，然后点击该行将选择该行。
如果您想同时允许单击该行，并且还要单击rowHeader，则可以将enableFullRowSelection设置为true。

请按照本教程了解详情：
Row Selection

Answer 2

<kendo-grid-column field="IsChecked" class="uk-text-center">
    <template  kendoGridCellTemplate let-dataItem>
        <input type="checkbox" [checked]="dataItem.IsChecked" (click)="SelectCheckbox()" (change)="dataItem.IsChecked = !dataItem.IsChecked" />
    </template>
</kendo-grid-column>

ui-grid如何在单击行时选中复选框

2 个答案: