Question

我跟着this stack thread捕获了网格上的双击事件。有趣的是，我的网格不再突出显示已选中复选框的行，如下面的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>';
}

我只是删除了div所在的ng-dblclick，然后将其移到主行模板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添加了自定义行模板，但丢失了行突出显示功能

3 个答案: