Kendo UI Grid 尝试使用以下配置选择行

Posted 2023-05-07

【中文标题】Kendo UI Grid 尝试使用以下配置选择行

【英文标题】：Kendo UI Grid trying to select row with the following configuration

【发布时间】：2017-04-14 14:23:51

【问题描述】：

在我使用 Kendo UI Grid 的 AngularJS 应用程序中。 我有以下 Kendo UI Grid 选项和数据源。我想要做的是以某种方式在每一行上添加点击事件。我对每一列都有定义，但我无法访问包含这些列的整行。如果不使用 rowTemplate 和 altRowTemplate，这可能吗？因为如果我使用它们，我必须再次重新定义整个表。

html：

<div
            k-options="ctrl.mainGridOptions"
            k-rebind="ctrl.mainGridOptions"
            kendo-grid="ctrl.gridInstance">
    </div>

网格选项：

  this.mainGridOptions = 
                dataSource: 
                    data: this.allRows,
                    pageSize: 150,
                    schema: 
                        model: 
                            fields: 
                                activityType:  type: "string" ,
                                communicationType:  type: "string" ,
                                count:  type: "number" ,
                            
                        
                    ,
                    aggregate: [
                        
                            field: "activityType",
                            aggregate: "count"
                        ,
                        
                            field: "communicationType",
                            aggregate: "count"
                        ,
                        
                            field: "count",
                            aggregate: "count"
                        
                    ],
                    group: 
                        field: this.groupBy.field,
                        aggregates: [
                            
                                field: "activityType",
                                aggregate: "count"
                            ,
                            
                                field: "communicationType",
                                aggregate: "count"
                            ,
                            
                                field: "count",
                                aggregate: "count"
                            
                        ]
                    
                ,
                scrollable: 
                    virtual: true
                ,
                sortable: true,
                resizable: false,
                pageable: false,
                groupable: true,
                columnMenu: true,
                filterable: true,
                reorderable: false,
                columns: [
                    
                        headerTemplate: '<md-checkbox ng-model="dataItem.checked" ng-change="ctrl.headerSelected(dataItem)" aria-label="row check" ng-transclude=""></md-checkbox>',
                        template: '<md-checkbox stop-event  ng-class="\'row-selected\' : ctrl.checkVisible.length > 0 || ctrl.headerCb" ng-model="dataItem.checked" ng-change="ctrl.rowSelected(dataItem, dataItem.cbIndex)" aria-label="item check"></md-checkbox>',
                        width:"50px"
                    ,
                    
                        field: "activityType",
                        title: "activityType",
                        aggregates: ['count'],
                        template: '<span ng-bind="dataItem.activityType"></span>',
                        groupHeaderTemplate: '<span class="aggregate-wrapper" ng-click="ctrl.toggleGroupCollapse($event)"><span>' + "activityType" + ':' + '</span>' + ' #= value # (Count: #= count#)</span>'
                    ,
                        field: "communicationType",
                        title: "communicationType",
                        aggregates: ['count'],
                        groupHeaderTemplate: '<span class="aggregate-wrapper" ng-click="ctrl.toggleGroupCollapse($event)"><span>' + "communicationType" + '</span>' + ' #= value # (Count: #= count#)</span>'
                    ,
                        field: "count",
                        title: "count",
                        aggregates: ['count'],
                        template: '<div layout="row" layout-align="center center">' +
                        '<md-progress-linear flex="80"  md-mode="determinate" ng-value="ctrl.calcProgressValue(dataItem.count)"></md-progress-linear>' +
                        '<span flex  style="text-align:right" ng-bind="dataItem.count"> </span>' +
                        '</div>',
                        groupHeaderTemplate: '<span class="aggregate-wrapper" ng-click="ctrl.toggleGroupCollapse($event)"><span>' + "count" + ':' + '</span>' + ' #= value # (Count: #= count#)</span>'
                    ,
                    
                        field: "",
                        title: null,
                        template: '<span class="action-controls"><i class="material-icons">label</i><i class="material-icons">star_rate</i><i class="material-icons"> more_vert </i></span>',
                        width: '200px'
                    
                ],
            ;

这是我传入剑道网格的数据

this.allRows = [

        "activityType": 2,
        "activitySubType": 10,
        "count": 265
      ,
      
        "activityType": 2,
        "activitySubType": 1,
        "count": 238
      ,
      
        "activityType": 7,
        "activitySubType": 3,
        "count": 102
      ,
      
        "activityType": 6,
        "activitySubType": 12,
        "count": 142
      ,
      
        "activityType": 6,
        "activitySubType": 18,
        "count": 98
      ,
      
        "activityType": 2,
        "activitySubType": 19,
        "count": 145
      
];

【问题讨论】：

让我说清楚.. 你想要的只是在所有行上都有一个点击事件，点击时你需要整个行数据.. 对吗？

完全正确并在单击时更改范围变量，然后在行上使用 ng-class 更改其类

我不知道 Angular 的东西.. 会让您控制点击并获取行数据.. 这对您有帮助吗？你必须从那里继续

【参考方案1】：

您可以使用change event，当selectable 选项设置为true 时，当使用更改网格中的行或单元格 时触发：

change: function() 
    // Get your row's data
    var dataItem = this.dataItem(this.select());

Demo

【讨论】：

它可以工作，但是为什么我不能选择第二行，当我做第一行时被取消选择

我只想在单击一行时调用一个函数。使用 selectable: "multiple, row" 它需要按 ctrl 才能选择第二行。

@GeorgiAntonov 要在单击该行时调用 函数，您只需在事件中调用它即可。要在没有 ctrl 键的情况下选择多行，我认为您必须使用自定义代码。

ok，鉴于此配置，是否很容易将属性添加到所有表行？

@GeorgiAntonov 您在allRows 数组的对象上添加的任何属性都将在您的dataItem 中可用。根本不需要在任何网格列上。示例：您的网格有 3 列，但您的 dataItems 有 5 个属性，所有这 5 个属性都在 dataItem 中可用。