向 ui-grid 添加了自定义行模板，但丢失了行突出显示功能

Question

我按照捕获了网格上的双击事件。有趣的是，我的网格不再突出显示其复选框已被选中的行，如下面的 gif 中所述

在我添加行模板之前，一切都很好并且工作正常，如下面的 gif 所示

这是行模板代码：

控制器：

function rowTemplate() {
   return '<div ng-dblclick="grid.appScope.rowDblClick(row)" >' +
     ' <div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" ui-grid-one-bind-id-grid="rowRenderIndex + \'-\' + col.uid + \'-cell\'" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" role="{{col.isRowHeader ? \'rowheader\' : \'gridcell\'}}" ui-grid-cell></div>' +
     '</div>';
}

作为$scope.gridOptions的一部分：

 , rowTemplate: rowTemplate()

里面$scope.gridOptions

        $scope.rowDblClick = function(row) {
          console.log('double click event');

          var thisRow = gridApi.selection.getSelectedRows() //gets the clicked row object
          $log.log(thisRow);

          $('.item').on('click', function(){

            //if user clicks on grid tab, should go to grid view else go to patient view
            if ($(this).hasClass('not')){
              console.log('item has .not')
              $state.go('list.patient.patient-information');
            } else {
              console.log('item has .grid')
              $state.go('list.grid');
            }
            //
            $('.item').css('cssText', 'border-radius: 0px !important; background-color: #4B6A89; font-family: Roboto; font-size: 14px; color: white; font-weight: bold; letter-spacing: 1.5px; text-transform: uppercase;')
            $(this).closest('.item').css('cssText', 'border-radius: 0px !important; color: #4B6A89; background-color: white; font-family: Roboto; font-size: 14px; color: #4B6A89; font-weight: bold; letter-spacing: 1.5px; text-transform: uppercase;');
          });
          //after a 2click, deselect the row, so a user can edit another cell
          $scope.gridApi.selection.clearSelectedRows();
        };

更新：当我从模板中删除 <div ng-dblclick="grid.appScope.rowDblClick(row)" > 时，高亮行又回来了（尽管我失去了双击功能

Answer 1

经过反复试验问题已解决！

当我使用建议的语法为网格行添加 ng-dblclick 选项时，问题开始了：

function rowTemplate() {
  return '<div ng-dblclick="grid.appScope.rowDblClick(row)" >' +
            ' <div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" ui-grid-one-bind-id-grid="rowRenderIndex + \'-\' + col.uid + \'-cell\'" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" role="{{col.isRowHeader ? \'rowheader\' : \'gridcell\'}}" ui-grid-cell></div>' +
         '</div>';
}

我只是删除了 ng-dblclick 所在的 div，并将其移至主行模板 div，现在它看起来像这样：

function rowTemplate() {
  return ' <div ng-dblclick="grid.appScope.rowDblClick(row)" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" ui-grid-one-bind-id-grid="rowRenderIndex + \'-\' + col.uid + \'-cell\'" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" role="{{col.isRowHeader ? \'rowheader\' : \'gridcell\'}}" ui-grid-cell></div>';
}

Answer 2

我以前遇到过同样的问题。

显然，当我们在外面添加 div 用于双击时，它弄乱了 CSS 用于突出显示。因此，在您的示例中，在选中复选框时，行被选中，但不会突出显示。

解决方法是：

行模板：

  function rowTemplate() {
    return '<div ng-dblclick="grid.appScope.rowDblClick(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}"  ui-grid-cell></div>' +
                 '</div>';
   }

并为该特定网格添加 CSS，添加网格 ID 或样式：

 #gridStyle .ui-grid-row.ui-grid-row-selected > [ui-grid-row] .ui-grid-cell {
    background-color: #c9dde1;
}

Answer 3

My plunker working sample

function rowTemplate() {
    return '<div ng-dblclick="grid.appScope.rowDblClick(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 }"  ui-grid-cell></div>' +
        '</div>';
                                                      }

css:

/* --- ui-grid ------- row hover highlight ----- */

.ui-grid-row:hover .ui-grid-cell {
 background-color: #ff8476;  
}


/* ==== both works ===== */
/*
 .ui-grid-row:nth-child(odd):hover .ui-grid-cell{background:red}
 .ui-grid-row:nth-child(even):hover .ui-grid-cell{background:red}
*/

 /* --- End ----- ui-grid ------- row hover highlight ----- */

向 ui-grid 添加了自定义行模板，但丢失了行突出显示功能

Added custom row template to ui-grid but lost row highlight functionality

angular-ui-grid