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]);
                }
            }
        };

Answer 2

你可以使用下面的函数展开所有行，$ scope.gridApi.treeBase.expandAllRows（），同样的方法可以折叠你可以使用collapseAllRows。您可以为该列添加cellTemplate，您需要'+'和' - '，并且对于'+'单击，您可以通过这些函数展开这些行。

如何扩展 - 在ui网格中折叠在行上点击分组？

2 个答案: