javascript - 如何展开 - 在 ui 网格分组中折叠行单击？

Question

我试图在行点击时展开和折叠分组，因为它应该与 ui 网格中的 + 和 - 图标一起使用。

我正在尝试从行模板调用 treeButtonClick(row, $event) ，如下所示。但功能不触发。

rowTemplate: '<div ng-click="treeButtonClick(row, $event)" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" class="ui-grid-cell" ng-class="col.colIndex()" ui-grid-cell></div>',

此外，在 ui 网格中的分组中，这应该与 + 和 - 图标一样工作。

请建议我如何让它工作，在此先感谢

Answer 1

解决方法是:
1. 为您的表格创建自定义模板:

<div ng-mousedown="grid.appScope.onMouseDown(row, $event)"
     ng-click="grid.appScope.onDblClickRow(row.entity)" grid="grid" class="ui-grid-row">
    <div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name"
         class="ui-grid-cell" ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader, custom: true }"
         ui-grid-cell></div>
</div>

指定模板用作 rowTemplate 和您自己的应用范围提供程序:

vm.gridOptions = {
            appScopeProvider: myAppScopeProvider,
            rowTemplate: 'app/pages/components/building/buildReqViewAll/rowTemplate.html',
            onRegisterApi: function (gridApi) {
                vm.gridApi = gridApi;
            }
        };

打开你的行的函数:

var myAppScopeProvider = {
            onClickRow: function (row, event) {
                var rowIndex = row.grid.renderContainers.body.visibleRowCache.indexOf(row);

                if (!angular.isUndefined(row.treeLevel)) {
                    vm.gridApi.treeBase.toggleRowTreeState(vm.gridApi.grid.renderContainers.body.visibleRowCache[rowNumber]);
                }
            }
        };