Question

我有一个显示来自外部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>'},
];

Answer 1

你可以添加类似于Row-Selected-Listener和ng-if的东西 - 检查当前行是否在选择中。

我添加了Plunkr，展示了显示/隐藏cellTemplate的可能性。

首先，在ui-grid rowtemplate中添加ng-click，f.e。 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。它解析当前数组并返回true或false。

Angular UI-Grid条件单元格模板

1 个答案: