0

我有一个单元格模板，它显示来自外部 ui-select 的数据。但是，我只希望在选择行时显示单元格模板。这是我当前的代码：

$scope.gridOptions.columnDefs = [
  { name: 'resourceChannel', 
    cellTemplate: '<div ng-if="$(\'.ui-grid-row\').hasClass(\'ui-grid-row-selected\')">{{grid.appScope.channel.selected.channel}}</div>'},
];
4

1 回答 1

1

您可以添加诸如 Row-Selected-Listener 和 ng-if 之类的东西 - 检查当前行是否在选择中。

我添加了一个Plunkr，它演示了显示/隐藏 cellTemplate 的可能性。

首先，您将 ng-click 添加到 ui-grid 行模板，fe addRowtoSelection()。

$templateCache.put('ui-grid/uiGridViewport',
  ...
  "<div ng-repeat=\"(rowRenderIndex, row) in rowContainer.renderedRows track by $index\"" +
  "ng-click=\"grid.appScope.addRowtoSelection(row)\"" +
  ...
);

然后将该函数添加到您的 appScope。

all.gridOptions = {
        columnDefs: [
            {field: 'firstName', cellTemplate: '<div ng-if="grid.appScope.isRowSelected(row.uid)">something</div>'},
            {field: 'lastName'},
            {field: 'company'},
            {field: 'employed'}
        ],
        ...,    
        appScopeProvider : {
            addRowtoSelection : function(row) {
                var contains = false;
                for (var i = 0, len = all.rowsSelectedIds.length; i < len; i++) {
                    if(all.rowsSelectedIds[i] === row.uid) {
                        all.rowsSelectedIds.splice(i, 1);
                        contains = true;
                    }
                }
                if(!contains) {
                    all.rowsSelectedIds.push(row.uid);
                }
            },
            isRowSelected : function(id) {
                for (var i = 0, len = all.rowsSelectedIds.length; i < len; i++) {
                    if(all.rowsSelectedIds[i] === id) {
                        return true;
                    }
                }
                return false;
            },
        },

我还添加了对已选择行 ID 的检查，以便您在单击时添加/删除。在 ColumnDefs 中，您可以看到对 isRowSelected() 检查的引用，您可以在其中传入 row.uid。解析当前数组并返回真或假。

于 2015-09-11T12:56:29.737 回答